/*
Theme Name: Appuntoh
Theme URI: https://www.appuntoh.it
Description: Tema one-page "Scrivania" per il brand Appuntoh – appunti già pronti. Costruito sul kit grafico dei libri (assets/css/book.css + assets/js/book.js): riquadri a fascia, bordi a mano, pagine ed estratti veri, fasce a tutta larghezza con tagli irregolari.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: appuntoh
*/

/* Hallmark · macrostructure: custom "Scrivania" + fasce polverose · tone: quaderno · anchor hue: inchiostro del libro + evidenziatore */

:root {
	--edge-h: 54px;
	/* fasce: tinte del libro molto desaturate, stessa luminosità → nessun contrasto che abbaglia */
	--desk-bg: #f2ede5;
	--b-burro: #e8dcca;
	--b-cipria: #f4e5e0;
	--b-polvere: #e4eaef;
	--b-pagina: #fffdf8;
	--b-ink: #463d37;
	--lilla-s: #8a6bb8;
}

/* ---------- barra: striscia gialla sospesa ---------- */
.minibar { position: fixed; top: 10px; left: 0; right: 0; z-index: 30; pointer-events: none; transform: translateY(-140%); transition: transform 380ms var(--ease-out); }
.minibar.is-on { transform: none; }
.minibar-strip { pointer-events: auto; position: relative; width: min(980px, 100% - 24px); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
	padding: 8px 10px 8px 18px; background: var(--giallo); border-radius: 14px; transform: rotate(-.4deg); box-shadow: 0 10px 24px -14px rgba(74, 64, 57, .55); }
.minibar-strip::before { content: ""; position: absolute; inset: 0; border: 1.8px solid var(--ink); border-radius: 14px; --wob: 1; pointer-events: none; }
.minibar-strip .tape { top: -12px; left: -18px; width: 56px; transform: rotate(-24deg); }
.mb-logo img { height: 40px; width: auto; }
.mb-slogan { text-align: center; font: 700 1.6rem/1 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-slogan mark { --c: var(--rosa); }
.minibar .btn6 { font-size: 1.05rem; padding: .6em 1.05em .48em; }

/* ---------- 1 · scrivania piena ---------- */
.desk { position: relative; min-height: 100svh; overflow: clip; display: grid; place-items: center; padding: 70px 16px;
	background-color: var(--desk-bg);
	background-image: linear-gradient(rgba(74, 64, 57, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 64, 57, .055) 1px, transparent 1px);
	background-size: 26px 26px; }
.sheet { position: absolute; left: var(--x); top: var(--y); width: clamp(150px, 19vw, 300px); z-index: 1;
	transform: translate(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px)); transition: transform 700ms var(--ease-out); }
.sheet .pg { transform: rotate(var(--r)); }
.sheet .tape { top: -10px; left: 30%; }
.sheet img { animation: apt-land-r 650ms var(--ease-out) both; animation-delay: var(--delay); box-shadow: 0 1px 0 rgba(74, 64, 57, .08), 0 14px 30px -18px rgba(74, 64, 57, .55); }
@keyframes apt-land { from { opacity: 0; transform: translateY(26px) scale(.95); } }
@keyframes apt-land-r { from { opacity: 0; transform: translateY(26px) rotate(var(--r)) scale(.95); } }

.postit { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 190px; padding: 18px 16px 16px; margin: 0;
	font: 400 1.5rem/1.15 var(--f-body); transform: rotate(var(--r)); background: var(--pc);
	background-image: linear-gradient(225deg, rgba(0, 0, 0, .06) 0 14px, transparent 14px);
	box-shadow: 0 12px 18px -14px rgba(74, 64, 57, .6); animation: apt-land 650ms var(--ease-out) both; animation-delay: .9s; }
.postit b { font-family: var(--f-title); }
.postit--giallo { --pc: var(--giallo); } .postit--rosa { --pc: var(--rosa); } .postit--verde { --pc: var(--verde); } .postit--azzurro { --pc: var(--azzurro); }

.label { position: relative; z-index: 10; isolation: isolate; text-align: center; padding: 24px 20px; max-width: 680px; width: 100%; }
/* niente cartoncino: una radura sfumata del colore della scrivania, così il testo si legge sopra le pagine */
.label::before { content: ""; position: absolute; inset: -70px -150px; z-index: -1; border-radius: 50%;
	background: radial-gradient(closest-side, var(--desk-bg) 0 64%, color-mix(in srgb, var(--desk-bg) 80%, transparent) 78%, transparent 100%); }
.desk-logo { display: block; width: min(500px, 76vw); height: auto; margin: 0 auto 12px; overflow: visible; }
.desk-line { font: 700 clamp(1.8rem, 3.6vw, 2.5rem)/1.1 var(--f-body); }
.desk-line mark { background-size: 0% 100%; background-repeat: no-repeat; animation: apt-hl 700ms var(--ease-out) 2s forwards; }
@keyframes apt-hl { to { background-size: 100% 100%; } }
.desk-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; animation: apt-fade 500ms var(--ease-out) 2.2s both; }
.label .margin-note { position: absolute; right: -26px; bottom: -34px; }

/* il logo si disegna: contorno → lettere → h e sorriso → pallino */
.lg-out { stroke: #4a4039; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
	animation: apt-draw 1.1s var(--ease-out) .3s forwards, apt-fill .35s ease 1.25s forwards; }
.lg-white { opacity: 0; animation: apt-fade .35s ease 1.3s forwards; }
.lg-peach { transform-box: fill-box; transform-origin: center; transform: scale(.2); opacity: 0; animation: apt-pop .5s cubic-bezier(.3, 1.5, .5, 1) 1.5s forwards; }
.lg-dot { transform-box: fill-box; transform-origin: center; transform: translateY(-90px); opacity: 0; animation: apt-drop .6s cubic-bezier(.3, 1.4, .5, 1) 1.75s forwards; }
@keyframes apt-draw { to { stroke-dashoffset: 0; } }
@keyframes apt-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes apt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apt-pop { to { transform: scale(1); opacity: 1; } }
@keyframes apt-drop { to { transform: none; opacity: 1; } }

/* ---------- fasce e tagli irregolari (sovrapposti di qualche px: niente fessure) ---------- */
.band { position: relative; z-index: 0; background: var(--bandbg); padding: 60px 0 90px; margin-top: -3px; }
.band--burro { --bandbg: var(--b-burro); }
.band--cipria { --bandbg: var(--b-cipria); }
.band--polvere { --bandbg: var(--b-polvere); }
/* pagina di quaderno: righe azzurrine e margine rosso */
.band--pagina { --bandbg: var(--b-pagina);
	background-image: linear-gradient(90deg, transparent 0 calc(4% + 0px), rgba(200, 87, 77, .35) calc(4% + 0px) calc(4% + 2px), transparent calc(4% + 2px)),
		repeating-linear-gradient(to bottom, transparent 0 33px, rgba(79, 121, 168, .16) 33px 34px); }
.band--ink { --bandbg: var(--b-ink); color: #fff; }
.edge { display: block; position: relative; z-index: 1; height: var(--edge-h); background: var(--from); margin-top: -3px; }
.edge svg { display: block; width: 100%; height: calc(100% + 4px); }
.edge path { fill: var(--to); }
.edge[data-edge="spiral"]::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 18px; z-index: 2;
	background: radial-gradient(circle at 17px 9px, var(--from) 6.5px, rgba(74, 64, 57, .18) 7.3px, transparent 8.5px) 0 0 / 34px 18px repeat-x; }
.edge[data-edge="torn"] svg { filter: drop-shadow(0 -2px 1.5px rgba(74, 64, 57, .12)); }
.edge[data-edge="cloud"] svg { filter: drop-shadow(0 -2px 2px rgba(74, 64, 57, .08)); }
/* nastro adesivo a cavallo tra due fasce */
.edge .washi { position: absolute; left: -2%; right: -2%; top: calc(50% - 15px); height: 30px; transform: rotate(-1.2deg); z-index: 2;
	background: repeating-linear-gradient(45deg, rgba(245, 198, 195, .85) 0 10px, rgba(255, 255, 255, .85) 10px 20px);
	box-shadow: 0 2px 4px rgba(74, 64, 57, .12); clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }

/* titoli di sezione: nastro nel colore della fascia */
.band .t-ribbon { margin-bottom: 14px; font-size: clamp(1.4rem, 2.8vw, 1.95rem); line-height: 1.02; padding-top: .28em; padding-bottom: .12em; text-transform: uppercase; letter-spacing: 3px; }
.rb-blu::before { background: var(--blu); }
.rb-verde::before { background: var(--verde-s); }
.rb-lilla::before { background: #b8605a; }
.rb-giallo { color: var(--ink); }
.rb-giallo::before { background: var(--giallo); }
.lead6 { font: 400 1.6rem/1.25 var(--f-body); max-width: 46ch; margin-bottom: 34px; }
.lead6 b { font-family: var(--f-title); }

/* evidenziatore che passa quando la frase entra */
.sweep { background: linear-gradient(100deg, transparent 1%, var(--sw, var(--rosa)) 3%, var(--sw, var(--rosa)) 97%, transparent 99%) 0 78% / 0% 45% no-repeat;
	transition: background-size 1000ms var(--ease-out) 150ms; padding: 0 .06em; }
.sweep.on { background-size: 100% 45%; }

/* ---------- 2 · il metodo (burro) ---------- */
.metodo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.metodo-claim { font: 700 clamp(2rem, 3.6vw, 2.8rem)/1.08 var(--f-title); margin: 14px 0 16px; }
.metodo-lead { font: 400 1.55rem/1.3 var(--f-body); max-width: 40ch; }
.metodo-lead b { font-family: var(--f-title); }
.metodo-text .margin-note { margin-top: 22px; font-size: 1.35rem; }
.metodo-text .margin-note b { color: var(--ink); }
.tappe { list-style: none; margin: 0; padding: 26px 26px 22px; background: #fff; border-radius: 15px; transform: rotate(.6deg); box-shadow: 0 22px 44px -30px rgba(74, 64, 57, .5); }
.tappe li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.tappe li::before { content: ""; position: absolute; left: 20px; top: 40px; bottom: 0; width: 3px; background: var(--accent); border-radius: 2px; }
.tappe li:last-child { padding-bottom: 0; } .tappe li:last-child::before { display: none; }
.tappe .nd { width: 42px; height: 42px; border-radius: 50%; border: 2.4px solid var(--accent); background: #fff; color: var(--accent); display: grid; place-items: center; font: 400 1.3rem/1 var(--f-label); position: relative; z-index: 1; }
.tappe .fine .nd { background: var(--accent); color: #fff; }
.tappe b { display: block; font: 700 1.55rem/1.1 var(--f-title); }
.tappe span:not(.nd) { font: 400 1.4rem/1.2 var(--f-body); color: var(--ink-soft); }

/* ---------- 3 · per chi è (glicine): quaderni ---------- */
.perchi-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 50px; align-items: center; }
.quaderni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 6px; }
.quaderno { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: block; transition: transform 250ms var(--ease-out); }
.quaderno:focus-visible { outline: 3px solid var(--blu); outline-offset: 4px; border-radius: 10px; }
.quaderno .q-cover { display: block; aspect-ratio: 16 / 10; }
.quaderno .q-label { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-2deg); width: max-content; max-width: 86%; padding: 6px 12px 5px; }
.quaderno .q-label b { font-size: 1.1rem; } .quaderno .q-label small { font-size: .95rem; }
.quaderno:hover { transform: translateY(-3px); }
.quaderno[aria-selected="true"] { transform: translateY(-8px) rotate(-1deg); }
.quaderno[aria-selected="true"] .q-cover { box-shadow: inset 10px 0 0 rgba(0, 0, 0, .12), 0 26px 34px -18px rgba(74, 64, 57, .85); }
.quaderno[aria-selected="true"]::after { content: "✓"; position: absolute; right: -8px; top: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--giallo); border: 2px solid var(--ink); display: grid; place-items: center; font: 700 1rem/1 var(--f-title); }
.quaderni:has([aria-selected="true"]) .quaderno:not([aria-selected="true"]) { opacity: .72; }

/* scheda del pubblico scelto */
.chi { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 26px 46px -30px rgba(74, 64, 57, .6); }
.chi-head { background: var(--qc); color: #fff; padding: 18px 24px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chi-head b { font: 700 clamp(1.7rem, 3vw, 2.2rem)/1 var(--f-title); }
.chi-head span { font: 400 1.05rem/1 var(--f-label); letter-spacing: 1.5px; text-transform: uppercase; background: rgba(255, 255, 255, .2); padding: 5px 9px 4px; border-radius: 6px; }
.chi-body { padding: 20px 24px 22px; }
.chi-body h3 { font: 700 1.45rem/1.15 var(--f-title); margin-bottom: 8px; }
.chi-body > p { font: 400 1.4rem/1.3 var(--f-body); }
.chi-voce { margin-top: 18px; border-top: 1.5px dashed var(--neutro); padding-top: 14px; }
.chi-voce-t { font: 400 .95rem/1.2 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.chi-voce-t span { color: var(--qc); }
.chi-q { font: 700 1.2rem/1.2 var(--f-title); margin: 8px 0 6px; }
.chi-a { position: relative; background: #fbf8f3; border: 1.5px solid #e5ded4; border-left: 4px solid var(--qc); border-radius: 10px; padding: 10px 14px; font: 400 1.4rem/1.25 var(--f-body); }
.q-cover { position: relative; aspect-ratio: 4 / 3.3; border-radius: 6px 12px 12px 6px; background: var(--qc); overflow: hidden;
	box-shadow: inset 10px 0 0 rgba(0, 0, 0, .12), 0 18px 30px -18px rgba(74, 64, 57, .7);
	transform: rotate(var(--qr, -1.5deg)); transition: transform 320ms var(--ease-out); display: grid; place-items: center; }
.quaderno:hover .q-cover { transform: rotate(0) translateY(-6px); }
.q-cover::before { content: ""; position: absolute; inset: 0; background: var(--qp); opacity: .5; }
.q-spirale { position: absolute; left: 12px; right: 12px; top: 8px; height: 14px; background: radial-gradient(circle at 7px 7px, var(--b-cipria) 4px, rgba(0, 0, 0, .35) 5px, transparent 5.5px) 0 0 / 22px 14px repeat-x; }
.q-label { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 10px 16px 8px; text-align: center; transform: rotate(-2deg); max-width: 82%; }
.q-label b { display: block; font: 700 1.35rem/1.1 var(--f-title); }
.q-label small { display: block; font: 400 1.15rem/1.1 var(--f-body); color: var(--ink-soft); }
.q--medie { --qc: #6f9b6f; --qr: -1.8deg; --qp: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px) 0 0 / 14px 14px; }
.q--superiori { --qc: #5c7fa8; --qr: 1.4deg; --qp: repeating-linear-gradient(transparent 0 13px, rgba(255,255,255,.3) 13px 14px); }
.q--uni { --qc: #b8605a; --qr: -1deg; --qp: radial-gradient(rgba(255,255,255,.3) 1.2px, transparent 1.6px) 0 0 / 12px 12px; }
.q--corsi { --qc: #7d6a9c; --qr: 1.8deg; --qp: linear-gradient(90deg, transparent 0 82%, rgba(0,0,0,.35) 82% 86%, transparent 86%); }

/* ---------- 4 · la promessa e la prova (nebbia): due nastri che scorrono ---------- */
.prova { padding-bottom: 70px; }
.nastro { overflow: hidden; padding: 26px 0 30px; }
.nastro-track { display: flex; width: max-content; animation: apt-nastro 70s linear infinite; }
.nastro--rev .nastro-track { animation-direction: reverse; animation-duration: 80s; }
.nastro:hover .nastro-track, .nastro:focus-within .nastro-track { animation-play-state: paused; }
@keyframes apt-nastro { to { transform: translateX(-50%); } }
.ritaglio { flex: none; margin: 0 46px 0 0; background: #fff; padding: 12px 12px 10px; transform: rotate(var(--rot)); box-shadow: 0 18px 30px -20px rgba(74, 64, 57, .6); transition: transform 320ms var(--ease-out); }
.ritaglio:hover { transform: rotate(0) scale(1.04); }
.ritaglio { width: min-content; }
.ritaglio figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.ritaglio figcaption .lab { font-size: .9rem; }
.ritaglio figcaption b { font: 700 1.3rem/1.1 var(--f-title); }
.ritaglio figcaption .lab { white-space: nowrap; }
.ritaglio img { height: 240px; width: auto; max-width: none; }
.ritaglio .pg-open { cursor: zoom-in; }
.ritaglio-src { display: block; text-align: right; font: 400 1.15rem/1 var(--f-body); color: var(--ink-soft); margin-top: 6px; }

/* ---------- 5 · ogni colore ha un compito (salvia) ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: start; }
.colori-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.colori-left .lead6 { margin-bottom: 24px; }
.tabs6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tabs6 .lab { font-size: 1.05rem; padding: .5em .6em; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.tabs6 .lab:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tabs6 .lab:hover { transform: translateY(-2px); }
.tabs6 .lab[aria-selected="true"] { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.colori .panel .b6 { font-size: 1.75rem; }
.colori .panel .tt6 { font-size: 2rem; }
.panels { display: grid; }
.panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px) rotate(-1deg); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), visibility 0s 350ms; }
.panel[data-on] { opacity: 1; visibility: visible; transform: none; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.panel .b6 { font-size: 1.6rem; }
.panel .tt6 { font-size: 1.75rem; }
.panel-note { font: 400 1.4rem/1.2 var(--f-body); margin-top: 16px; color: var(--ink-soft); }
.panel-note b { color: var(--ink); font-family: var(--f-title); }

/* ---------- 6 · amazon (inchiostro) ---------- */
.amazon { padding: 56px 0 80px; }
.amazon-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }

/* scheda "il tuo libro ha un lato in più" (come la pagina in fondo al libro) */
.lato { position: relative; background: #fff; color: var(--ink); border-radius: 16px; padding: 30px 28px 26px; text-align: center; transform: rotate(.8deg); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); }
.lato > .tape { top: -12px; left: 24px; transform: rotate(-8deg); }
.lato-t { font: 700 clamp(1.7rem, 2.8vw, 2.2rem)/1.1 var(--f-title); color: var(--accent); }
.lato-t span { background: linear-gradient(transparent 62%, var(--giallo) 62% 92%, transparent 92%); padding: 0 .1em; }
.lato-sub { font: 400 1.3rem/1.3 var(--f-text); color: var(--ink-soft); margin: 12px auto 0; max-width: 40ch; font-size: 1rem; }
.lato-sub b { color: var(--ink); }
.lato-lab { display: flex; align-items: center; gap: 12px; justify-content: center; font: 400 .95rem/1 var(--f-label); letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin: 22px 0 12px; }
.lato-lab::before, .lato-lab::after { content: ""; width: 34px; height: 1.5px; background: var(--accent); }
.lato-code { position: relative; margin: 0 auto; max-width: 320px; padding: 14px 18px; font: 700 2rem/1 var(--f-label); letter-spacing: .35em; color: var(--ink-soft); }
.lato-code::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 14px; --wob: 1; }
.lato-code::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--accent); border-radius: 9px; }
.lato-code .st { position: absolute; color: #e7c14e; font-size: 1.3rem; letter-spacing: 0; }
.lato-code .st1 { left: -30px; top: 30%; } .lato-code .st2 { right: -28px; top: 10%; color: #e8a8a0; font-size: 1rem; }
.lato-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font: 400 1.1rem/1.2 var(--f-body); }
.lato-steps .ico { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 8px; border-radius: 50%; background: var(--rosa-f); border: 1.8px solid var(--ink); }
.lato-steps .ico b { position: absolute; left: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--giallo); border: 1.5px solid var(--ink); display: grid; place-items: center; font: 400 .95rem/1 var(--f-label); }
.lato-steps svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lato-steps svg .rs { stroke: var(--accent); stroke-width: 3; }
.az-big { font: 700 clamp(2.1rem, 4.2vw, 3.2rem)/1.05 var(--f-title); margin: 16px 0 12px; }
.az-big .sweep { --sw: rgba(246, 227, 156, .5); }
.az-sub { font: 400 1.5rem/1.25 var(--f-body); color: #e9e2da; max-width: 34ch; margin-bottom: 24px; }
.az-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.az-badge img { height: 58px; width: auto; }

/* ---------- bonus e carte cultura ---------- */
.pagamenti { padding: 44px 0 34px; border-bottom: 1.5px dashed var(--neutro); text-align: center; }
.pag-t { font: 700 1.5rem/1 var(--f-title); text-transform: uppercase; letter-spacing: 2px; }
.pag-lead { font: 400 1.35rem/1.25 var(--f-body); color: var(--ink-soft); margin: 10px auto 26px; max-width: 52ch; }
.bonus-cards { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 980px; }
.bc { position: relative; text-align: left; background: var(--bcol); color: #fff; border-radius: 16px; padding: 22px 20px 18px; min-height: 170px; display: flex; flex-direction: column; gap: 6px;
	box-shadow: 0 18px 30px -20px rgba(74, 64, 57, .7); transform: rotate(var(--br, -1deg)); transition: transform 250ms var(--ease-out); overflow: hidden; }
.bc::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.bc::before { content: ""; position: absolute; left: 20px; top: 18px; width: 34px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #f6e39c, #e2c465); opacity: .9; }
.bc:hover { transform: rotate(0) translateY(-4px); }
.bc--docente { --bcol: #5c7fa8; --br: -1.2deg; } .bc--giovani { --bcol: #b8605a; --br: .8deg; } .bc--merito { --bcol: #6f9b6f; --br: -.6deg; }
.bc-tag { align-self: flex-end; font: 400 .85rem/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; background: rgba(255, 255, 255, .2); padding: 4px 8px 3px; border-radius: 5px; }
.bc b { font: 700 1.45rem/1.1 var(--f-title); margin-top: 18px; }
.bc-who { font: 400 1.2rem/1.2 var(--f-body); opacity: .95; }
.bc a { margin-top: auto; color: #fff; font: 400 1rem/1 var(--f-label); letter-spacing: .8px; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 1; }
.bonus-steps { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font: 400 1.3rem/1.2 var(--f-body); }
.bonus-steps li { display: flex; align-items: center; gap: 8px; }
.bonus-steps .n5 { --ks: var(--accent); transform: none; }
.pag-note { font: 400 .9rem/1.4 var(--f-text); color: var(--ink-soft); max-width: 70ch; margin: 18px auto 0; }
@media (max-width: 860px) { .bonus-cards { grid-template-columns: minmax(0, 1fr); max-width: 420px; } .bonus-steps { flex-direction: column; align-items: flex-start; max-width: 320px; } }

/* ---------- footer ---------- */
.foot { padding: 16px 16px 40px; text-align: center; }
.foot img { width: 140px; margin: 0 auto 6px; }
.foot .motto { font: 400 1.5rem/1 var(--f-body); }
.foot nav { display: flex; justify-content: center; gap: 22px; margin: 16px 0 10px; font: 400 1.05rem/1 var(--f-label); letter-spacing: 1.5px; text-transform: uppercase; }
.foot nav a { text-decoration: none; } .foot nav a:hover { color: var(--accent); }
.foot .legal { font: 400 1.15rem/1.3 var(--f-body); color: var(--ink-soft); }
.foot .tm { font: 400 .92rem/1.4 var(--f-text); color: var(--ink-soft); max-width: 62ch; margin: 10px auto 14px; }

/* ---------- pagine interne (privacy, cookie…) ---------- */
.page-content { padding: 110px 0 90px; }
.page-content .wrap { max-width: 780px; }
.page-content h1 { font: 700 clamp(2.2rem, 5vw, 3.2rem)/1.1 var(--f-title); color: var(--accent); margin-bottom: 20px; }
.page-content h2 { font: 700 1.7rem/1.2 var(--f-title); margin: 1.4em 0 .4em; }
.page-content p, .page-content li { margin-bottom: .8em; }

@media (max-width: 1000px) {
	.perchi-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 860px) {
	:root { --edge-h: 36px; }
	.band { padding: 40px 0 64px; }
	.metodo-grid, .duo, .amazon-grid, .colori-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.tabs6 { display: flex; }
	.lead6 { font-size: 1.4rem; }
	.tabs6 { flex-direction: row; align-items: center; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 10px 16px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.tabs6 .lab { font-size: 1rem; flex: none; scroll-snap-align: start; }
	.tabs6 .lab[aria-selected="true"] { transform: translateY(-3px); }
	.tabs6 .lab:hover { transform: none; }
	.panel .b6 { font-size: 1.4rem; } .panel .tt6 { font-size: 1.45rem; }
	.ritaglio img { height: 170px; }
	.ritaglio { margin-right: 28px; }
	.label { padding: 26px 20px 22px; }
}
@media (max-width: 760px) {
	.sheet { width: 36vw; left: var(--mx, var(--x)); top: var(--my, var(--y)); }
	.sheet.hide-m, .postit.hide-m { display: none; }
	.postit { width: 150px; font-size: 1.25rem; padding: 14px 12px 12px; }
	.postit--rosa { left: 58%; top: 70%; } .postit--azzurro { left: 2%; top: 64%; }
	.label .margin-note { display: none; }
	.mb-slogan { font-size: 1.3rem; }
}
@media (max-width: 560px) {
	.quaderni { gap: 14px 12px; } .quaderno .q-label { padding: 4px 8px 3px; }
	.lato { padding: 26px 16px 22px; }
	.lato-lab { letter-spacing: 1.5px; font-size: .85rem; } .lato-lab::before, .lato-lab::after { width: 18px; }
	.band--pagina { background-image: linear-gradient(90deg, transparent 0 6px, rgba(200, 87, 77, .35) 6px 8px, transparent 8px), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(79, 121, 168, .16) 33px 34px); }
	.q-cover { aspect-ratio: 16 / 8; }
	.mb-slogan { display: none; }
	.minibar-strip { grid-template-columns: auto auto; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
	.sweep { background-size: 100% 45%; }
	.nastro { overflow-x: auto; }
	.nastro-track { animation: none; }
	.lg-out { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
	.lg-white, .lg-peach, .lg-dot, .desk-cta { opacity: 1; transform: none; }
	.desk-line mark { background-size: 100% 100%; }
}