/* ═══════════════════════════════════════════════════════════
   INGROSSO FIOCCHI NASCITA — Mirca Martini
   Concept «DENTRO IL NASTRO» · 25/08/2026 (rifacimento grafico)
   Nessuna illustrazione: il prodotto è SEMPRE fotografia vera.
   Font serviti in locale. Zero CDN, zero cookie.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:"Prata";src:url("../font/prata-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../font/schibsted-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../font/schibsted-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../font/schibsted-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  /* fondi — nessuno dei tre crema già usati nelle ultime schede */
  --carta:#FBF4F5;        /* bianco con un velo di rosa */
  --scuro:#3B1220;        /* oxblood: sul nero il raso si spegne, qui si accende */
  --scuro-2:#2A0C17;
  --rosa:#C8385F;         /* lampone — per il testo, passa il contrasto */
  --azzurro:#3E6E93;
  --rosa-tenue:#EFC3CE;
  --inchiostro:#241018;
  --fumo:#7C6169;
  --bordo:#E7D6DB;

  --display:"Prata",Georgia,serif;
  --testo:"Schibsted",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --sp:clamp(1.15rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--testo);font-weight:400;
  font-size:clamp(1.02rem,.5vw + .94rem,1.14rem);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1.1rem;max-width:54ch}

.visuale-nascosta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.salta{position:absolute;left:-999px;top:0;z-index:100;background:var(--inchiostro);color:#fff;padding:.7rem 1.1rem}
.salta:focus{left:0}
:focus-visible{outline:2.5px solid var(--rosa);outline-offset:3px}

/* ── tipografia ────────────────────────────────────────── */
.display{font-family:var(--display);font-weight:400;line-height:1.03;letter-spacing:-.018em;margin:0}
.display--madre{font-size:clamp(2.6rem,8vw,6.4rem)}
.display--grande{font-size:clamp(2.1rem,5.6vw,4.2rem)}
.display--media{font-size:clamp(1.65rem,3.4vw,2.6rem)}
.occhio{
  font-family:var(--testo);font-weight:600;
  font-size:.71rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rosa);margin:0 0 1.1rem;
}
.occhio--chiaro{color:var(--rosa-tenue)}
.guida{font-size:clamp(1.06rem,.5vw + .98rem,1.26rem);line-height:1.5;color:var(--fumo);max-width:46ch}

/* ── bottone ───────────────────────────────────────────── */
.bottone{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--inchiostro);color:#fff;text-decoration:none;
  font-weight:600;font-size:.97rem;padding:1rem 1.7rem;border-radius:2px;
  transition:background-color .25s ease,transform .25s ease;
}
.bottone:hover{background:var(--rosa);transform:translateY(-2px)}
.bottone--chiaro{background:#fff;color:var(--inchiostro)}
.bottone--chiaro:hover{background:var(--rosa-tenue)}
.bottone--minimo{
  background:none;color:inherit;padding:.45rem 0;border-radius:0;
  border-bottom:1px solid currentColor;font-size:.86rem;
}
.bottone--minimo:hover{background:none;color:var(--rosa);transform:none}

/* ── testata ───────────────────────────────────────────── */
.testata{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--sp);color:#fff;
  transition:background-color .35s ease,color .35s ease,padding .35s ease;
}
.testata::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,12,23,.5),rgba(42,12,23,0));
  transition:opacity .35s ease;
}
.testata.posata::before{opacity:0}
.testata.posata{background:var(--carta);color:var(--inchiostro);padding:.72rem var(--sp);border-bottom:1px solid var(--bordo)}
.marchio{font-family:var(--display);font-size:1.08rem;text-decoration:none}

/* ── 1 · APERTURA — la firma: si parte DENTRO il nastro ── */
.apertura{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--scuro-2)}
.apertura__vetro{position:absolute;inset:0;overflow:hidden}
.apertura__foto{
  width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zoom,1.55));
  transform-origin:52% 46%;      /* il cuore della rosetta */
  will-change:transform;
}
.apertura__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,10,14,.38) 0%,rgba(20,10,14,.02) 28%,rgba(26,10,16,.46) 64%,rgba(30,10,18,.86) 100%);
}
.apertura__testo{
  position:absolute;inset:auto 0 0 0;
  padding:0 var(--sp) clamp(2.6rem,8vh,5.2rem);
  color:#fff;max-width:1320px;margin:0 auto;
  opacity:calc(1 - var(--via,0));
  transform:translate3d(0,calc(var(--via,0) * -26px),0);
  will-change:opacity,transform;
}
.apertura__testo .display{max-width:15ch}
.apertura__sotto{display:flex;flex-wrap:wrap;gap:1.3rem 2.4rem;align-items:center;margin-top:clamp(1.2rem,3vh,2rem)}
.apertura__sotto p{margin:0;color:rgba(255,255,255,.82);max-width:32ch}
.spia{
  position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* ── impaginato editoriale ─────────────────────────────── */
.fascia{padding:clamp(4rem,11vh,8rem) var(--sp)}
.fascia--scura{background:var(--scuro);color:#fff}
.fascia--scura .display,.fascia--scura b{color:#fff}
.fascia--scura .guida{color:rgba(255,255,255,.74)}
.dentro{max-width:1320px;margin:0 auto}
.due{display:grid;gap:clamp(1.5rem,4vw,4rem);grid-template-columns:1fr}
@media(min-width:900px){.due{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start}}
.numero{font-family:var(--display);font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;color:var(--rosa-tenue);display:block}
.fascia--scura .numero{color:rgba(255,255,255,.26)}

.dichiarazione .display{max-width:14ch}
.dichiarazione__coda{
  margin-top:clamp(1.4rem,4vh,2.4rem);padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:1.08rem;color:rgba(255,255,255,.8);max-width:42ch;
}

/* ── griglia foto ──────────────────────────────────────── */
.griglia{
  list-style:none;margin:clamp(1.8rem,5vh,2.8rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.9rem);
}
@media(min-width:820px){.griglia{grid-template-columns:repeat(3,1fr)}}
.griglia li{margin:0;position:relative;overflow:hidden;background:var(--bordo)}
.griglia img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;aspect-ratio:4/5;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.griglia li:hover img{transform:scale(1.05)}
.griglia__vuota{aspect-ratio:4/5;display:grid;place-items:center;background:#F3E7EA;border:1px solid var(--bordo)}
.griglia__vuota span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#C4A9B1}

.forme{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.forme li{border:1px solid var(--bordo);padding:.5rem 1rem;font-size:.93rem;background:#fff}

/* ── banda dei colori — non si ferma MAI ───────────────── */
.banda{overflow:hidden;background:var(--scuro);color:#fff;padding:1.05rem 0}
.banda__pista{display:flex;width:max-content;animation:scorri 46s linear infinite}
.banda__gruppo{display:flex;align-items:center;gap:.55rem;white-space:nowrap;font-family:var(--display);font-size:1.12rem;color:rgba(255,255,255,.9)}
.banda__gruppo i{display:inline-block;width:11px;height:11px;border-radius:99px;background:var(--c);margin-left:2.2rem}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── i passi ───────────────────────────────────────────── */
.passi{list-style:none;counter-reset:p;margin:clamp(1.8rem,5vh,2.8rem) 0 0;padding:0}
.passi li{
  counter-increment:p;display:grid;gap:.15rem 1.5rem;
  grid-template-columns:auto 1fr;align-items:baseline;
  padding:1.45rem 0;border-top:1px solid var(--bordo);
}
.passi li:last-child{border-bottom:1px solid var(--bordo)}
.passi li::before{content:"0" counter(p);font-family:var(--display);font-size:1.45rem;color:var(--rosa-tenue)}
.passi b{font-family:var(--display);font-weight:400;font-size:1.3rem;display:block}
.passi span{grid-column:2;color:var(--fumo);font-size:.97rem}

/* ── faq ───────────────────────────────────────────────── */
.faq{margin:clamp(1.8rem,5vh,2.8rem) 0 0}
.faq details{border-top:1px solid var(--bordo)}
.faq details:last-of-type{border-bottom:1px solid var(--bordo)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;font-size:1.06rem;position:relative;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:12px;height:1.5px;background:var(--rosa)}
.faq summary::before{content:"";position:absolute;right:5.6px;top:1.03rem;width:1.5px;height:12px;background:var(--rosa);transition:transform .3s ease}
.faq details[open] summary::before{transform:scaleY(0)}
.faq p{padding:0 0 1.25rem;color:var(--fumo);max-width:60ch}

/* ── chiusura e piede ──────────────────────────────────── */
.chiusura{background:var(--scuro);color:#fff;text-align:center;padding:clamp(4.5rem,12vh,8.5rem) var(--sp)}
.chiusura .display{margin-bottom:1.1rem}
.chiusura__nome{font-family:var(--display);font-size:1.18rem;color:rgba(255,255,255,.88);margin:0 auto 1.9rem}
.chiusura p{margin-inline:auto;color:rgba(255,255,255,.72)}
.piede{background:var(--scuro-2);color:rgba(255,255,255,.55);padding:2.3rem var(--sp);text-align:center;font-size:.84rem}
.piede p{max-width:none;margin:.3rem 0}
.piede a{color:rgba(255,255,255,.82)}

/* ── cookie, una riga ──────────────────────────────────── */
.cookie{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:flex;gap:1rem;align-items:center;justify-content:center;
  padding:.6rem 1rem;font-size:.8rem;background:#fff;border-top:1px solid var(--bordo);
}
.cookie p{margin:0;max-width:none}
.cookie a{text-decoration:underline;text-underline-offset:2px}
.cookie button{background:none;border:0;font-size:1.2rem;line-height:1;cursor:pointer;opacity:.55}
@media(max-width:480px){.cookie{font-size:.73rem;padding:.5rem .75rem}}

/* ── rivelo ────────────────────────────────────────────── */
[data-su]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
[data-su].vista{opacity:1;transform:none}
[data-righe] span{display:block;overflow:hidden}
[data-righe] span>i{display:block;font-style:normal;transform:translate3d(0,105%,0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .apertura__foto{transform:scale(1.05)}
  [data-su]{opacity:1;transform:none}
  [data-righe] span>i{transform:none}
  .banda__pista{animation:none}
}