/* ─────────────────────────────────────────────────────────────
   CARATTERI SERVITI DAL SITO
   Bodoni Moda e Jost stanno in assets/font: nessuna chiamata a
   Google, quindi nessun indirizzo IP dei visitatori esce da qui.
   È anche il motivo per cui non serve un banner dei cookie.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../font/bodonimoda-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../font/bodonimoda-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/bodonimoda-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/bodonimoda-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/bodonimoda-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/bodonimoda-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../font/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   DOLOMEA — gioielli botanici nati tra le Dolomiti

   Sistema scuro: bruno notte caldo, titoli bianchi,
   UNA riga in corsivo rosa per l'accento, oro per le didascalie.
   Bordeaux #4C1030 e oro dal biglietto da visita del brand.

   Pensato prima per il telefono: è da lì che arriva quasi tutto.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ---- fondo ---- */
  --ink:        #17120F;
  --ink-2:      #1E1713;
  --ink-3:      #261D18;
  --plum:       #4C1030;
  --plum-deep:  #2A0919;
  --plum-soft:  #6B2144;

  /* ---- accenti ---- */
  --gold:       #D9B77E;
  --gold-lt:    #F7DFBB;
  --rose:       #FFC9DB;   /* il corsivo dei titoli */
  --rose-mid:   #D9718F;   /* i bottoni */
  --rose-deep:  #A8455F;

  /* ---- testo ---- */
  --tx:         #F5EDE6;
  --tx-mid:     rgba(245,237,230,.72);
  --tx-dim:     rgba(245,237,230,.54);

  /* ---- misure ---- */
  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --r-lg: 26px;
  --r-md: 18px;
  --sec-y: clamp(5.5rem, 13vh, 10rem);

  /* ---- movimento ---- */
  --e:  cubic-bezier(.16, 1, .3, 1);
  --e2: cubic-bezier(.65, 0, .35, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:clamp(1.03rem, .3vw + 1rem, 1.115rem);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
.u-hidden{ position:absolute; width:0; height:0; overflow:hidden; }

.skip{
  position:fixed; top:10px; left:10px; z-index:300;
  transform:translateY(-180%);
  background:var(--rose-mid); color:#2A0913;
  padding:.75rem 1.25rem; border-radius:999px; text-decoration:none;
  transition:transform .3s var(--e);
}
.skip:focus-visible{ transform:none; }

:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:8px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ═══════════════════════ TIPOGRAFIA ═══════════════════════ */

.display{
  font-family:'Bodoni Moda', 'Times New Roman', serif;
  font-weight:500;
  font-size:clamp(2.15rem, 6.4vw, 3.7rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:#FFFFFF;
  margin:0 0 1.35rem;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(2.5rem, 8.6vw, 4.5rem); }
/* la riga d'accento: una sola, in corsivo, rosa */
.display em{
  font-style:italic; font-weight:400;
  color:var(--rose); display:block;
}

.eyebrow{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.6; flex:none; }
.sechead--center .eyebrow{ justify-content:center; }

.lead{
  font-size:clamp(1.02rem, .45vw + .95rem, 1.2rem);
  line-height:1.68;
  color:var(--tx-mid);
  max-width:56ch;
  margin:0 0 2rem;
}
.lead--wide{ max-width:66ch; }

.prose p{ margin:0 0 1.35rem; max-width:58ch; color:var(--tx-mid); }
.prose__pull{
  font-family:'Bodoni Moda', serif;
  font-style:italic; font-weight:400;
  font-size:clamp(1.24rem, 3.6vw, 1.6rem);
  line-height:1.42;
  color:var(--rose);
  padding-left:1.2rem;
  border-left:1px solid var(--rose-deep);
}

.note{ font-size:.94rem; color:var(--tx-dim); max-width:60ch; margin:2rem 0 0; }

.sign{
  font-family:'Bodoni Moda', serif; font-style:italic;
  font-size:1.1rem; color:var(--gold); margin-top:2rem;
}
.sign::before{ content:'— '; }

.sechead{ max-width:62ch; margin-bottom:clamp(2.5rem, 6vh, 4.5rem); }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead--center .lead{ margin-inline:auto; }

/* ═══════════════════════ SUPERFICI ═══════════════════════ */

/* vetro vero: solo sul chrome, poche superfici, nessun costo sullo scorrimento */
.glass{
  background:linear-gradient(148deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 20px 46px -26px rgba(0,0,0,.7);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(30,23,19,.9); }
}

/* resina: la firma. Spessore sul bordo, riflesso, micro-bolle. */
.resin{
  position:relative;
  border-radius:var(--r-md);
  background:linear-gradient(158deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 58%, rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -18px 30px -22px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(217,183,126,.09),
    0 26px 56px -34px rgba(0,0,0,.8);
  overflow:hidden; isolation:isolate;
}
.resin::after{        /* micro-bolle d'aria — dal post "Gelo" */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.30) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 79% 13%, rgba(255,255,255,.22) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 88% 64%, rgba(255,255,255,.26) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 34% 88%, rgba(255,255,255,.18) 0 .8px, transparent 1.3px);
}
.resin::before{       /* riflesso che attraversa il vetro */
  content:''; position:absolute; inset:-2px; pointer-events:none; z-index:3;
  background:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform:translate3d(-130%,0,0);
  transition:transform 1.2s var(--e);
}
.resin:hover::before, .resin:focus-within::before{ transform:translate3d(130%,0,0); }

/* filo sottile oro→rosa fra le sezioni */
.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(217,183,126,.5) 22%, rgba(217,113,143,.6) 60%, transparent);
}

/* ═══════════════════════ BOTTONI ═══════════════════════ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:54px; padding:.9rem 1.7rem;
  border-radius:999px; border:1px solid transparent;
  font-size:1rem; font-weight:400; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; position:relative;
  transition:transform .45s var(--e), box-shadow .45s var(--e),
             background-color .35s ease, color .35s ease, border-color .35s ease;
  touch-action:manipulation;
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform .5s var(--e); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--rose{
  background:linear-gradient(150deg, #F0A6BC, var(--rose-mid) 62%, var(--rose-deep));
  color:#2A0913;
  box-shadow:0 14px 34px -14px rgba(217,113,143,.72), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--rose:hover{ box-shadow:0 20px 44px -14px rgba(217,113,143,.88), inset 0 1px 0 rgba(255,255,255,.55); }
.btn--rose:hover svg{ transform:translateY(3px); }

.btn--gold{
  background:linear-gradient(150deg, #F3DCB2, var(--gold) 60%, #B9954F);
  color:#2A1C08;
  box-shadow:0 14px 34px -14px rgba(217,183,126,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover svg{ transform:translateX(4px); }

.btn--ghost{
  border-color:rgba(245,237,230,.26); color:var(--tx);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.11); border-color:rgba(245,237,230,.4); }

.link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.84rem; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--rose);
  padding:.5rem 0; min-height:44px;
  border-bottom:1px solid rgba(217,113,143,.32);
  align-self:flex-start;
  transition:color .3s ease, border-color .3s ease, gap .35s var(--e);
}
.link svg{ width:15px; height:15px; }
.link:hover{ color:#FFE1EC; border-color:var(--rose); gap:.8rem; }

.chip{
  display:inline-block;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.3rem .72rem; border-radius:999px;
  background:rgba(217,183,126,.11); color:var(--gold-lt);
  border:1px solid rgba(217,183,126,.24);
  margin-bottom:.8rem;
}
.chip--gold{ background:rgba(217,113,143,.13); color:var(--rose); border-color:rgba(217,113,143,.3); }

/* ═══════════════════════ BARRA IN ALTO ═══════════════════════
   Marchio a sinistra, lingua e tasto menu a destra. Il selettore lingua
   sta nella barra su tutti gli schermi: su telefono si stringe, perde il
   mappamondo e tiene comunque i 44px di area toccabile. */

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem var(--pad);
  transition:transform .55s var(--e), background-color .55s var(--e);
}
.topbar.is-solid{
  background:rgba(23,18,15,.74);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.topbar.is-up{ transform:translateY(-105%); }

.brand{ display:inline-flex; align-items:center; text-decoration:none; flex:none; }
.brand__word{
  font-family:'Bodoni Moda', serif;
  font-weight:400; font-size:1.36rem; letter-spacing:.05em;
  color:#FFFFFF; display:inline-flex; align-items:center;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.brand__flower{ width:.72em; height:.72em; color:var(--rose); margin:0 .05em; transition:transform 1s var(--e); }
.brand:hover .brand__flower{ transform:rotate(144deg); }

.nav__wrap{ display:none; }
.topbar__right{ display:flex; align-items:center; gap:.55rem; flex:none; }

/* selettore lingua — tre bandiere, la pastiglia rosa scivola su quella attiva */
.lang{ display:flex; align-items:center; }
.lang__track{
  position:relative; display:flex; padding:3px; border-radius:999px;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.lang__pill{
  position:absolute; top:3px; left:3px;
  width:calc((100% - 6px) / 3); height:calc(100% - 6px);
  border-radius:999px;
  background:linear-gradient(150deg, rgba(255,201,219,.34), rgba(217,113,143,.5));
  border:1px solid rgba(255,201,219,.5);
  box-shadow:0 3px 10px -4px rgba(217,113,143,.8), inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateX(calc(var(--i, 0) * 100%));
  transition:transform .58s cubic-bezier(.22, 1, .28, 1);
  will-change:transform;
}
.lang__pill.is-move{ animation:pillLiquidX .58s var(--e); }
@keyframes pillLiquidX{ 45%{ scale:1.18 .86; } }
.lang__btn{
  position:relative; z-index:1; border:0; background:none; cursor:pointer;
  min-width:34px; min-height:32px; padding:0;
  font-size:.98rem; line-height:1;
  border-radius:999px; touch-action:manipulation;
  opacity:.52; filter:grayscale(.55);
  transition:opacity .45s var(--e), filter .45s var(--e), transform .45s var(--e);
}
.lang__btn.is-on{ opacity:1; filter:none; }
.lang__btn:hover{ opacity:.85; }
.lang__btn.is-on:hover{ opacity:1; transform:scale(1.06); }

.burger{
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  cursor:pointer; position:relative; flex:none;
  touch-action:manipulation; transition:background-color .35s ease;
}
.burger:hover{ background:rgba(255,255,255,.16); }
.burger span{
  position:absolute; left:50%; width:17px; height:1.5px;
  background:var(--tx); border-radius:2px; transform:translateX(-50%);
  transition:transform .5s var(--e), opacity .3s ease;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateX(-50%) translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateX(-50%) translateY(-3px) rotate(-45deg); }

/* ═══════════════════════ MENU ═══════════════════════ */

.sheet{ position:fixed; inset:0; z-index:200; }
.sheet::before{
  content:''; position:absolute; inset:0;
  background:rgba(15,10,8,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .5s var(--e);
}
.sheet.is-open::before{ opacity:1; }
.sheet__panel{
  position:absolute; inset:0 0 auto; padding:5rem var(--pad) 2rem;
  background:linear-gradient(165deg, #331222 0%, var(--ink) 76%);
  border-bottom:1px solid rgba(255,255,255,.10);
  border-radius:0 0 28px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(-102%);
  transition:transform .7s var(--e);
  max-height:100svh; overflow-y:auto;
}
.sheet.is-open .sheet__panel{ transform:translateY(0); }
.sheet__close{
  position:absolute; top:.8rem; right:var(--pad);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  display:grid; place-items:center; cursor:pointer;
}
.sheet__close svg{ width:18px; height:18px; color:var(--tx); }
.sheet nav{ display:flex; flex-direction:column; }
.sheet nav a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.8rem 0; min-height:54px;
  text-decoration:none; color:var(--tx);
  font-family:'Bodoni Moda', serif; font-size:1.5rem; font-weight:400;
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e), transform .5s var(--e), color .3s ease;
}
.sheet.is-open nav a{ opacity:1; transform:none; }
.sheet nav a em{
  font-family:'Jost',sans-serif; font-style:normal;
  font-size:.62rem; letter-spacing:.18em; color:var(--gold); opacity:.85;
}
.sheet nav a:hover{ color:var(--rose); }

.sheet__wa{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-top:1.2rem; min-height:56px; border-radius:999px;
  background:linear-gradient(150deg, #F0A6BC, var(--rose-mid) 62%, var(--rose-deep));
  color:#2A0913; text-decoration:none; font-size:1rem;
  box-shadow:0 14px 34px -14px rgba(217,113,143,.7);
}
.sheet__wa svg{ width:20px; height:20px; }

/* ═══════════════════════ HERO ═══════════════════════
   TELEFONO — la foto occupa la parte alta e sfuma nel fondo scuro;
   il testo sta sotto, sul buio, dove si legge senza velature.
   DESKTOP — la foto torna a tutto schermo e il testo ci sta sopra. */

.hero__frame{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  background:var(--ink);
  overflow:hidden;
}
/* la verticale porta già il marchio impresso in alto: le lascio i due terzi */
.hero__media{ min-height:58svh; }

.hero__media{ position:relative; overflow:hidden; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
  will-change:transform;
  /* lo zoom lento parte dai ciondoli, che sono il centro della foto */
  transform-origin:50% 48%;
  animation:heroIn 1.7s var(--e) both, heroDrift 26s ease-in-out 1.7s infinite alternate;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.06) } to{ opacity:1; transform:scale(1) } }
@keyframes heroDrift{ from{ transform:scale(1) } to{ transform:scale(1.035) } }

/* la foto non finisce con un bordo netto: sfuma nel fondo */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(23,18,15,.55) 0%, rgba(23,18,15,.06) 26%, rgba(23,18,15,0) 52%),
    linear-gradient(to top,    var(--ink) 0%, rgba(23,18,15,.72) 12%, rgba(23,18,15,0) 40%);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(1.6rem, 5vh, 2.6rem);
  margin-top:-2.5rem;                 /* il testo entra un po' dentro la sfumatura */
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.hero__eyebrow{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt); margin:0 0 .9rem;
}
.hero__title{
  font-family:'Bodoni Moda', serif; font-weight:500;
  font-size:clamp(1.72rem, 7.2vw, 3.9rem);
  line-height:1.1; letter-spacing:-.018em;
  color:#FFFFFF; margin:0 0 .85rem;
}
.hero__title em{ display:block; font-style:italic; font-weight:400; color:var(--rose); }
.hero__lead{
  font-size:1rem; line-height:1.58;
  color:var(--tx-mid); max-width:33ch; margin:0 0 1.5rem;
}
.hero__cta{ min-width:min(300px, 82vw); }

.hero__trust{
  margin:1.25rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.25rem .65rem;
  font-size:.75rem; letter-spacing:.05em; color:var(--tx-dim);
}
.hero__trust li{ display:flex; align-items:center; gap:.65rem; }
.hero__trust li + li::before{ content:'·'; color:var(--rose-mid); }
.hero__trust a{ color:var(--rose); text-decoration:none; border-bottom:1px solid rgba(217,113,143,.45); }
.hero__trust a:hover{ color:#FFE1EC; }

.hero__cue{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  margin-top:clamp(1rem, 3vh, 1.8rem); text-decoration:none;
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tx-dim); min-height:44px; justify-content:center;
  transition:color .35s ease;
}
.hero__cue:hover{ color:var(--rose); }
.hero__cue i{
  display:block; width:1px; height:24px; transform-origin:top;
  background:linear-gradient(to bottom, rgba(217,183,126,.95), transparent);
  animation:cue 2.4s var(--e) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.35 } 50%{ transform:scaleY(1); opacity:1 } }

/* entrata: una voce alla volta */
.hero__eyebrow,.hero__title,.hero__lead,.hero__cta,.hero__trust,.hero__cue{
  opacity:0; transform:translateY(22px);
  animation:up .95s var(--e) both;
}
.hero__eyebrow{ animation-delay:.32s }
.hero__title  { animation-delay:.38s }
.hero__lead   { animation-delay:.60s }
.hero__cta    { animation-delay:.74s }
.hero__trust  { animation-delay:.88s }
.hero__cue    { animation-delay:1.02s }
@keyframes up{ to{ opacity:1; transform:none } }

/* ═══════════════════════ SEZIONI ═══════════════════════ */

.sec{ padding-block:var(--sec-y); position:relative; }
/* Nessun cambio di fondo deve leggersi come una riga netta: ogni sezione
   colorata nasce dal buio e ci ritorna, con 200px di sfumatura. */
.sec--ink2{
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(23,18,15,0) 170px),
    linear-gradient(to top, var(--ink) 0, rgba(23,18,15,0) 150px),
    var(--ink-2);
}
.sec--ink3{
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(23,18,15,0) 200px),
    linear-gradient(to top, var(--ink) 0, rgba(23,18,15,0) 180px),
    radial-gradient(110% 70% at 12% 0%, rgba(76,16,48,.42), transparent 62%),
    var(--ink-3);
}
.sec--plum{
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(23,18,15,.62) 70px, rgba(23,18,15,0) 240px),
    linear-gradient(to top, var(--ink) 0, rgba(23,18,15,.5) 60px, rgba(23,18,15,0) 210px),
    radial-gradient(95% 65% at 88% 6%, rgba(217,113,143,.22), transparent 60%),
    linear-gradient(162deg, var(--plum), var(--plum-deep) 74%);
}
.sec--contatti{
  background:
    linear-gradient(to bottom, var(--ink) 0, rgba(23,18,15,0) 190px),
    radial-gradient(105% 75% at 18% 100%, rgba(76,16,48,.62), transparent 64%),
    linear-gradient(170deg, var(--ink-2), var(--ink));
}

/* — striscia di fiducia sotto il hero — */
.strip-facts{ background:var(--ink-2); position:relative; }
.strip-facts::before, .strip-facts::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,183,126,.42) 24%, rgba(217,113,143,.5) 62%, transparent);
}
.strip-facts::before{ top:0; }
.strip-facts::after{ bottom:0; }
.strip-facts ul{
  margin:0 auto; padding:1.1rem var(--pad); list-style:none; max-width:var(--wrap);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem 1.8rem;
}
.strip-facts li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-mid); white-space:nowrap;
}
.strip-facts svg{ width:15px; height:15px; color:var(--gold); flex:none; }

/* — manifesto — */
.pillars{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top:clamp(2.5rem, 6vh, 4rem);
}
.pillar{ padding:1.5rem 1.4rem 1.6rem; }
.pillar__num{
  font-family:'Bodoni Moda', serif; font-size:2.2rem; line-height:1;
  color:var(--rose-deep); display:block; margin-bottom:.75rem;
}
.pillar h3{
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:1.18rem; line-height:1.3; margin:0 0 .55rem; color:var(--gold-lt);
}
.pillar p{ margin:0; font-size:.96rem; color:var(--tx-mid); }

/* — storia — */
.story{ display:grid; gap:clamp(2.5rem, 7vh, 4rem); align-items:center; }
.story__media{ position:relative; }
.story__img{ width:100%; border-radius:var(--r-lg); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.story__img--2{
  position:absolute; right:-2%; bottom:-7%; width:40%;
  border-radius:var(--r-md); border:4px solid var(--ink-2);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9);
}
.story__seal{
  position:absolute; left:12px; top:12px;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(76,16,48,.95), rgba(23,18,15,.95));
  border:1px solid rgba(217,183,126,.3);
}
.story__seal svg{ width:27px; height:27px; color:var(--gold); position:relative; z-index:4; }

/* — collezioni — */
.grid-col{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.card{ display:flex; flex-direction:column; }
.card__media{ overflow:hidden; position:relative; }
.card__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.3s var(--e); }
.card:hover .card__media img{ transform:scale(1.055); }
.card__body{ padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.card__name{
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:1.55rem; line-height:1.14; margin:0 0 .55rem; color:#FFFFFF;
}
.card__body p{ margin:0 0 1.1rem; font-size:.95rem; line-height:1.64; color:var(--tx-mid); flex:1; }

/* schede piccole: solo in home, per lasciare respiro alla pagina */
.grid-col--home{ grid-template-columns:1fr 1fr; gap:.9rem; max-width:700px; margin-inline:auto; }
.card--mini{ margin:0; }
.card--mini .card__media img{ aspect-ratio:1/1; }
.card--mini .card__body{ padding:.95rem 1rem 1.15rem; }
.card--mini .card__name{ font-size:1.22rem; margin:0 0 .3rem; }
.card--mini .card__body p{ margin:0; font-size:.83rem; line-height:1.5; }
.card--mini:hover .card__media img{ transform:none; }
/* la quinta scheda prende tutta la riga: la griglia resta chiusa */
.grid-col--home .card--mini:last-child{ grid-column:1 / -1; }
.grid-col--home .card--mini:last-child .card__media img{ aspect-ratio:16/9; }
.grid-col--home .card--mini:last-child .card__body p{ max-width:46ch; }

/* — indossati — */
.strip{
  display:grid; gap:.9rem; grid-template-columns:repeat(4, 1fr);
  padding-inline:var(--pad); margin-top:clamp(2.2rem, 6vh, 3.5rem);
}
.strip figure{ margin:0; }
.strip img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md);
  box-shadow:0 26px 54px -34px rgba(0,0,0,.9);
  transition:transform .9s var(--e);
}
.strip figure:nth-child(even) img{ aspect-ratio:4/6; }
.strip figure:nth-child(even){ margin-top:2rem; }
.strip figure:hover img{ transform:translateY(-8px); }

/* — processo — */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:2rem; }
.step{ display:flex; gap:1.05rem; align-items:flex-start; }
.step__ico{ flex:none; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; }
.step__ico svg{ width:23px; height:23px; color:var(--gold); position:relative; z-index:4; }
.step h3{
  display:flex; align-items:baseline; gap:.7rem;
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:1.3rem; margin:.3rem 0 .45rem; color:#FFFFFF;
}
.step h3 em{ font-family:'Jost',sans-serif; font-style:normal; font-size:.62rem; letter-spacing:.18em; color:var(--rose-mid); }
.step p{ margin:0; color:var(--tx-mid); max-width:56ch; }

.gallery{
  display:grid; gap:.9rem; margin-top:clamp(2.5rem, 6vh, 4rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.gallery__it{ margin:0; }
.gallery__it img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md);
  box-shadow:0 26px 54px -34px rgba(0,0,0,.9);
  transition:transform .9s var(--e);
}
.gallery__it:hover img{ transform:translateY(-6px); }
.gallery__it--wide{ grid-column:span 2; }
.gallery__it--wide img{ aspect-ratio:4/3; }
.gallery figcaption{ margin-top:.6rem; font-size:.81rem; color:var(--tx-dim); }

/* — promessa — */
.promessa{ display:grid; gap:clamp(2.5rem, 7vh, 4rem); align-items:center; }
.promessa__steps{ list-style:none; margin:clamp(2rem,5vh,3rem) 0 0; padding:0; display:grid; gap:1.35rem; }
.promessa__steps li{ display:flex; gap:1rem; align-items:flex-start; }
.rn{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Bodoni Moda', serif; font-size:1rem; color:var(--rose);
  background:rgba(255,201,219,.10); border:1px solid rgba(255,201,219,.28);
}
.promessa__steps h3{ font-family:'Bodoni Moda', serif; font-weight:400; font-size:1.1rem; margin:.35rem 0 .2rem; color:#FFFFFF; }
.promessa__steps p{ margin:0; font-size:.94rem; color:rgba(245,237,230,.7); max-width:44ch; }

.promessa__media{ position:relative; min-height:340px; }
.float{ margin:0; position:absolute; border-radius:var(--r-md); overflow:hidden; box-shadow:0 40px 80px -36px rgba(0,0,0,.95); }
.float img{ width:100%; }
.float--a{ width:62%; left:0; top:0; z-index:2; transform:rotate(-2.4deg); }
.float--b{ width:54%; right:0; bottom:0; z-index:1; transform:rotate(2.8deg); }
.qrbadge{ position:absolute; z-index:3; right:3%; top:3%; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; }
.qrbadge svg{ width:25px; height:25px; color:var(--gold); }

/* — lettera — */
.lettera{ display:grid; gap:clamp(2.5rem, 7vh, 4rem); align-items:center; }
.lettera__media{ position:relative; }
.lettera__main{ width:100%; border-radius:var(--r-lg); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.lettera__side{
  position:absolute; left:-3%; bottom:-8%; width:38%;
  border-radius:var(--r-md); border:4px solid var(--ink);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9);
}
.lettera--home .chip{ margin-bottom:1rem; }
.lettera--home .lettera__side{ border-color:var(--plum-deep); }
.lettera--home .lead{ margin-bottom:1.8rem; }
.lettera--home .note{ margin-top:1.4rem; color:rgba(245,237,230,.6); }

.ticks{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.65rem; }
.ticks li{ display:flex; align-items:center; gap:.7rem; font-size:.99rem; color:var(--tx-mid); }
.ticks svg{ width:18px; height:18px; color:var(--rose-mid); flex:none; }

/* — a confronto: La Lettera / La Promessa — */
.confronto{
  display:grid; gap:1.1rem; margin-top:clamp(2.2rem, 6vh, 3.4rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 285px), 1fr));
}
.confronto__it{ padding:1.7rem 1.5rem 1.8rem; }
.confronto__ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:rgba(217,113,143,.14); border:1px solid rgba(217,113,143,.3);
}
.confronto__ico svg{ width:23px; height:23px; color:var(--rose); position:relative; z-index:4; }
.confronto__it h3{
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:1.5rem; line-height:1.2; margin:1.05rem 0 .35rem; color:#FFFFFF;
}
.confronto__sub{
  margin:0 0 1.4rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.confronto dl{ margin:0; display:grid; gap:.95rem; }
.confronto dt{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-dim);
}
.confronto dd{ margin:.25rem 0 0; font-size:.95rem; line-height:1.55; color:var(--tx-mid); }

/* — confezione — */
.packgrid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.packgrid figure{ margin:0; }
.packgrid img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md);
  box-shadow:0 26px 54px -34px rgba(0,0,0,.9);
  transition:transform .9s var(--e);
}
.packgrid figure:hover img{ transform:translateY(-7px); }

/* — onestà — */
.honest{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.honest__col{ padding:1.6rem 1.5rem 1.8rem; }
.honest__col h3{
  font-family:'Bodoni Moda', serif; font-weight:400; font-size:1.26rem;
  margin:0 0 1rem; display:flex; align-items:center; gap:.6rem; color:#FFFFFF;
}
.honest__col h3::before{ content:''; width:8px; height:8px; border-radius:50%; flex:none; }
.honest__col--pro h3::before{ background:var(--gold); box-shadow:0 0 0 4px rgba(217,183,126,.16); }
.honest__col--con h3::before{ background:var(--rose-mid); box-shadow:0 0 0 4px rgba(217,113,143,.16); }
.honest ul{ margin:0; padding:0; list-style:none; display:grid; gap:.8rem; }
.honest li{ position:relative; padding-left:1.4rem; font-size:.96rem; line-height:1.6; color:var(--tx-mid); }
.honest li::before{ content:''; position:absolute; left:0; top:.66em; width:7px; height:1px; background:var(--gold); opacity:.75; }
.honest__col--con li::before{ background:var(--rose-mid); }

/* — contatti — */
.contatti{ display:grid; gap:clamp(2.5rem, 7vh, 4rem); align-items:center; }
.contatti__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.4rem; }
.contatti__card{ padding:10px; border-radius:var(--r-md); }
.contatti__card img{ width:100%; border-radius:12px; position:relative; z-index:1; }

/* — ritorno alla home dalle pagine interne — */
.ritorno{ padding:0 var(--pad) clamp(3rem, 8vh, 5rem); text-align:center; }
.ritorno .btn svg{ transform:rotate(180deg); }
.ritorno .btn:hover svg{ transform:rotate(180deg) translateX(3px); }

/* — pagine legali — */
.legale{ max-width:70ch; }
.legale h1{ margin-bottom:1.4rem; }
.legale h2{
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:clamp(1.32rem, 3.4vw, 1.7rem); line-height:1.25;
  color:var(--gold-lt); margin:2.8rem 0 .7rem;
}
.legale p{ color:var(--tx-mid); margin:0 0 1rem; }
.legale .lead{ margin-bottom:2.2rem; }
.legale__box{ padding:1.5rem 1.4rem .4rem; margin:0 0 1rem; }
.legale__box h2{ margin:0 0 1.1rem; font-size:1.2rem; color:#FFFFFF; }
.legale__box .ticks{ margin-bottom:1.1rem; }
.legale__box .ticks li{ align-items:flex-start; }
.legale__box .ticks svg{ margin-top:.28rem; }
.legale .more{ text-align:left; margin-top:3rem; }
.legale .more .btn svg{ transform:rotate(180deg); }

/* ═══════════════════════ FOOTER ═══════════════════════ */

.foot{ background:var(--ink); padding-block:clamp(3rem,8vh,4.5rem) 2.4rem; border-top:1px solid rgba(255,255,255,.07); }
.foot__in{ display:grid; gap:1.25rem; justify-items:center; text-align:center; }
.brand--foot{ flex-direction:column; gap:.4rem; }
.brand--foot .brand__word{ font-size:1.7rem; }
.brand__sub{
  font-size:.67rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-dim); text-align:center;
}
.foot__pay{
  max-width:42ch; margin:0;
  font-family:'Bodoni Moda', serif; font-style:italic;
  font-size:1.03rem; line-height:1.55; color:var(--gold-lt);
}
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem 1.25rem; }
.foot__nav a{
  font-size:.85rem; color:var(--tx-mid); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; transition:color .3s ease;
}
.foot__nav a:hover{ color:var(--rose); }
.foot__cr{ font-size:.78rem; color:var(--tx-dim); margin:0; }
.lang--foot .lang__track{ background:rgba(255,255,255,.05); }
.lang--foot .lang__btn{ min-width:40px; min-height:36px; font-size:1.02rem; }

/* ═══════════════════════ RIVELAZIONI ═══════════════════════ */

[data-reveal]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .9s var(--e), transform .9s var(--e);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* il corsivo rosa arriva un attimo dopo la prima riga */
.display[data-reveal] em{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .9s var(--e) .2s, transform .9s var(--e) .2s;
}
.display[data-reveal].is-in em{ opacity:1; transform:none; }

/* il filetto dell'occhiello si allunga */
.eyebrow[data-reveal]::before{ width:0; transition:width 1s var(--e) .12s; }
.eyebrow[data-reveal].is-in::before{ width:22px; }

/* le immagini si assestano invece di comparire ferme */
.card--mini[data-reveal] .card__media img,
.mappa__it[data-reveal] img{ transform:scale(1.07); transition:transform 1.5s var(--e); }
.card--mini[data-reveal].is-in .card__media img,
.mappa__it[data-reveal].is-in img{ transform:scale(1); }

/* le spunte si accendono una dopo l'altra */
.ticks[data-reveal] svg{
  opacity:0; transform:scale(.55);
  transition:opacity .5s var(--e), transform .6s var(--e);
}
.ticks[data-reveal].is-in svg{ opacity:1; transform:none; }
.ticks[data-reveal].is-in li:nth-child(1) svg{ transition-delay:.16s; }
.ticks[data-reveal].is-in li:nth-child(2) svg{ transition-delay:.30s; }
.ticks[data-reveal].is-in li:nth-child(3) svg{ transition-delay:.44s; }

/* riflesso che passa sull'invito principale, ogni tanto */
.btn--rose{ overflow:hidden; }
.btn--rose::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(102deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  background-size:230% 100%; background-position:-70% 0;
  transition:background-position 1.1s var(--e);
}
.btn--rose:hover::after{ background-position:175% 0; }
.hero__cta::after{ animation:lucePassa 9s var(--e) 2.8s infinite; }
@keyframes lucePassa{ 0%, 74%{ background-position:-70% 0; } 93%, 100%{ background-position:175% 0; } }

/* la foto piccola della lettera respira piano */
.lettera--home .lettera__side{ animation:galleggia 9s ease-in-out 1s infinite alternate; }
@keyframes galleggia{ from{ translate:0 0; } to{ translate:0 -11px; } }
@keyframes pillLiquidY{ 45%{ scale:.86 1.18; } }

.rail{ display:none; }

/* ═══════════════════════ DA TABLET IN SU ═══════════════════════ */

@media (min-width:700px){
  .story, .lettera, .promessa, .contatti{ grid-template-columns:1fr 1fr; }
  .lettera__media{ order:-1; }
  .steps{ grid-template-columns:1fr 1fr; gap:2.6rem 2rem; }
  .hero__lead{ max-width:44ch; font-size:1.1rem; }
}

@media (min-width:961px){
  .topbar{ padding:1rem var(--pad); }
  .nav__wrap{
    display:flex; gap:.2rem; padding:.3rem; border-radius:999px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
  }
  .nav__wrap a{
    padding:.55rem .9rem; min-height:44px;
    display:inline-flex; align-items:center;
    font-size:.87rem; text-decoration:none; color:rgba(245,237,230,.84);
    border-radius:999px; position:relative; transition:color .3s ease;
  }
  .nav__wrap a::after{
    content:''; position:absolute; left:50%; bottom:.32rem; width:0; height:1px;
    background:var(--rose); transform:translateX(-50%); transition:width .45s var(--e);
  }
  .nav__wrap a:hover{ color:#fff; }
  .nav__wrap a:hover::after, .nav__wrap a.is-here::after{ width:24px; }
  .nav__wrap a.is-here{ color:var(--rose); }
  .burger{ display:none; }
  .story{ grid-template-columns:.95fr 1.05fr; }
  .promessa{ grid-template-columns:1.05fr .95fr; }
  .contatti{ grid-template-columns:1.1fr .9fr; }
}

/* su telefono la barra deve tenere marchio + lingua + menu in 375px:
   la pastiglia si stringe e il mappamondo sparisce sotto i 400px */
@media (max-width:960px){
  .topbar{ gap:.45rem; }
  /* su telefono sta al centro, fra marchio e tasto menu, e resta piccolo */
  /* Su telefono le bandiere stanno in orizzontale, appena sotto il marchio,
     solo in home e solo finché la barra è trasparente: appena la barra
     diventa scura si disperdono. Poi la lingua si cambia dal piede. */
  .topbar .lang{
    position:absolute; left:0; right:0; top:50%;
    justify-content:center; transform:translateY(-50%);
    pointer-events:none;                 /* passa oltre: cliccabili solo le bandiere */
    transition:opacity .4s var(--e), transform .4s var(--e);
  }
  .topbar .lang__track{ pointer-events:auto; }
  html:not([data-pagina="home"]) .topbar .lang{ display:none; }
  /* Quando la barra diventa scura le bandiere non svaniscono in blocco:
     si disperdono una alla volta, dal basso, e per ultima se ne va la
     pastiglia di vetro che le tiene. */
  .topbar .lang__track{ transition:opacity .4s var(--e), transform .55s var(--e); }
  .topbar .lang__btn{
    transition:opacity .38s var(--e), transform .55s var(--e), filter .4s var(--e);
  }
  .topbar.is-solid .lang__track,
  .topbar.is-up .lang__track{ pointer-events:none; }
  .topbar.is-solid .lang__btn,
  .topbar.is-up .lang__btn{
    opacity:0; transform:translateY(-16px) scale(.55) rotate(-10deg); filter:blur(3px);
  }
  .topbar.is-solid .lang__btn:nth-of-type(1),
  .topbar.is-up .lang__btn:nth-of-type(1){ transition-delay:.16s; }
  .topbar.is-solid .lang__btn:nth-of-type(2),
  .topbar.is-up .lang__btn:nth-of-type(2){ transition-delay:.08s; }
  .topbar.is-solid .lang__pill,
  .topbar.is-up .lang__pill{ opacity:0; transition:opacity .3s var(--e); }
  .topbar.is-solid .lang__track,
  .topbar.is-up .lang__track{
    opacity:0; transform:translateY(-9px) scaleX(.72);
    transition-delay:.2s; pointer-events:none;
  }
  .topbar .lang__track{ padding:3px; }
  .topbar .lang__btn{
    min-width:33px; min-height:30px; font-size:.86rem; border-radius:16px;
    opacity:.72; filter:grayscale(.25);
  }
  .topbar .lang__btn.is-on{ opacity:1; filter:none; }
  .burger{ width:42px; height:42px; }
  .burger span:nth-child(1){ top:17px; }
  .burger span:nth-child(2){ top:23px; }
}

/* ═══════════════════════ TELEFONO ═══════════════════════ */

@media (max-width:620px){
  /* La foto occupa poco più di metà schermo: così i pixel bastano a farla
     vedere nitida anche sui telefoni a tripla densità. */
  .hero__frame{ grid-template-rows:minmax(0, 53svh) auto; }
  .hero__media{ min-height:0; }
  .hero__lead{ display:none; }
  .hero__title{ margin-bottom:1.5rem; }
  .hero__inner{ margin-top:-1.6rem; }
  .strip{ grid-template-columns:1fr 1fr; }
  .strip figure:nth-child(even){ margin-top:0; }
  .strip figure:nth-child(even) img{ aspect-ratio:4/5; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gallery__it--wide{ grid-column:span 2; }
  .packgrid{ grid-template-columns:1fr 1fr; }
  .story__img--2{ width:38%; right:0; }
  .lettera__side{ left:0; width:36%; }
  .promessa__media{ min-height:300px; }
  .contatti__btns .btn{ flex:1 1 100%; }
}

@media (max-width:400px){
  .hero__trust{ font-size:.71rem; }
  .brand__word{ font-size:1.24rem; }
  /* schermi da 320px: bandiere un filo più piccole */
  .topbar .lang__btn{ min-width:28px; min-height:28px; font-size:.8rem; }
}

/* ═══════════════════════ MOVIMENTO RIDOTTO ═══════════════════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__eyebrow,.hero__title,.hero__lead,.hero__cta,.hero__trust,.hero__cue{ opacity:1 !important; transform:none !important; }
  .hero__img{ animation:none !important; transform:none !important; }
}

@media print{
  .topbar,.sheet,.hero__cue{ display:none !important; }
  body{ background:#fff; color:#000; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ═══════════════════════ A PARTE ═══════════════════════
   La Lettera Mai Scritta non è un pezzo della griglia: è qualcosa
   che si aggiunge a un pezzo. Quindi ha un aspetto tutto suo. */
.apart{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  display:grid; gap:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(217,113,143,.20), transparent 62%),
    linear-gradient(160deg, var(--plum), var(--plum-deep) 78%);
  border:1px solid rgba(255,201,219,.16);
  box-shadow:0 34px 70px -38px rgba(0,0,0,.9);
}
.apart__media{ overflow:hidden; }
.apart__media img{
  width:100%; height:100%; min-height:230px;
  object-fit:cover;
  transition:transform 1.3s var(--e);
}
.apart:hover .apart__media img{ transform:scale(1.05); }
.apart__text{
  padding:clamp(1.6rem, 5vw, 2.6rem);
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
}
.apart__name{
  font-family:'Bodoni Moda', serif; font-weight:400;
  font-size:clamp(1.7rem, 5.6vw, 2.4rem); line-height:1.1;
  margin:0 0 .7rem; color:#FFFFFF;
}
.apart__text p{ margin:0 0 1.2rem; color:rgba(245,237,230,.8); max-width:46ch; }

@media (min-width:700px){
  .apart{ grid-template-columns:.85fr 1.15fr; align-items:stretch; }
  .apart__media img{ min-height:100%; }
}

/* ═══════════════════════ MAPPA DELLE PAGINE ═══════════════════════ */
.more{ margin:clamp(2rem,5vh,3rem) 0 0; text-align:center; }
.mappa{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mappa__it{
  display:flex; flex-direction:column; text-decoration:none;
  transition:transform .6s var(--e);
}
.mappa__it:hover{ transform:translateY(-6px); }
.mappa__it img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.mappa__txt{ padding:1.3rem 1.3rem 1.5rem; display:block; }
.mappa__txt em{
  display:block; font-family:'Bodoni Moda', serif; font-style:normal; font-weight:400;
  font-size:1.4rem; color:#FFFFFF; margin-bottom:.5rem;
}
.mappa__it:hover .mappa__txt em{ color:var(--rose); }
.mappa__txt b{ display:block; font-weight:300; font-size:.95rem; line-height:1.6; color:var(--tx-mid); }
.mappa__cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem;
  font-style:normal; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose);
}
.mappa__cta svg{ width:15px; height:15px; transition:transform .55s var(--e); }
.mappa__it:hover .mappa__cta svg{ transform:translateX(5px); }

/* la voce del menu della pagina in cui ci si trova */
.sheet nav a.is-here{ color:var(--rose); }
.sheet nav a.is-here em{ color:var(--rose); opacity:1; }

/* Le pagine interne non hanno il hero: la prima sezione deve stare
   sotto la barra fissa, non incollata. */
html:not([data-pagina="home"]) main > .sec:first-child{
  padding-top:calc(var(--sec-y) + 3.5rem);
}

/* ═══════════════════════ HERO SU SCHERMO LARGO ═══════════════════════
   Niente testo sopra ai gioielli: la foto verticale prende la colonna
   sinistra, il testo sta a destra sul fondo scuro. Contrasto sempre pieno. */
@media (min-width: 900px) and (min-aspect-ratio: 125/100){
  .hero__frame{
    grid-template-rows:none;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    align-items:stretch;
  }
  .hero__media{ position:relative; inset:auto; z-index:0; min-height:0; height:100svh; }
  .hero__img{ transform-origin:50% 46%; object-position:center 44%; }
  .hero__veil{
    background:
      linear-gradient(to right, rgba(23,18,15,0) 62%, rgba(23,18,15,.75) 88%, var(--ink) 100%),
      linear-gradient(to bottom, rgba(23,18,15,.42) 0%, rgba(23,18,15,0) 26%);
  }
  .hero__inner{
    margin:0; justify-content:center; align-items:flex-start;
    text-align:left; padding:0 var(--pad); z-index:2;
  }
  .hero__title{ font-size:clamp(2.6rem, 4.2vw, 4rem); }
  .hero__lead{ display:block; max-width:38ch; margin-bottom:2rem; }
  .hero__trust{ justify-content:flex-start; }
  .hero__cue{ align-items:flex-start; }
  .hero__cta{ min-width:0; }
}