@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}

:root {
  --bg: #f6f2eb; --bg2: #efe8dd; --surface: #fffdf9; --ink: #1a1e1c; --ink2: #3a3f3c; --mut: #6b645c;
  --line: #e3dbcf; --line2: #d3c8b8; --tortora: #cbbfae;
  --libera: #a64b32; --libera-ink: #7e3622; --libera-soft: #f5e4db; --libera-chiaro: #e9a58c;
  --piena: #0f7a6a; --piena-ink: #0a5a4e; --piena-soft: #dcefe9; --piena-chiaro: #3fb8a3; --giallo: #ffd166;
  --notte: #15201d; --notte2: #1f2c28; --notte-line: #31413b; --notte-mut: #a9b5ae;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 18px; --r-lg: 28px;
  --ombra: 0 1px 2px rgba(26, 30, 28, .05), 0 18px 40px -18px rgba(26, 30, 28, .22);
  --ombra-forte: 0 2px 4px rgba(26, 30, 28, .06), 0 40px 80px -30px rgba(26, 30, 28, .38);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: -.012em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; }
p { margin: 0; }
.libera-t { color: var(--libera); }
.piena-t { color: var(--piena); }
:focus-visible { outline: 2px solid var(--piena); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 12px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; }

.cont { width: min(1200px, 100% - 32px); margin-inline: auto; }
.cont-stretto { width: min(860px, 100% - 32px); margin-inline: auto; }
.sezione { padding: clamp(72px, 10vw, 128px) 0; scroll-margin-top: 72px; }
.sezione.tinta { background: var(--bg2); }
.occhiello {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
}
.occhiello::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.intro { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.intro.centro { margin-inline: auto; text-align: center; max-width: 820px; }
.intro.centro .occhiello::after { content: ""; width: 26px; height: 1px; background: currentColor; }
.intro p { margin-top: 20px; font-size: 1.12rem; color: var(--mut); }

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px;
  border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--ink);
  font: 700 .97rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .freccia { transition: transform .2s; }
.btn:hover .freccia { transform: translateX(3px); }
.btn-scuro { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-scuro:hover { background: #000; }
.btn-libera { background: var(--libera); border-color: var(--libera); color: #fff; }
.btn-libera:hover { background: var(--libera-ink); border-color: var(--libera-ink); }
.btn-piena { background: var(--piena); border-color: var(--piena); color: #fff; }
.btn-piena:hover { background: var(--piena-ink); border-color: var(--piena-ink); }
.btn-chiaro { background: #fff; border-color: #fff; color: var(--ink); }
.btn-chiaro:hover { background: var(--bg); border-color: var(--bg); }
.btn-piccolo { min-height: 42px; padding: 9px 18px; font-size: .9rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* etichette */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; background: var(--bg2); color: var(--ink2);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.libera { background: var(--libera-soft); color: var(--libera-ink); }
.chip.piena { background: var(--piena-soft); color: var(--piena-ink); }
.chip.nodot::before { display: none; }

/* testata */
.testata {
  position: sticky; top: 0; z-index: 30;
  background: rgba(246, 242, 235, .86); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.testata.scorsa { border-bottom-color: var(--line); }
.testata .cont { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.marchio img { width: 34px; height: 34px; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--ink2); transition: background .2s, color .2s; }
.menu a:hover { background: var(--bg2); color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); background: var(--bg2); }
.menu .btn { margin-left: 10px; color: #fff; padding: 9px 20px; }
.menu .btn:hover { background: #000; color: #fff; }
.apri-menu { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; cursor: pointer; }
.apri-menu span, .apri-menu span::before, .apri-menu span::after { display: block; width: 18px; height: 1.6px; background: var(--ink); margin: auto; position: relative; transition: transform .25s, background .25s; }
.apri-menu span::before, .apri-menu span::after { content: ""; position: absolute; left: 0; }
.apri-menu span::before { top: -6px; }
.apri-menu span::after { top: 6px; }
.apri-menu[aria-expanded="true"] span { background: transparent; }
.apri-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 920px) {
  .apri-menu { display: block; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 20px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .25); display: none;
  }
  .menu.aperto { display: flex; }
  .menu a { padding: 13px 14px; font-size: 1.05rem; }
  .menu .btn { margin: 10px 0 0; }
}

/* eroe home: le due porte */
.eroe { position: relative; overflow-x: hidden; overflow-x: clip; padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }
.eroe-intro { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; }
.eroe-intro .occhiello::after { content: ""; width: 26px; height: 1px; background: currentColor; }
.eroe h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); margin-bottom: 26px; }
.eroe h1 .riga { display: block; }
.eroe .sotto { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink2); max-width: 640px; margin-inline: auto; }
.eroe .sotto b { font-weight: 700; }
.porte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin-inline: auto; }
.porta {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--tinta); color: var(--ink); text-decoration: none; box-shadow: var(--ombra); transition: transform .25s, box-shadow .25s;
}
.porta::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; top: -170px; right: -120px; background: var(--alone); }
.porta > * { position: relative; }
.porta:hover { transform: translateY(-3px); box-shadow: var(--ombra-forte); }
.porta.libera { --tinta: var(--libera); --alone: var(--libera-soft); --scuro: var(--libera-ink); }
.porta.piena { --tinta: var(--piena); --alone: var(--piena-soft); --scuro: var(--piena-ink); }
.porta-testa { display: flex; align-items: center; gap: 14px; }
.porta-testa img { width: 48px; height: 48px; }
.porta-nome { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; }
.porta-nome small { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--mut); margin-top: 6px; }
.porta-cosa { color: var(--ink2); font-size: 1.05rem; }
.porta-cosa b { color: var(--ink); }
.porta-vai { margin-top: auto; display: inline-flex; gap: 8px; font-weight: 700; font-size: .95rem; color: var(--scuro); }
.porta-vai span { transition: transform .2s; }
.porta:hover .porta-vai span { transform: translateY(3px); }
.garanzie { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 0; color: var(--mut); font-size: .92rem; font-weight: 600; }
.garanzie li { display: inline-flex; align-items: center; gap: 8px; }
.garanzie svg { width: 18px; height: 18px; color: var(--piena); }
.eroe .garanzie { justify-content: center; margin-top: 36px; }
@media (max-width: 760px) { .porte { grid-template-columns: minmax(0, 1fr); } }

/* home: una fascia per prodotto */
.banda-libera { background: #f7ece5; overflow-x: hidden; overflow-x: clip; }
.banda-piena { background: #e7f2ee; overflow-x: hidden; overflow-x: clip; }
.banda-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.banda-griglia.inversa .banda-testo { order: 2; }
.banda-testo h2 { margin-bottom: 22px; }
.banda-sotto { font-size: 1.12rem; color: var(--ink2); margin-bottom: 30px; }
.banda-tit { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.formule-mini { list-style: none; margin: 0 0 34px; padding: 0; counter-reset: f; display: grid; gap: 10px; }
.formule-mini li {
  counter-increment: f; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px;
  padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: .95rem; color: var(--ink2);
}
.formule-mini li::before { content: "0" counter(f); grid-row: span 2; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--libera); }
.formule-mini b { display: block; color: var(--ink); }
.banda-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.etichetta-lato {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--ombra); font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.etichetta-lato i { width: 8px; height: 8px; border-radius: 50%; background: var(--libera); }
.etichetta-lato.verde i { background: var(--piena); }
.fluttua { position: absolute; z-index: 4; background: var(--surface); border-radius: 20px; box-shadow: var(--ombra-forte); }
.carta-qr { top: 150px; right: -14px; width: 128px; padding: 12px 12px 10px; text-align: center; transform: rotate(4deg); border: 1px solid var(--line); }
.carta-qr .qr { width: 100%; aspect-ratio: 1; color: var(--ink); }
.carta-qr b { display: block; margin-top: 8px; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; line-height: 1.1; }
.carta-qr small { font-size: .68rem; color: var(--mut); }
.carta-op { width: min(400px, 100%); padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ombra-forte); }
.carta-op .testa-op { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.carta-op .testa-op img { width: 30px; height: 30px; }
.carta-op .testa-op b { font-size: .95rem; }
.carta-op .testa-op .chip { margin-left: auto; font-size: .7rem; padding: 4px 9px; }
.pulsante-op { margin-bottom: 8px; padding: 14px 16px; border-radius: 14px; background: var(--piena); color: #fff; font-weight: 800; text-align: center; }
.carta-op .riga-op { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); font-size: .88rem; }
.carta-op .riga-op small { display: block; color: var(--mut); font-size: .78rem; }
.carta-op .ora { font-family: var(--serif); font-size: 1.5rem; line-height: 1; min-width: 58px; }
.carta-op .stato { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.carta-op .stato.no { background: #f3e1dc; color: var(--libera); }
.carta-op .stato.attesa { background: var(--bg2); color: var(--mut); }
.carta-op .stato.si { background: var(--piena); color: #fff; }
.carta-op .stato svg { width: 13px; height: 13px; }
.carta-op .nota-op { margin-top: 6px; font-size: .76rem; color: var(--mut); display: flex; align-items: center; gap: 6px; }
.carta-op .nota-op svg { width: 14px; height: 14px; }
@media (max-width: 1100px) { .carta-qr { display: none; } }
@media (max-width: 980px) {
  .banda-griglia { grid-template-columns: minmax(0, 1fr); }
  .banda-griglia.inversa .banda-testo { order: 0; }
}

/* home: in breve */
.confronto-wrap { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.confronto { width: 100%; border-collapse: collapse; font-size: .98rem; }
.confronto th, .confronto td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.confronto tbody tr:last-child > * { border-bottom: 0; }
.confronto thead th { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.confronto thead th img { display: inline-block; width: 28px; height: 28px; vertical-align: -6px; margin-right: 10px; }
.confronto .c-libera { color: var(--libera-ink); background: rgba(166, 75, 50, .07); }
.confronto .c-piena { color: var(--piena-ink); background: rgba(15, 122, 106, .08); }
.confronto tbody th { width: 28%; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.confronto tbody td:nth-of-type(1) { background: rgba(166, 75, 50, .03); }
.confronto tbody td:nth-of-type(2) { background: rgba(15, 122, 106, .035); }
@media (max-width: 640px) {
  .confronto tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confronto thead td { display: none; }
  .confronto tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; border-bottom: 0; }
  .confronto th, .confronto td { padding: 12px 14px; }
  .confronto thead th { font-size: 1.2rem; }
  .confronto thead th img { display: block; width: 24px; height: 24px; margin: 0 0 6px; }
}

/* telefono */
.telefono {
  width: 316px; max-width: 100%; border-radius: 48px; background: #121514; padding: 11px;
  box-shadow: var(--ombra-forte), inset 0 0 0 1.5px #3a403d;
}
.telefono .schermo { position: relative; border-radius: 38px; overflow: hidden; background: var(--surface); min-height: 600px; display: flex; flex-direction: column; }
.telefono .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #121514; z-index: 3; }
.telefono .barra-stato { display: flex; justify-content: space-between; padding: 12px 26px 0; font-size: .72rem; font-weight: 700; height: 40px; }
.telefono.grande { width: min(360px, 100%); }
.telefono.grande .schermo { min-height: 690px; }

/* widget di prenotazione dimostrativo */
.pren { display: flex; flex-direction: column; flex: 1; padding: 6px 18px 18px; font-size: .86rem; }
.pren-testa { display: flex; align-items: center; gap: 11px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pren-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--libera-soft); color: var(--libera-ink); font-family: var(--serif); font-size: 1.35rem; flex: none; }
.pren-testa b { display: block; font-size: .95rem; line-height: 1.2; }
.pren-testa small { color: var(--mut); font-size: .76rem; }
.pren-titolo { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 4px 0 8px; display: flex; justify-content: space-between; }
.pren-titolo span { letter-spacing: 0; text-transform: none; font-weight: 600; }
.pren-servizi { display: grid; gap: 6px; margin-bottom: 14px; }
.pren-servizio {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.pren-servizio:hover { border-color: var(--line2); }
.pren-servizio .pallino { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line2); flex: none; display: grid; place-items: center; }
.pren-servizio b { font-weight: 700; font-size: .84rem; }
.pren-servizio small { display: block; color: var(--mut); font-size: .72rem; }
.pren-servizio .prezzo { white-space: nowrap; margin-left: auto; font-weight: 700; font-size: .84rem; }
.pren-servizio[aria-pressed="true"] { border-color: var(--libera); background: var(--libera-soft); }
.pren-servizio[aria-pressed="true"] .pallino { border-color: var(--libera); background: var(--libera); box-shadow: inset 0 0 0 3px var(--libera-soft); }
.pren-operatori { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.pren-op { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .78rem/1 var(--sans); color: inherit; cursor: pointer; }
.pren-op[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pren-giorni { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; margin-bottom: 12px; }
.pren-giorno {
  padding: 8px 0 7px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; color: inherit; cursor: pointer; line-height: 1.1;
}
.pren-giorno small { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; color: var(--mut); letter-spacing: .04em; }
.pren-giorno b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.pren-giorno[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pren-giorno[aria-pressed="true"] small { color: #c9c4bc; }
.pren-ore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.pren-ora { padding: 9px 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 700 .8rem/1 var(--sans); color: inherit; cursor: pointer; }
.pren-ora:hover:not(:disabled) { border-color: var(--libera); }
.pren-ora:disabled { background: transparent; color: #b9b1a6; text-decoration: line-through; cursor: default; border-style: dashed; }
.pren-ora[aria-pressed="true"] { background: var(--libera); border-color: var(--libera); color: #fff; }
.pren-conferma { margin-top: auto; width: 100%; min-height: 46px; border-radius: 14px; border: 0; background: var(--ink); color: #fff; font: 700 .88rem/1.2 var(--sans); cursor: pointer; padding: 10px; }
.pren-conferma:disabled { background: var(--bg2); color: var(--mut); cursor: default; }
.pren-fatto { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 6px; gap: 10px; animation: entra .45s ease both; }
.pren-fatto .spunta { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--piena); color: #fff; margin-bottom: 6px; }
.pren-fatto .spunta svg { width: 30px; height: 30px; }
.pren-fatto h4 { margin: 0; font: 400 1.9rem/1.05 var(--serif); }
.pren-riep { width: 100%; margin: 8px 0; border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; text-align: left; background: #fff; }
.pren-riep div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .82rem; }
.pren-riep div:first-child { border-top: 0; }
.pren-riep span { color: var(--mut); }
.pren-fatto p { color: var(--mut); font-size: .8rem; }
.pren-fatto .di-nuovo { background: none; border: 0; font: 700 .82rem var(--sans); color: var(--libera); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* settori in fascia */
.fascia { border-block: 1px solid var(--line); padding: 26px 0; }
.fascia .cont { display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap; justify-content: center; }
.fascia p { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.fascia ul { display: flex; flex-wrap: wrap; gap: 10px 34px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.fascia li { font-family: var(--serif); font-size: 1.45rem; color: var(--ink2); }

/* spunte */
.spunte { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.spunte li { position: relative; padding-left: 32px; }
.spunte li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--tinta, var(--piena));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E");
}
.spunte li::after { content: ""; position: absolute; left: 6.5px; top: calc(.2em + 5px); width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* tre formule */
.formule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.formula { display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.formula:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.formula .num { font-family: var(--serif); font-size: 1rem; color: var(--mut); margin-bottom: 26px; display: flex; justify-content: space-between; align-items: center; }
.formula .icona { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--libera-soft); color: var(--libera); margin-bottom: 26px; }
.formula .icona svg { width: 34px; height: 34px; }
.formula h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin-bottom: 10px; }
.formula .ideale { color: var(--mut); font-size: .95rem; margin-bottom: 22px; }
.formula .spunte { --tinta: var(--libera); font-size: .94rem; margin-bottom: 28px; }
.formula .btn { margin-top: auto; }
.formula.scura { background: var(--notte); color: #fff; border-color: var(--notte); }
.formula.scura .num, .formula.scura .ideale { color: var(--notte-mut); }
.formula.scura .icona { background: #2a2622; color: var(--libera-chiaro); }
.formula.scura .spunte { --tinta: var(--libera-chiaro); }
.formula.scura .spunte li::after { border-color: var(--notte); }
.formula.scura .chip { background: var(--libera-chiaro); color: var(--notte); }
@media (max-width: 980px) { .formule { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* insieme: la giornata */
.scuro { background: var(--notte); color: #f1ede6; }
.scuro .occhiello, .scuro .intro p { color: var(--notte-mut); }
.insieme { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.insieme-testo { position: sticky; top: 110px; }
.insieme-testo h2 { margin-bottom: 24px; }
.insieme-testo p { color: var(--notte-mut); font-size: 1.08rem; margin-bottom: 18px; }
.insieme-testo .riquadro { margin-top: 30px; padding: 20px 22px; border: 1px solid var(--notte-line); border-radius: var(--r); font-size: .95rem; color: #d8d3cb; }
.insieme-testo .riquadro b { color: #fff; }
.giornata { list-style: none; margin: 0; padding: 0; position: relative; }
.giornata::before { content: ""; position: absolute; left: 86px; top: 14px; bottom: 14px; width: 1px; background: var(--notte-line); }
.giornata li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 34px; padding: 0 0 38px; }
.giornata li:last-child { padding-bottom: 0; }
.giornata time { font-family: var(--serif); font-size: 1.7rem; line-height: 1; text-align: right; color: #fff; padding-top: 2px; }
.giornata time small { display: block; font-family: var(--sans); font-size: .66rem; color: var(--notte-mut); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.giornata li::before { content: ""; position: absolute; left: 81px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--notte); border: 2px solid var(--punto, var(--notte-mut)); }
.giornata li.l { --punto: var(--libera-chiaro); }
.giornata li.p { --punto: var(--piena-chiaro); }
.giornata .evento { padding: 18px 22px; border-radius: var(--r); background: var(--notte2); border: 1px solid var(--notte-line); }
.giornata .evento p { color: #e3ded6; }
.giornata .evento .chip { margin-top: 12px; }
.scuro .chip.libera { background: rgba(233, 165, 140, .14); color: var(--libera-chiaro); }
.scuro .chip.piena { background: rgba(63, 184, 163, .14); color: var(--piena-chiaro); }
.scuro .chip.neutro { background: rgba(255, 255, 255, .07); color: var(--notte-mut); }
@media (max-width: 900px) {
  .insieme { grid-template-columns: 1fr; }
  .insieme-testo { position: static; }
  .giornata::before { left: 64px; }
  .giornata li { grid-template-columns: 52px 1fr; gap: 28px; }
  .giornata li::before { left: 59px; }
  .giornata time { font-size: 1.35rem; }
}

/* settori */
.settori { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); }
.settore { padding: 32px 30px 34px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); transition: background .25s; }
.settore:hover { background: var(--surface); }
.settore svg { width: 34px; height: 34px; color: var(--libera); margin-bottom: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.settore h3 { font-family: var(--serif); font-weight: 400; font-size: 1.65rem; margin-bottom: 8px; }
.settore p { color: var(--mut); font-size: .94rem; }
@media (max-width: 900px) { .settori { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .settori { grid-template-columns: 1fr; } }

/* passi */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.passi li { counter-increment: s; padding: 0 28px 0 0; position: relative; }
.passi li::before { content: "0" counter(s); display: block; font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--libera); margin-bottom: 18px; }
.passi li::after { content: ""; position: absolute; top: 26px; left: 76px; right: 24px; height: 1px; background: var(--line2); }
.passi li:last-child::after { display: none; }
.passi h3 { margin-bottom: 8px; }
.passi p { color: var(--mut); font-size: .95rem; }
@media (max-width: 900px) { .passi { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .passi li::after { display: none; } }
@media (max-width: 520px) { .passi { grid-template-columns: 1fr; } }

/* domande */
.domande { border-top: 1px solid var(--line2); }
.domande details { border-bottom: 1px solid var(--line2); }
.domande summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-weight: 700; font-size: 1.08rem; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; transition: transform .25s, background-color .25s; }
.domande details[open] summary::after { transform: rotate(45deg); background-color: var(--bg2); }
.domande details p { padding: 0 60px 26px 0; color: var(--ink2); }

/* chiusura */
.chiusura { text-align: center; }
.chiusura h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 900px; margin: 0 auto 36px; }
.chiusura .azioni { justify-content: center; }
.chiusura p { color: var(--mut); margin: -18px auto 34px; max-width: 560px; }

/* piede */
.piede { background: var(--notte); color: var(--notte-mut); padding: 72px 0 36px; font-size: .92rem; }
.piede-griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--notte-line); }
.piede .marchio { color: #fff; margin-bottom: 16px; }
.piede h4 { margin: 0 0 14px; color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.piede a { text-decoration: none; }
.piede a:hover { color: #fff; }
.piede-fondo { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: .82rem; }
.da-completare { color: #e9b26a; }
@media (max-width: 860px) { .piede-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .piede-griglia { grid-template-columns: 1fr; } }

/* pagine prodotto */
.eroe-prod { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); }
.eroe-prod .cont { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 96px); align-items: center; }
.eroe-prod h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 26px; }
.eroe-prod h1 em { display: block; }
.eroe-prod .sotto { font-size: 1.15rem; color: var(--ink2); max-width: 560px; margin-bottom: 34px; }
.marchio-prod { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.marchio-prod img { width: 44px; height: 44px; }
.marchio-prod b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.marchio-prod small { display: block; font-size: .78rem; color: var(--mut); font-weight: 600; }
.prova-come { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.schede { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg2); gap: 2px; flex-wrap: wrap; justify-content: center; }
.schede button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font: 700 .82rem/1 var(--sans); color: var(--mut); cursor: pointer; }
.schede button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.prova-come small { color: var(--mut); font-size: .8rem; }
@media (max-width: 900px) {
  .eroe-prod .cont { grid-template-columns: minmax(0, 1fr); }
}

.due-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pannello { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pannello h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin: 14px 0 22px; }
.pannello .spunte { margin: 0; }
.pannello.libera { --tinta: var(--libera); }
.pannello.piena { --tinta: var(--piena); }
@media (max-width: 860px) { .due-col { grid-template-columns: 1fr; } }
/* OraPiena: esempio della catena */
.catena { list-style: none; margin: 0; padding: 0; }
.catena li { position: relative; padding: 0 0 18px 30px; color: var(--ink2); font-size: .97rem; }
.catena li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 11px; height: 11px; border-radius: 50%; background: var(--punto, var(--tortora)); }
.catena li::after { content: ""; position: absolute; left: 9px; top: 1.35em; bottom: 0; width: 1.5px; background: var(--line2); }
.catena li:last-child { padding-bottom: 0; }
.catena li:last-child::after { display: none; }
.catena b { color: var(--ink); }
.catena .fine { font-weight: 800; color: var(--ink); }
.pannello:not(.piena) .catena .fine::before { background: var(--libera); }
.pannello.piena .catena { --punto: var(--piena); }
.due-col + .banda-tit { margin-top: 56px; }

.tabella-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); margin-top: 48px; }
.tabella { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.tabella th, .tabella td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.tabella th:first-child, .tabella td:first-child { text-align: left; }
.tabella thead th { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; vertical-align: bottom; }
.tabella thead th small { display: block; font-family: var(--sans); font-size: .72rem; color: var(--mut); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella .si, .tabella .no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.tabella .si { background: var(--libera-soft); color: var(--libera); }
.tabella .no { color: var(--tortora); }
.tabella svg { width: 13px; height: 13px; }
.tabella td.evid, .tabella th.evid { background: rgba(166, 75, 50, .045); }

.canali { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.canali span { padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 10px; }
.canali svg { width: 20px; height: 20px; color: var(--libera); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.regole { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.regole div { background: var(--surface); padding: 28px; }
.regole b { display: block; margin-bottom: 6px; }
.regole p { color: var(--mut); font-size: .93rem; }
@media (max-width: 860px) { .regole { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .regole { grid-template-columns: 1fr; } }

.abbina { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: var(--alone); }
.abbina.piena { --alone: var(--piena-soft); }
.abbina.libera { --alone: var(--libera-soft); }
.abbina img { width: 64px; height: 64px; }
.abbina h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin-bottom: 6px; }
.abbina p { color: var(--ink2); }
@media (max-width: 760px) { .abbina { grid-template-columns: 1fr; } }

/* OraPiena: telefono dell'app */
.op { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 16px; font-size: .82rem; flex: 1; background: #f6f5f2; }
.op-barra { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 6px; }
.op-barra b { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.op-barra img { width: 24px; height: 24px; }
.op-barra span { color: var(--mut); font-weight: 700; font-size: .76rem; }
.op-carta { background: #fff; border: 1px solid #e2e0d9; border-radius: 16px; padding: 12px 14px; }
.op-riga { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.op-carta small { color: var(--mut); font-size: .74rem; }
.op-chip { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #fff1cc; color: #8a5a00; }
.op-timer { font-weight: 800; color: var(--piena); font-variant-numeric: tabular-nums; }
.op-prog { height: 5px; border-radius: 3px; background: var(--piena-soft); margin: 9px 0; overflow: hidden; }
.op-prog i { display: block; height: 100%; width: 64%; background: var(--piena); border-radius: 3px; }
.op-msg { background: #e8f5ee; border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: .78rem; line-height: 1.45; color: #22302b; }
.op-bottoni { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; margin-top: 10px; }
.op-bottoni span { text-align: center; padding: 9px 0; border-radius: 10px; font-weight: 800; font-size: .78rem; }
.op-bottoni .si { background: var(--piena); color: #fff; }
.op-bottoni .no { background: #f3e1dc; color: var(--libera-ink); }
.op-coda span { display: block; padding: 7px 0; border-top: 1px solid #eeece6; font-size: .78rem; }
.op-coda span:first-of-type { border-top: 0; }
.op-conto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.op-conto div { background: var(--piena); color: #fff; border-radius: 14px; padding: 10px 12px; }
.op-conto b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.op-conto small { color: #cdeee6; font-size: .7rem; }
.op-pulsante { background: var(--ink); color: #fff; border-radius: 14px; text-align: center; padding: 12px; font-weight: 800; font-size: .84rem; }

.carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.carte li { padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.carte li b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin-bottom: 8px; }
.carte li p { color: var(--mut); font-size: .94rem; }
.carte .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--piena-soft); color: var(--piena-ink); font-weight: 800; font-size: .85rem; margin-bottom: 18px; }
@media (max-width: 900px) { .carte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .carte { grid-template-columns: 1fr; } }

/* contatti */
.contatti { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.contatti h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 24px; }
.contatti .sotto { color: var(--ink2); font-size: 1.12rem; margin-bottom: 36px; }
.recapiti { display: grid; gap: 14px; margin-bottom: 40px; }
.recapiti div { display: flex; gap: 14px; align-items: center; }
.recapiti .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); flex: none; }
.recapiti svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.recapiti small { display: block; color: var(--mut); font-size: .78rem; }
.recapiti b { font-weight: 700; }
.dopo { list-style: none; padding: 0; margin: 0; counter-reset: d; display: grid; gap: 16px; }
.dopo li { counter-increment: d; display: grid; grid-template-columns: 34px 1fr; gap: 14px; color: var(--ink2); font-size: .95rem; }
.dopo li::before { content: counter(d); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); font-weight: 800; font-size: .8rem; }
.modulo { padding: clamp(26px, 4vw, 44px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ombra); }
.modulo fieldset { border: 0; margin: 0 0 28px; padding: 0; }
.modulo legend { font-weight: 800; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; padding: 0; }
.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta span { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: center; align-content: center; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .93rem; line-height: 1.3; transition: border-color .15s, background .15s; }
.scelta span small { grid-column: 2; font-weight: 500; color: var(--mut); font-size: .78rem; }
.scelta span::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line2); background: #fff; }
.scelta input[type=radio] + span::before { border-radius: 50%; }
.scelta input:checked + span { border-color: var(--ink); background: var(--bg); }
.scelta input:checked + span::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.scelta input:focus-visible + span { outline: 2px solid var(--piena); outline-offset: 2px; }
.scelta.l input:checked + span { border-color: var(--libera); background: var(--libera-soft); }
.scelta.l input:checked + span::before { background: var(--libera); border-color: var(--libera); }
.scelta.p input:checked + span { border-color: var(--piena); background: var(--piena-soft); }
.scelta.p input:checked + span::before { background: var(--piena); border-color: var(--piena); }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 700; font-size: .86rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; font: 500 1rem/1.4 var(--sans); color: var(--ink);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 30, 28, .08); }
.invio { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.invio .btn { flex: 1 1 200px; }
.modulo .avviso { margin-top: 14px; font-size: .84rem; color: var(--mut); }
.modulo .avviso.errore { color: var(--libera-ink); font-weight: 600; }
@media (max-width: 900px) { .contatti { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .scelte, .campi { grid-template-columns: 1fr; } }

/* testo lungo */
.testo-lungo { max-width: 760px; }
.testo-lungo h1 { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 30px; }
.testo-lungo h2 { font-size: 1.9rem; margin: 40px 0 12px; }
.testo-lungo p, .testo-lungo li { color: var(--ink2); margin-bottom: 12px; }

/* comparsa allo scorrimento */
.js .svela { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rit, 0s); }
.js .svela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .svela { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}
.recapiti .da-completare { color: #9a5b00; }