/* Sunbox · sito brand
   Direzione: "Colour chapters" (tasteskill, seed 1127301717). Palette e font dal brand Sangria. */

@font-face {
  font-family: "Sunside";
  src: url("../assets/fonts/sunside.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- token ---------- */
:root {
  /* palette Sangria */
  --blu: #071FFA;
  --azzurro: #008EFE;
  --giallo: #FFDD76;
  --arancio: #FC9A01;
  --arancio-scuro: #FF5700;
  --rosa: #FF69D1;
  --rosa-chiaro: #FFB4E6;
  --crema: #F3EACE;
  --crema-2: #E8DCB8;
  --ink: #111111;
  --paper: #FFF8E8;

  --bg: var(--crema);
  --surface: var(--crema-2);
  --accent: var(--ink);
  --accent-ink: var(--crema);

  --font-display: "Sunside", "Outfit", system-ui, sans-serif;
  --font-text: "Outfit", system-ui, sans-serif;

  /* cinque gradini */
  --step-small: 0.9375rem;                                   /* 15px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);     /* 17–20px */
  --step-statement: clamp(1.5rem, 0.95rem + 1.5vw, 2.25rem);  /* 24–36px */
  --step-head: clamp(2.75rem, 0.9rem + 6vw, 7.5rem);         /* 44–120px */
  --step-display: clamp(5.5rem, 0.5rem + 12.5vw, 13rem);     /* 88–208px */

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --pad: clamp(4.5rem, 9vw, 9rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
a, button, label { -webkit-tap-highlight-color: rgba(17, 17, 17, 0.12); touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 10; padding: 0.75rem 1rem; background: var(--giallo); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
:target { scroll-margin-top: 1rem; }
::selection { background: var(--ink); color: var(--giallo); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .lidi :focus-visible, .footer :focus-visible { outline-color: var(--giallo); }
p { max-width: 62ch; text-wrap: pretty; }

.wrap { padding-inline: var(--margin); }
.small { font-size: var(--step-small); line-height: 1.45; }
.head { font-family: var(--font-display); font-weight: 400; font-size: var(--step-head); line-height: 0.92; letter-spacing: -0.01em; text-wrap: balance; }
.statement-size { font-family: var(--font-display); font-weight: 400; font-size: var(--step-statement); line-height: 0.95; }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.chapter { position: relative; min-height: 90svh; }

/* ---------- pulsanti: rettangolo pieno, angoli superiori a linguetta ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: 0 1.6rem;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button--tab { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); }
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--blu); color: var(--crema); } .hero .button:hover { background: var(--ink); color: var(--paper); } }

/* =========================================================
   HERO · titolo e distributore in cartellina
   ========================================================= */
.hero {
  position: relative;
  min-height: min(100svh, 62rem);
  background: var(--blu);
  color: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5rem; }
.hero__mark { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--font-display); font-size: var(--step-body); letter-spacing: 0.02em; }
.hero__mark img { width: 1.75rem; height: 1.75rem; }
.tabs { display: flex; align-items: flex-end; align-self: flex-end; gap: 0.35rem; margin-left: auto; }
.tab {
  display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1.4rem;
  background: var(--c); color: var(--ink);
  font-size: var(--step-small); font-weight: 600; text-decoration: none; white-space: nowrap;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  transition: transform var(--t-ui) var(--ease-out);
  transform: translateY(0.35rem);
}
@media (hover: hover) and (pointer: fine) { .tab:hover { transform: translateY(0); } }
.hero__cta { margin-left: 0.75rem; min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--step-small); background: var(--paper); color: var(--ink); }

.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: stretch;
  padding-bottom: var(--margin);
}
.hero__copy { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem 3rem; }
.hero__title { font-family: var(--font-display); font-weight: 400; font-size: min(var(--step-display), 11.6vw); line-height: 0.82; letter-spacing: -0.005em; margin-left: -0.04em; }
.hero__claim { margin-top: 1.5rem; font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; color: var(--giallo); }
.hero__lead { margin-top: 1.25rem; max-width: 40ch; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.button--light { background: var(--giallo); color: var(--ink); }
.hero__more { font-weight: 500; }

.hero__folder {
  grid-column: 7 / 13;
  position: relative;
  margin-top: 1rem;
  min-height: 26rem;
  background: var(--azzurro);
}
.hero__folder-tab {
  position: absolute; top: -2.6rem; left: 2rem;
  height: 2.6rem; padding: 0 1.6rem;
  display: inline-flex; align-items: center;
  background: var(--azzurro); color: var(--ink);
  font-size: var(--step-small); font-weight: 600;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
.hero__folder > img:first-of-type { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: cover; object-position: 8% 55%; }
.hero__sunny { position: absolute; left: -4.5rem; bottom: 1.5rem; width: clamp(6rem, 9vw, 9rem); height: auto; transform-origin: 50% 100%; }

/* =========================================================
   DIMENTICATO QUALCOSA? · il problema
   ========================================================= */
.forgot { background: var(--azzurro); color: var(--ink); padding-block: var(--pad); min-height: 0; }
.forgot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
.forgot__title { grid-column: 1 / 8; }
.forgot__stat { grid-column: 9 / 13; }
.forgot__num { font-family: var(--font-display); font-size: var(--step-display); line-height: 0.82; color: var(--paper); }
.forgot__stat-text { margin-top: 0.75rem; max-width: 28ch; font-weight: 600; }
.forgot__pic { grid-column: 1 / 8; position: relative; align-self: start; margin-top: 4rem; }
.forgot__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; position: relative; z-index: 1; }
.forgot__sunny { position: absolute; z-index: 0; right: 6%; top: 0; width: clamp(7rem, 11vw, 11rem); height: auto; transform: translateY(-62%); }
.forgot__side { grid-column: 9 / 13; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; margin-top: 4rem; }
.forgot__list { display: grid; gap: 1.75rem; }
.forgot__list li { max-width: 38ch; }
.forgot__list strong { display: block; font-size: var(--step-statement); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.forgot__answer { font-weight: 800; font-size: var(--step-statement); line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); max-width: 22ch; text-wrap: balance; }

/* =========================================================
   COME FUNZIONA · striscia a fumetti
   ========================================================= */
.how { background: var(--giallo); color: var(--ink); padding-block: var(--pad); min-height: 0; }
.how__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.how__head h2 { grid-column: 1 / 8; }
.how__head p { grid-column: 8 / 13; }
.strip { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr 1fr; margin-top: clamp(2.5rem, 5vw, 4rem); list-style: none; padding: 0; }
.strip__panel { background: var(--c); padding: 1.75rem 1.5rem 2rem; display: flex; flex-direction: column; min-height: 30rem; }
.strip__panel img { width: auto; height: 14rem; max-width: 100%; margin: 0 auto; object-fit: contain; }
.strip__panel:nth-child(2) img { transform: translateX(10%); }
.strip__panel h3 { margin-top: auto; padding-top: 1.5rem; min-height: calc(2.1em + 1.5rem); display: flex; align-items: flex-end; font-family: var(--font-text); font-weight: 800; font-size: var(--step-statement); line-height: 1.05; letter-spacing: -0.02em; }
.strip__panel p { margin-top: 0.6rem; max-width: 30ch; }


/* =========================================================
   IL DISTRIBUTORE · piatto quadrato
   ========================================================= */
.machine { background: var(--crema); color: var(--ink); min-height: 88svh; display: grid; grid-template-columns: 1fr 1fr; }
.machine__plate { display: grid; place-items: center; padding: 2.5rem; }
.machine__frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--crema-2); }
.machine__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms ease; }
.machine__frame img[data-variant="chiara"] { object-position: 50% 50%; }
.machine__frame img[data-variant="blu"] { object-position: 40% 50%; }
.machine__frame img[data-variant="arancio"] { object-position: 58% 50%; }
.machine__frame img.is-on { opacity: 1; }
.machine__side { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 2.5rem var(--margin) 2.5rem 1rem; }
.machine__tabs { display: flex; gap: 1.75rem; font-size: var(--step-body); }
.machine__tabs button { padding: 0.35rem 0; font-weight: 400; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; text-decoration-thickness: 0.12em; transition: text-decoration-color var(--t-hover) ease; }
.machine__tabs button[aria-selected="true"] { font-weight: 700; text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .machine__tabs button:hover { text-decoration-color: currentColor; } }
.machine__text h2 { margin-bottom: 1.5rem; font-size: clamp(2.5rem, 1rem + 3.4vw, 4.5rem); line-height: 0.9; }
.machine__text p { max-width: 42ch; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin: 2rem 0 0; }
.specs dt { font-weight: 700; }
.specs dd { margin: 0.15rem 0 0; font-size: var(--step-small); line-height: 1.45; max-width: 32ch; }
.machine__actions { display: grid; grid-template-columns: 1fr 1fr; }
.cell { display: flex; align-items: center; padding: 0 1.25rem; min-height: 4.5rem; font-weight: 600; text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cell:active { transform: scale(0.98); }
.cell--ink { background: var(--ink); color: var(--crema); }
.cell--tone { background: var(--crema-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .cell--ink:hover { background: var(--blu); }
  .cell--tone:hover { background: var(--giallo); }
}

/* =========================================================
   COSA TROVI DENTRO · indice + PUSH
   ========================================================= */
.inside { background: var(--arancio); color: var(--ink); padding-block: var(--pad); }
.inside__lead { margin-top: 1.5rem; max-width: 52ch; }
.inside__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.index { grid-column: 1 / 8; }
.index__row { transition: opacity var(--t-hover) ease; }
.index__btn { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; width: 100%; padding-block: 0.4rem; text-align: left; }
.index__name { font-weight: 700; font-size: var(--step-statement); line-height: 1.08; letter-spacing: -0.02em; }
.index__note { font-size: var(--step-small); text-align: right; flex-shrink: 0; white-space: nowrap; }
.index__thumb { display: none; }
.index__row.is-picked .index__name { text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
@media (hover: hover) and (pointer: fine) {
  .index:hover .index__row:not(:hover) { opacity: 0.35; }
}

.push { grid-column: 9 / 13; position: sticky; top: 1.5rem; }
.push__frame { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--crema); }
.push__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-ui) ease; }
.push__frame img.is-on { opacity: 1; }
.push__panel { display: grid; gap: 1rem; margin-top: 1rem; }
.push__button {
  width: 100%; min-height: 5.5rem;
  background: var(--ink); color: var(--arancio);
  font-family: var(--font-display); font-size: var(--step-statement); letter-spacing: 0.06em;
  transition: transform var(--t-press) var(--ease-out), color var(--t-hover) ease;
}
.push__button:active { transform: translateY(3px) scale(0.985); }
@media (hover: hover) and (pointer: fine) { .push__button:hover { color: var(--giallo); } }
.push__out { min-height: 3em; }

/* =========================================================
   PER I LIDI · fisarmonica
   ========================================================= */
.lidi { background: var(--blu); color: var(--paper); padding-block: var(--pad); }
.lidi__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.lidi__intro h2 { grid-column: 1 / 6; }
.lidi__copy { grid-column: 7 / 12; display: grid; gap: 1rem; }
.lidi__big { font-weight: 800; font-size: var(--step-statement); line-height: 1.1; letter-spacing: -0.02em; color: var(--giallo); }
.acc { display: flex; height: 32.5rem; margin-top: 4rem; }
.acc__panel { position: relative; flex: 1 1 0; min-width: 0; background: var(--c); color: var(--ink); overflow: hidden; transition: flex-grow 450ms var(--ease-in-out); }
.acc__panel.is-open { flex-grow: 5.6; }
.acc__toggle { position: absolute; inset: 0; width: 100%; text-align: left; }
.acc__toggle span {
  position: absolute; left: 1rem; bottom: 1.25rem;
  transform-origin: left bottom; transform: translateY(0) rotate(-90deg) translateY(100%);
  font-weight: 700; font-size: var(--step-body); line-height: 1.2; white-space: nowrap;
}
.acc__panel.is-open .acc__toggle { display: none; }
.acc__body { display: none; height: 100%; grid-template-columns: 1fr 1fr; }
.acc__panel.is-open .acc__body { display: grid; }
.acc__text { display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; }
.acc__text h3 { font-family: var(--font-text); font-weight: 800; font-size: var(--step-statement); line-height: 1; letter-spacing: -0.02em; }
.acc__text p { max-width: 36ch; }
.acc__body img { width: 100%; height: 100%; object-fit: cover; }
.acc__body img.acc__img--single { object-position: 30% 50%; }
@media (hover: hover) and (pointer: fine) {
  .acc__panel:not(.is-open):hover { filter: brightness(1.06); }
}

/* =========================================================
   SUNNY OVUNQUE · stampe sul titolo
   ========================================================= */
.prints { background: var(--rosa-chiaro); color: var(--blu); min-height: 100svh; overflow: hidden; display: grid; place-items: center; }
.prints__title { position: relative; z-index: 3; display: grid; justify-items: center; font-family: var(--font-display); font-weight: 400; font-size: var(--step-display); line-height: 0.85; text-align: center; }
.print {
  position: absolute; z-index: 2;
  padding: 8px; background: var(--crema);
  transition: transform 200ms var(--ease-out);
}
.print img { width: 100%; height: 100%; object-fit: cover; }
.print--a { width: 22vw; aspect-ratio: 3 / 4; left: 4%; top: 8%; rotate: -8deg; }
.print--a img { object-position: 72% 50%; }
.print--b { width: 22vw; aspect-ratio: 3 / 4; right: 5%; top: 6%; rotate: 6deg; }
.print--b img { object-position: 50% 50%; }
.print--c { width: 16vw; aspect-ratio: 3 / 4; right: 30%; bottom: -9vw; rotate: -3deg; }
.print--c img { object-position: 50% 40%; }
@media (hover: hover) and (pointer: fine) {
  .print:hover { z-index: 4; rotate: 0deg; }
}
.prints__note { position: absolute; left: var(--margin); bottom: 1.5rem; max-width: 40ch; color: var(--ink); font-size: var(--step-small); z-index: 1; }

/* =========================================================
   LA SQUADRA · tessere
   ========================================================= */
.team { background: var(--giallo); color: var(--ink); padding-block: var(--pad); }
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 0.75rem; margin-top: 2.5rem; }
.tile__pic { aspect-ratio: 4 / 5; background: var(--t); overflow: hidden; }
.tile__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; transition: transform 600ms var(--ease-out); }
.tile__name { margin-top: 0.75rem; font-weight: 700; font-size: var(--step-body); }
.tile__role { margin-top: 0.15rem; font-size: var(--step-small); line-height: 1.4; max-width: 30ch; }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__pic img { transform: scale(1.04); } }
.team__note { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 48ch; font-size: var(--step-body); }


/* =========================================================
   CONTATTACI · form
   ========================================================= */
.contact { background: var(--azzurro); color: var(--ink); padding-block: var(--pad); min-height: 0; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.contact__intro { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 1.5rem; }
.contact__intro p { max-width: 38ch; }
.next { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 1rem; max-width: 36ch; }
.next li { counter-increment: passo; position: relative; padding-left: 2.75rem; }
.next li::before { position: absolute; left: 0; top: -0.1em; content: counter(passo); font-family: var(--font-display); font-size: var(--step-statement); line-height: 1; color: var(--paper); }
.next strong { display: block; }
.contact__sunny { width: clamp(8rem, 12vw, 12rem); height: auto; margin-top: auto; }
.form { grid-column: 7 / 13; display: grid; gap: 1rem; align-content: start; }
.form__who { border: 0; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form__who legend { font-weight: 600; margin-bottom: 0.75rem; padding: 0; }
.form__who label { position: relative; cursor: pointer; }
.form__who input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.form__who span { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1.25rem; background: var(--paper); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.form__who input:checked + span { background: var(--ink); color: var(--paper); }
.form__who input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.35rem; font-size: var(--step-small); font-weight: 600; }
.field[hidden] { display: none; }
.field input, .field textarea {
  width: 100%; min-height: 3.1rem; padding: 0.7rem 0.9rem;
  background: var(--paper); color: var(--ink);
  border: 2px solid transparent; border-radius: 0;
  font: inherit; font-size: max(1rem, var(--step-body)); font-weight: 400;
  transition: border-color var(--t-hover) ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input::placeholder { color: #6b6455; }
.check { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: start; font-size: var(--step-small); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--ink); }
.check a { font-weight: 600; }
.form__send { justify-self: start; min-width: 10rem; margin-top: 0.5rem; }
.form__status { min-height: 1.5em; font-weight: 600; }
.contact__direct { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; font-size: var(--step-statement); letter-spacing: -0.02em; }
.contact__direct a { white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .contact__direct a:hover { text-decoration-color: currentColor; } }

/* =========================================================
   FOOTER · piccolo
   ========================================================= */
.footer { background: var(--blu); color: var(--paper); padding-block: 2rem; font-size: var(--step-small); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.footer__inner p { max-width: 90ch; }
.footer__mark { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--font-display); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 63.99em) {
  .tabs { display: none; }
  .hero__copy { grid-column: 1 / -1; padding-block: 1.5rem 1rem; }
  .hero__folder { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 10; margin-top: 4rem; }
  .hero__folder > img:first-of-type { object-position: 50% 55%; }
  .forgot__title, .forgot__stat, .forgot__pic, .forgot__side { grid-column: 1 / -1; }
  .forgot__pic, .forgot__side { margin-top: 1rem; }
  .how__head h2, .how__head p { grid-column: 1 / -1; }
  .how__head p { margin-top: 1.25rem; }
  .strip { grid-template-columns: 1fr 1fr; }
  .index { grid-column: 1 / -1; order: 2; margin-top: 2.5rem; }
  .push { grid-column: 1 / -1; order: 1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; }
  .push__panel { margin-top: 0; }
  .machine { grid-template-columns: 1fr; }
  .machine__plate { padding: 2rem var(--margin) 0; }
  .machine__frame { max-width: 40rem; }
  .machine__side { padding: 2rem var(--margin) 3rem; gap: 2rem; }
  .contact__intro, .form { grid-column: 1 / -1; }
  .contact__sunny { display: none; }
}

/* =========================================================
   TELEFONO
   ========================================================= */
@media (max-width: 47.99em) {
  .hero { min-height: 0; }
  .hero__bar { height: 4rem; }
  .hero__title { font-size: 22vw; }
  .hero__folder { margin-top: 3.5rem; aspect-ratio: 4 / 5; }
  .hero__folder > img:first-of-type { object-position: 12% 55%; }
  .hero__sunny { width: 5.5rem; left: auto; right: 0.5rem; bottom: auto; top: -5.2rem; }
  .hero__actions .button { width: 100%; }

  .forgot__pic { margin-top: 3.5rem; }
  .forgot__sunny { width: 6.5rem; }

  .strip { grid-template-columns: 1fr; }
  .strip__panel { min-height: 0; display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1rem; align-items: start; padding: 1.25rem 1rem; }
  .strip__panel img { grid-row: 1 / span 2; width: 6.5rem; height: auto; margin: 0; }
  .strip__panel:nth-child(2) img { transform: none; }
  .strip__panel h3 { margin-top: 0.25rem; padding-top: 0; min-height: 0; }

  .machine__plate { padding: 1rem var(--margin) 0; }
  .machine__side { padding: 1.5rem var(--margin) 2.5rem; }
  .machine__actions { grid-template-columns: 1fr; }
  .cell { min-height: 3.75rem; }
  .specs { grid-template-columns: 1fr; }

  .push { display: block; }
  .push__frame { aspect-ratio: 4 / 3; }
  .push__panel { margin-top: 1rem; }
  .index { margin-top: 2rem; }
  .index__btn { align-items: center; gap: 0.9rem; justify-content: flex-start; }
  .index__thumb { display: block; width: 3.75rem; height: 3.75rem; object-fit: cover; flex-shrink: 0; background: var(--crema); }
  .index__note { display: none; }

  .lidi__intro { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .lidi__intro h2, .lidi__copy { grid-column: 1 / -1; }
  .acc { flex-direction: column; height: auto; margin-top: 2.5rem; }
  .acc__panel, .acc__panel.is-open { flex: none; }
  .acc__toggle { position: static; display: block; height: 4rem; padding: 0 1rem; }
  .acc__toggle span { position: static; transform: none; line-height: 4rem; }
  .acc__body { grid-template-columns: 1fr; }
  .acc__text { padding: 1.25rem 1rem 1.5rem; gap: 1rem; }
  .acc__body img { aspect-ratio: 3 / 2; height: auto; }

  .prints { min-height: 78svh; }
  .prints__title { font-size: 17.5vw; }
  .print--a { width: 40vw; left: 4%; top: 6%; rotate: -6deg; }
  .print--b { width: 40vw; right: 4%; top: auto; bottom: 16%; rotate: 5deg; }
  .print--c { display: none; }
  .prints__note { right: var(--margin); }

  .team__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 0.5rem; }

  .form__row { grid-template-columns: 1fr; }
  .form__send { width: 100%; }
  .contact__direct { flex-direction: column; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   MOVIMENTO (i contenuti restano visibili senza JavaScript)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(22px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .tab { animation: tab-in 700ms var(--ease-out) backwards; }
  .js .tab:nth-child(2) { animation-delay: 80ms; }
  .js .tab:nth-child(3) { animation-delay: 160ms; }
  .js .tab:nth-child(4) { animation-delay: 240ms; }
  .js .hero__sunny { animation: sunny-in 900ms var(--ease-out) both 700ms, sunny-sway 4.5s ease-in-out 1.6s infinite alternate; }
  .js .hero__folder > img:first-of-type { animation: drift 16s ease-in-out infinite alternate; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .print[data-reveal] { transform: translateY(40px); }
  .js .print[data-reveal].is-in { transform: none; }
  .js .strip__panel.is-in img { animation: bob 3.2s ease-in-out infinite alternate; }
  .js .strip__panel:nth-child(2).is-in img { animation-delay: -0.8s; }
  .js .strip__panel:nth-child(3).is-in img { animation-delay: -1.6s; }
  .js .strip__panel:nth-child(4).is-in img { animation-delay: -2.4s; }

  .machine__frame img.is-on { animation: drift 14s ease-in-out infinite alternate; }
  .push__frame img.is-drop { animation: drop 520ms var(--ease-out); }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes tab-in { from { transform: translateY(100%); } }
@keyframes sunny-in { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes sunny-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes drop { from { transform: translateY(-18%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -8px; } }

/* =========================================================
   PAGINE SECONDARIE · privacy e 404
   ========================================================= */
.page { background: var(--crema); }
.page__bar { display: flex; justify-content: space-between; align-items: center; height: 5rem; background: var(--blu); color: var(--paper); }
.legal { padding-block: var(--pad); max-width: 52rem; }
.legal h1 { margin-bottom: 1.5rem; }
.legal__lead { font-size: var(--step-statement); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; max-width: 34ch; margin-bottom: 1rem; }
.legal h2 { margin-top: 2.5rem; margin-bottom: 0.5rem; font-family: var(--font-text); font-size: var(--step-body); font-weight: 800; }
.legal a { font-weight: 600; }
.legal__date { margin-top: 3rem; }
.page--404 { background: var(--blu); color: var(--paper); }
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 1.5rem; text-align: center; padding-block: 3rem; }
.lost__sunny { width: clamp(8rem, 16vw, 13rem); height: auto; }
.lost p { max-width: 36ch; }