/* COSO · stile comune del sito coso.it (prototipo). Light-first: circa 70% bianco, 30% giallo e nero.
   I font stanno in /assets/fonts.css. */

:root {
  --paper: #FFFFFF;
  --tile: #F4F2EC;
  --ink: #111111;
  --grey: #6B6B66;
  --soft: #8C8C86;
  --rule: #D6D6D0;
  --yellow: #FFEC00;
  --ok: #1F9D55;
  --sans: "Aeonik", "Helvetica Neue", Arial, sans-serif;
  --mono: "Aeonik Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: clamp(16px, 4vw, 64px);
  --max: 1360px;
  --r: 26px;
  --gap: clamp(10px, 1vw, 14px);
  --safe-t: env(safe-area-inset-top, 0px);
  --bar: calc(52px + var(--safe-t)); /* ridefinita sotto: zona dell'orologio + pillola */
  --ease: cubic-bezier(.6, 0, .2, 1);
  --out: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
[id] { scroll-margin-top: calc(var(--bar) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- tipografia ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.display { margin: 0; font-weight: 400; font-size: clamp(52px, 11vw, 180px); line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
.h2 { margin: 0; font-weight: 400; font-size: clamp(40px, 7vw, 112px); line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.h3 { margin: 0; font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.lead { margin: 0; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.012em; max-width: 40ch; }
.body { margin: 0; color: var(--grey); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 60ch; }
.note { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.todo { background: var(--tile); color: var(--grey); font-family: var(--mono); font-size: max(11px, .62em); letter-spacing: .08em; padding: .1em .4em; border-radius: 4px; vertical-align: .15em; white-space: nowrap; }
.mk { background: linear-gradient(var(--mk, var(--yellow)), var(--mk, var(--yellow))) 0 72% / 0% .9em no-repeat; color: var(--mk-ink, inherit); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .05em; transition: background-size .9s var(--ease); }
.mk.on { background-size: 100% .9em; }

/* ---------- superfici ---------- */
.s-yellow { background: var(--yellow); color: var(--ink); --mk: var(--paper); --mk-ink: var(--ink); }
.s-black { background: var(--ink); color: var(--paper); --mk: var(--yellow); --mk-ink: var(--ink); }
.s-black .eyebrow, .s-black .note { color: rgba(255, 255, 255, .55); }
.s-black .body { color: rgba(255, 255, 255, .7); }
.s-yellow .eyebrow, .s-yellow .note { color: rgba(17, 17, 17, .6); }
.s-yellow .body { color: rgba(17, 17, 17, .72); }
.s-tile { background: var(--tile); }
.sec { padding-block: clamp(64px, 10vw, 150px); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(26px, 4vw, 48px); }

/* ---------- comparse ---------- */
.pre { opacity: 0; transform: translateY(28px); }
.in { opacity: 1; transform: none; transition: opacity 1s var(--out), transform 1.1s var(--out); transition-delay: calc(var(--d, 0) * 90ms); }

/* ---------- bottoni ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; border: 1.5px solid var(--ink); background: transparent; border-radius: 999px; padding: 12px 20px; cursor: pointer; font-size: 15px; text-decoration: none; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s; }
.btn.primary { background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .btn.primary:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
  .s-yellow .btn.primary:hover { background: var(--paper); border-color: var(--paper); }
}
.s-black .btn { border-color: var(--paper); color: var(--paper); }
.s-black .btn.primary { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
@media (hover: hover) { .s-black .btn.primary:hover { background: var(--paper); border-color: var(--paper); } }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 8px 15px; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
@media (hover: hover) { .pill:hover { background: var(--yellow); color: var(--ink); } }
.plus { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color .2s, color .2s, transform .4s var(--ease); }
@media (hover: hover) { .plus:hover { background: var(--yellow); color: var(--ink); transform: rotate(90deg); } }
.s-black .plus { background: var(--paper); color: var(--ink); }
.chip { border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 9px 15px; font-size: 14px; color: var(--grey); cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, background-color .2s; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); color: var(--ink); } }
.chip.on { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); }

/* ---------- barra: pillola flottante ---------- */
:root { --pill-h: 52px; --pill-top: calc(var(--safe-t) + 10px); --bar: calc(var(--pill-top) + var(--pill-h) + 10px); }
@media (max-width: 820px) { :root { --pill-h: 50px; --pill-top: calc(var(--safe-t) + 8px); } }
.bar { position: fixed; z-index: 30; top: var(--pill-top); left: max(12px, calc((100vw - var(--max)) / 2 + var(--gut) - 10px)); right: max(12px, calc((100vw - var(--max)) / 2 + var(--gut) - 10px)); height: var(--pill-h); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--paper) 76%, transparent); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border: 1px solid rgba(17, 17, 17, .09); transition: background-color .5s, border-color .5s, color .5s; }
.bar .wrap { max-width: none; height: 100%; display: flex; align-items: center; gap: 22px; padding-inline: 22px 7px; }
.bar .logo { width: 70px; height: auto; display: block; transition: filter .5s; }
.bar nav { display: flex; gap: 22px; margin-left: auto; font-size: 13px; }
.bar nav a { text-decoration: none; opacity: .78; }
.bar nav a:hover, .bar nav a[aria-current="page"] { opacity: 1; }
.bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.bar .pill { height: calc(var(--pill-h) - 14px); display: inline-flex; align-items: center; padding: 0 17px; }
.bar.on-yellow { background: color-mix(in srgb, var(--paper) 82%, transparent); border-color: rgba(17, 17, 17, .1); }
.bar.on-black { background: color-mix(in srgb, #2A2A27 72%, transparent); border-color: rgba(255, 255, 255, .14); color: var(--paper); }
.bar.on-black .logo { filter: invert(1); }
.bar.on-black .pill { background: var(--yellow); color: var(--ink); }
.bar.on-black .burger i { background: var(--paper); }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; margin-left: auto; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease), background-color .5s; }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.menu-open .burger i:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 21.5px; transform: rotate(-45deg); }
@media (max-width: 820px) { .bar nav, .bar .pill { display: none; } .burger { display: block; } .bar .wrap { padding-inline: 20px 3px; } }
.menu { position: fixed; inset: 0; z-index: 25; background: var(--paper); color: var(--ink); padding: calc(var(--bar) + 26px) var(--gut) calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 4px; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
.menu a { text-decoration: none; font-size: clamp(34px, 9vw, 56px); letter-spacing: -.04em; line-height: 1.15; opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .5s var(--out); }
.menu .label { margin-top: auto; color: var(--soft); }
.menu .menu-cta { margin-top: 18px; align-self: flex-start; font-size: 17px; padding: 15px 24px; }
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .35s; }
.menu-open .menu a { opacity: 1; transform: none; transition-delay: calc(var(--d) * 45ms + 80ms); }
.menu-open .bar { background: var(--tile); border-color: rgba(17, 17, 17, .06); color: var(--ink); }
.menu-open .bar .logo { filter: none; }
.menu-open .bar .burger i { background: var(--ink); }
/* la pillola galleggia: la prima sezione sale fino al bordo e lascia lo spazio con un bordo trasparente (lo sfondo ci passa sotto) */
.menu + main > :is(section, div, header):first-child { border-top: var(--bar) solid transparent; }
.menu + main.sec { padding-top: calc(var(--bar) + clamp(30px, 6vw, 70px)); }


/* ---------- galleria orizzontale con puntini (data-gal) ---------- */
.gal { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); scroll-padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); overscroll-behavior-x: contain; }
.gal::-webkit-scrollbar { display: none; }
.gal > * { scroll-snap-align: start; flex: none; }
.gal-ctl { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
.dots { display: flex; gap: 10px; background: var(--tile); border-radius: 999px; padding: 14px 18px; }
.dot { position: relative; width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--soft); cursor: pointer; overflow: hidden; transition: width .5s var(--ease), background-color .3s; }
.dot.on { width: 44px; background: var(--rule); }
.dot.on::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tile); cursor: pointer; display: grid; place-items: center; }
.play svg { width: 14px; height: 14px; fill: var(--ink); }

/* ---------- interruttore a pillole (data-seg) ---------- */
.seg { position: relative; display: inline-flex; background: var(--tile); border-radius: 999px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 11px clamp(14px, 2.4vw, 26px); border-radius: 999px; cursor: pointer; font-size: 15px; transition: color .3s; white-space: nowrap; }
.seg button.on { color: var(--paper); }
.seg .ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--out), width .5s var(--out); }
.swap { animation: swap .6s var(--out); }
@keyframes swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- riquadri bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 17vw, 270px); grid-auto-flow: dense; gap: var(--gap); }
@media (max-width: 820px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 46vw, 250px); } }
.tile { position: relative; overflow: hidden; border-radius: var(--r); background: var(--tile); padding: clamp(16px, 1.8vw, 26px); display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: transform .5s var(--out); }
@media (hover: hover) { .tile:hover { transform: scale(1.012); } }
.tile.w { grid-column: span 2; } .tile.t { grid-row: span 2; } .tile.l { grid-column: span 2; grid-row: span 2; } .tile.f { grid-column: 1 / -1; }
.tile.yellow { background: var(--yellow); }
.tile.black { background: var(--ink); color: var(--paper); }
.tile .label { color: var(--grey); }
.tile.black .label { color: rgba(255, 255, 255, .62); }
.tile h3 { margin: 0; font-weight: 400; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(21px, 2.3vw, 36px); text-wrap: balance; }
.tile p { margin: 0; color: var(--grey); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.38; }
.tile.black p { color: rgba(255, 255, 255, .7); }
.tile .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }

/* ---------- numeri (data-to) ---------- */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid currentColor; }
@media (max-width: 820px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.num { padding: 22px 16px 26px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.num b { font-weight: 400; font-size: clamp(64px, 9vw, 150px); letter-spacing: -.07em; line-height: .85; font-variant-numeric: tabular-nums; }
.num span { color: var(--grey); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.35; max-width: 22ch; }

/* ---------- righe (elenchi numerati, faq) ---------- */
.rows { border-top: 1.5px solid currentColor; }
.row { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.row .label { color: var(--soft); padding-top: 6px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .row .label { padding-top: 0; } }
details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-size: clamp(19px, 2vw, 28px); letter-spacing: -.02em; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 20px; transition: transform .4s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .a { padding: 0 0 22px; color: var(--grey); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 62ch; }

/* ---------- chiusura nera e piede ---------- */
.close { padding-block: clamp(70px, 11vw, 170px); display: grid; gap: 26px; }
.close h2 { margin: 0; font-weight: 400; font-size: clamp(46px, 9vw, 150px); line-height: 1.04; letter-spacing: -.055em; }
/* evidenziatore a fascia: alto quanto la riga, così due righe gialle non si sovrappongono */
.close h2 .w { color: var(--ink); background: linear-gradient(var(--yellow), var(--yellow)) 0 58% / 100% 1.04em no-repeat; padding: 0 .07em; margin: 0 -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nl { display: flex; gap: 6px; background: var(--paper); border-radius: 999px; padding: 5px 5px 5px 18px; width: min(100%, 460px); border: 1px solid var(--rule); }
.nl input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.nl button { border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 14px; cursor: pointer; }
footer.site { padding-block: clamp(48px, 7vw, 90px) 28px; }
.dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
@media (max-width: 820px) { .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dir div { display: grid; gap: 9px; align-content: start; }
.dir .label { color: var(--soft); margin-bottom: 4px; }
.dir a { text-decoration: none; font-size: 14px; }
.dir a:hover { text-decoration: underline; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 16px; color: var(--soft); font-size: 12px; }
.giant { display: block; width: 100%; height: auto; margin-top: clamp(30px, 5vw, 60px); }

/* ---------- foglio dal basso (data-open) ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(17, 17, 17, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 41; width: min(760px, 100%); max-height: 88svh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 30px 30px 0 0; padding: 14px clamp(20px, 4vw, 44px) calc(36px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 100%); transition: transform .6s var(--out); display: grid; gap: 16px; }
.sheet::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 5px; background: var(--rule); }
.sheet.open { transform: translate(-50%, 0); }
.sheet-bg.open { opacity: 1; }
.sheet .x { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tile); font-size: 18px; cursor: pointer; }
.sheet h2 { margin: 0; font-weight: 400; font-size: clamp(32px, 5vw, 60px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; padding-right: 40px; }
.sheet p { margin: 0; color: var(--grey); font-size: 17px; line-height: 1.5; max-width: 60ch; }
.sheet ul { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.sheet li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 17px; display: grid; grid-template-columns: 2.4em 1fr; }
.sheet li b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .1em; color: var(--soft); padding-top: 4px; }

/* ---------- cursore (solo mouse) ---------- */
html.has-cur, html.has-cur * { cursor: none !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--paper); display: none; place-items: center; transition: width .35s var(--out), height .35s var(--out), margin .35s var(--out), background-color .3s; }
html.has-cur .cur { display: grid; }
.cur span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cur.big span { opacity: 1; }
.cur.mid { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--yellow); }
.cur.text { width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 2px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- telefono: pollice, tocco, ritmo ---------- */
.dot::before { content: ""; position: absolute; inset: -14px -6px; }
.dot { overflow: visible; }
.dot.on::after { border-radius: 999px; }
@media (hover: none) {
  .btn, .pill, .plus, .chip, .play, .seg button, .tile, .dot { transition-property: transform, background-color, color, border-color, width; }
  .btn:active, .pill:active, .chip:active, .play:active, .seg button:active { transform: scale(.96); }
  .plus:active { transform: scale(.9); }
  .tile:active { transform: scale(.985); }
}
@media (max-width: 820px) {
  :root { --r: 22px; }
  .bar .wrap > a:first-child { padding-block: 12px; margin-block: -12px; }
  .plus { width: 42px; height: 42px; }
  .btn { padding: 14px 22px; font-size: 16px; }
  .chip { padding: 11px 16px; }
  .play { width: 48px; height: 48px; }
  .seg button { padding: 12px 18px; }
  .sec { padding-block: clamp(56px, 16vw, 96px); }
  .label { font-size: 11px; }
  .menu a { padding-block: 2px; }
  details.faq summary { padding: 18px 0; min-height: 56px; }
  .sheet { max-height: 92svh; border-radius: 26px 26px 0 0; }
}
@media (max-width: 380px) {
  :root { --gut: 14px; }
  .display { font-size: clamp(44px, 14vw, 64px); }
  .close h2 { font-size: clamp(40px, 13vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .pre { opacity: 1; transform: none; }
  .mk, .sheet, .sheet-bg, .tile, .menu a, .seg .ind { transition: none !important; }
  .swap { animation: none; }
}