/* ═══════════════════════════════════════════════════════════════════
   LA CHIOCCIOLA · LUMÉ — «UN ANNO, QUATTRO MINUTI»
   Concept in ../../CONCEPT.md · Scheletro 2 · La colonna e il perno
   Palette campionata col codice dal logo e dall'etichetta del cliente.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* colori — campionati con Pillow, non scelti a occhio */
  --crema:    #FCF9F0;   /* 62,3% dei pixel del logo */
  --crema-2:  #F6F1E4;
  --bruno:    #291304;   /* contorno del disegno e wordmark */
  --bruno-70: #291304b3;
  --bruno-45: #29130473;
  --guscio:   #D18737;   /* il guscio della chiocciola */
  --grano:    #F8D289;   /* le spighe */
  --oliva:    #A1A340;   /* la foglia */
  --bordeaux: #711212;   /* il nome LUMÉ sull'etichetta */

  --titolo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --testo:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rail: 34vw;              /* larghezza del perno su schermo grande */
  --gutter: clamp(20px, 5vw, 64px);
  --misura: 62ch;
}

/* ── reset essenziale ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--bruno);
  font-family: var(--testo);
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--titolo);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  font-variation-settings: 'opsz' 48;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 5.1rem); font-variation-settings: 'opsz' 72; }
h2 { font-size: clamp(1.85rem, 3.5vw, 3.05rem); }
h3 { font-size: clamp(1.18rem, 1.5vw, 1.45rem); font-family: var(--testo); font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 1.05em; max-width: var(--misura); }
p:last-child { margin-bottom: 0; }

/* i numeri sono il contenuto: si vedono */
.n {
  font-family: var(--titolo);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: 1.12em;
  color: var(--bordeaux);
}

/* ── intestazione ─────────────────────────────────────────────── */
.testa {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--crema) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bruno-45);
}
.testa__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.testa__logo img { width: 46px; height: auto; }
.testa__nome { font-family: var(--titolo); font-size: 1.16rem; line-height: 1.05; font-weight: 600; }
.testa__nome small { display: block; font-family: var(--testo); font-size: .59rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bordeaux); margin-top: 2px; }
.testa nav { display: flex; gap: clamp(10px, 1.6vw, 24px); font-size: .93rem; font-weight: 500; }
.testa nav a { text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.testa nav a:hover, .testa nav a:focus-visible { border-bottom-color: var(--guscio); }
@media (max-width: 720px) { .testa nav { display: none; } }

/* ── pulsanti ─────────────────────────────────────────────────── */
.btn {
  --bg: var(--bruno); --fg: var(--crema);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bg); border-radius: 999px;
  padding: .74em 1.5em; font-size: .97rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s, color .18s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--vuoto { --bg: transparent; --fg: var(--bruno); border-color: var(--bruno-45); }
.btn--vuoto:hover { --bg: var(--bruno); --fg: var(--crema); }
.btn--wa { --bg: var(--oliva); --fg: #14200a; border-color: var(--oliva); }
.btn--acquista { --bg: var(--bordeaux); --fg: var(--crema); border-color: var(--bordeaux); width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ── 🐚 IL PERNO: la spirale che si srotola ───────────────────── */
.perno {
  position: fixed; left: 0; top: 0; z-index: 5;
  width: var(--rail); height: 100vh;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.perno svg { width: min(86%, 400px); height: 78vh; overflow: visible; }
.perno__tracciato { fill: none; stroke: var(--guscio); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.perno__eco       { fill: none; stroke: var(--grano); stroke-width: 7; stroke-linecap: round; opacity: .55; }
.perno__testa { fill: var(--bruno); }
.perno__didascalia {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 5vh; width: 78%; text-align: center;
  font-size: .76rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--bruno-70);
}
.perno__didascalia b { color: var(--bordeaux); }

/* la spirale inline, per telefono e schermi stretti */
.spirale-mobile { display: block; margin: 8px auto 4px; width: min(88%, 420px); height: 190px; overflow: visible; }

@media (min-width: 1040px) {
  .perno { display: flex; }
  .spirale-mobile { display: none; }
  .impianto { margin-left: var(--rail); }
}

/* ── impaginazione generale ───────────────────────────────────── */
.impianto { position: relative; z-index: 10; }
.colonna { padding: 0 var(--gutter); }
.sez { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--bruno-45); }
.sez:first-child { border-top: 0; }
.sez__occhiello {
  font-size: .73rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bordeaux); margin: 0 0 1.1em;
}

/* ── apertura ─────────────────────────────────────────────────── */
.apertura { padding: clamp(28px, 5vw, 60px) var(--gutter) clamp(40px, 6vw, 80px); }
.apertura h1 { max-width: 15ch; }
.apertura__sotto { font-size: clamp(1.05rem, 1.5vw, 1.28rem); max-width: 46ch; color: var(--bruno-70); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
.apertura__fatti {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 46px);
  margin-top: clamp(32px, 5vw, 58px); padding-top: 26px;
  border-top: 1px solid var(--bruno-45);
}
.fatto { flex: 1 1 130px; }
.fatto b { display: block; font-family: var(--titolo); font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.fatto span { display: block; font-size: .82rem; letter-spacing: .06em; color: var(--bruno-70); margin-top: .45em; }

/* ── il titolo che si riempie — UNO SOLO in tutta la pagina ──── */
.riempi { color: var(--bruno-45); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .riempi { color: var(--bruno-45); background-image: linear-gradient(90deg, var(--bruno), var(--bruno));
      background-repeat: no-repeat; background-size: 0% 100%;
      -webkit-background-clip: text; background-clip: text;
      animation: riempimento linear both; animation-timeline: view(); animation-range: entry 22% cover 52%; }
    @keyframes riempimento { to { background-size: 100% 100%; } }
  }
}
@supports not (animation-timeline: view()) { .riempi { color: var(--bruno); } }

/* ── reveal guidato dallo scroll ──────────────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: entrata linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
    @keyframes entrata { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  }
}

/* ── due colonne affiancate ───────────────────────────────────── */
.duetto { display: grid; gap: clamp(20px, 3vw, 38px); grid-template-columns: 1fr; margin-top: 2em; }
@media (min-width: 620px) { .duetto { grid-template-columns: 1fr 1fr; } }
.carta {
  background: var(--crema-2); border: 1px solid var(--bruno-45); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.carta figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grano); }
.carta figure img { width: 100%; height: 100%; object-fit: cover; }
.carta__corpo { padding: clamp(16px, 2vw, 24px); }
.carta__corpo h3 { margin-bottom: .35em; }
.carta__corpo p { font-size: .95rem; color: var(--bruno-70); }

/* ── i prodotti: SEMPRE a griglia, 2 su telefono ─────────────── */
.griglia {
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.2em;
}
@media (min-width: 900px) { .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod {
  display: flex; flex-direction: column;
  background: var(--crema-2); border: 1px solid var(--bruno-45); border-radius: 16px; overflow: hidden;
}
.prod__foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--grano); }
.prod__foto img {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 0 0);
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.prod:hover .prod__foto img { transform: scale(1.035); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .prod__foto img { animation: taglio linear both; animation-timeline: view(); animation-range: entry 4% entry 58%; }
    @keyframes taglio { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  }
}
.prod__tag {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--crema); border: 1px solid var(--bruno-45); border-radius: 999px;
  padding: 3px 10px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.prod__tag--vivo  { background: var(--oliva); border-color: var(--oliva); color: #14200a; }
.prod__tag--presto{ background: var(--grano); border-color: var(--grano); }
.prod__attesa {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8%, var(--guscio) 8% 10%, transparent 10% 18%,
                    var(--guscio) 18% 20%, transparent 20% 30%, var(--guscio) 30% 32%,
                    transparent 32% 44%, var(--guscio) 44% 46%, transparent 46%),
    var(--grano);
  opacity: .9;
}
.prod__corpo { padding: clamp(12px, 1.4vw, 18px); display: flex; flex-direction: column; flex: 1; gap: .55em; }
.prod__nome { font-family: var(--titolo); font-size: clamp(1.02rem, 1.3vw, 1.24rem); font-weight: 600; line-height: 1.16; margin: 0; }
.prod__formato { font-size: .82rem; color: var(--bruno-70); margin: 0; }
.prod__prezzo { font-family: var(--titolo); font-size: 1.24rem; font-weight: 600; color: var(--bordeaux);
  font-variant-numeric: tabular-nums; margin: 0; }
.prod__prezzo small { font-family: var(--testo); font-size: .72rem; font-weight: 600; color: var(--bruno-70); letter-spacing: .04em; }
.prod__ricetta { font-size: .81rem; color: var(--bruno-70); margin: 0; }
.prod__ricetta a { color: var(--bordeaux); text-underline-offset: 3px; }
.prod__azione { margin-top: auto; padding-top: .5em; }

/* ── 🥄 lo strumento: «cosa ci faccio?» ──────────────────────── */
.strumento {
  background: var(--bruno); color: var(--crema);
  border-radius: 22px; padding: clamp(24px, 4vw, 52px); margin-top: 2.4em;
}
.strumento h2 { color: var(--crema); }
.strumento .sez__occhiello { color: var(--grano); }
.strumento p { color: #fcf9f0c4; }
.domanda { margin-top: 1.9em; }
.domanda__testo { font-family: var(--titolo); font-size: clamp(1.1rem, 1.7vw, 1.4rem); margin-bottom: .7em; color: var(--crema); }
.scelte { display: flex; flex-wrap: wrap; gap: 9px; }
.scelta {
  background: transparent; color: var(--crema);
  border: 1.5px solid #fcf9f05c; border-radius: 999px;
  padding: .62em 1.15em; font-size: .93rem; font-weight: 600; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.scelta:hover { border-color: var(--grano); }
.scelta[aria-pressed="true"] { background: var(--grano); border-color: var(--grano); color: var(--bruno); }
.risposta {
  margin-top: 2em; padding-top: 1.7em; border-top: 1px solid #fcf9f03d;
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 680px) { .risposta { grid-template-columns: 1.1fr 1fr; } }
.risposta[hidden] { display: none; }
.risposta__box { background: #fcf9f00f; border: 1px solid #fcf9f029; border-radius: 14px; padding: 18px; }
.risposta__box h3 { color: var(--grano); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .7em; }
.risposta__box strong { font-family: var(--titolo); font-size: 1.3rem; font-weight: 600; display: block; margin-bottom: .3em; color: var(--crema); }
.risposta__box p { font-size: .92rem; margin-bottom: 1em; }

/* ── domande frequenti ────────────────────────────────────────── */
.faq { margin-top: 2em; max-width: var(--misura); }
.faq details { border-top: 1px solid var(--bruno-45); }
.faq details:last-of-type { border-bottom: 1px solid var(--bruno-45); }
.faq summary {
  cursor: pointer; padding: 1.05em 2em 1.05em 0; position: relative; list-style: none;
  font-family: var(--titolo); font-size: clamp(1.05rem, 1.35vw, 1.24rem); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--guscio); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 1.2em; color: var(--bruno-70); font-size: .96rem; }

/* ── fascia immagine larga ────────────────────────────────────── */
.fascia { margin-top: 2.2em; border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--grano); }
.fascia img { width: 100%; height: 100%; object-fit: cover; }

/* ── carrello ─────────────────────────────────────────────────── */
.carrello-btn { position: relative; }
.carrello-btn__n {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  background: var(--bordeaux); color: var(--crema); border-radius: 999px;
  font-size: .7rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}
.carrello-btn__n[hidden] { display: none; }
.cassetto {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 100%); z-index: 100;
  background: var(--crema); border-left: 1px solid var(--bruno-45);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .32s cubic-bezier(.3,.9,.3,1);
}
.cassetto[data-aperto="1"] { transform: none; }
.cassetto__testa { display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--bruno-45); }
.cassetto__testa h2 { margin: 0; font-size: 1.4rem; }
.cassetto__chiudi { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.cassetto__lista { flex: 1; overflow-y: auto; padding: 14px var(--gutter); margin: 0; list-style: none; }
.cassetto__lista li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 13px 0; border-bottom: 1px solid var(--bruno-45); font-size: .93rem; }
.cassetto__lista b { font-weight: 600; }
.cassetto__lista span { color: var(--bruno-70); font-size: .84rem; grid-column: 1; }
.cassetto__via { background: none; border: 0; color: var(--bordeaux); cursor: pointer;
  font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; padding: 0; justify-self: start; }
.cassetto__piede { padding: 18px var(--gutter) 26px; border-top: 1px solid var(--bruno-45); }
.cassetto__nota { font-size: .8rem; color: var(--bruno-70); margin-top: .9em; }
.velo { position: fixed; inset: 0; background: #29130466; z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; }
.velo[data-aperto="1"] { opacity: 1; pointer-events: auto; }

/* ── piede ────────────────────────────────────────────────────── */
.piede {
  background: var(--bruno); color: #fcf9f0d1; margin-top: clamp(50px, 7vw, 90px);
  padding: clamp(40px, 6vw, 72px) var(--gutter) 28px; position: relative; z-index: 10;
}
.piede a { color: var(--grano); text-underline-offset: 3px; }
.piede__griglia { display: grid; gap: 30px; grid-template-columns: 1fr; max-width: 1100px; }
@media (min-width: 760px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede h3 { color: var(--crema); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1em; }
.piede p { font-size: .9rem; }
.piede ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.piede li { margin-bottom: .5em; }
.piede__firma {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #fcf9f029;
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
}

/* ── banner cookie: una riga sola ─────────────────────────────── */
.cookie {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 120;
  width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bruno); color: #fcf9f0d1; border-radius: 14px;
  padding: 11px 16px; font-size: .84rem;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 180px; }
@media (max-width: 560px) {
  .cookie { gap: 8px; padding: 9px 12px; font-size: .78rem; bottom: 10px; }
  .cookie p { flex: 1 1 140px; }
  .cookie button { padding: .38em .85em; font-size: .78rem; }
}
.cookie a { color: var(--grano); }
.cookie button { background: var(--grano); color: var(--bruno); border: 0; border-radius: 999px;
  padding: .45em 1.1em; font-weight: 700; font-size: .84rem; cursor: pointer; }

/* ── accessibilità ────────────────────────────────────────────── */
.salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bruno); color: var(--crema); padding: 12px 18px; border-radius: 0 0 10px 0;
}
.salta:focus { left: 0; }
:focus-visible { outline: 3px solid var(--guscio); outline-offset: 3px; border-radius: 4px; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── la velocità vince sempre sull'effetto ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── transizioni fra le pagine ────────────────────────────────── */
@view-transition { navigation: auto; }