/* ══════════ base.css — fabbrica-store v6 · il telaio comune ══════════
   Solo l'ossatura: reset, corpo leggibile al telefono, strumenti del testo, barra d'acquisto.
   Il LOOK è tutto del preset (css/stile.css): qui ci sono solo le variabili da riempire.

   Strumenti del testo (significato fisso, mai più di due nella stessa frase):
     <strong>               la promessa
     <mark>                 la prova (l'evidenziatore si stende quando arriva)
     <span class="ris">     la parola colorata = il risultato
     <span class="mano">    la sottolineatura a mano = la frase del lettore
     <span class="nota">    la nota a margine, scritta a mano = il dettaglio che fa sorridere
     <p class="gigante">    la frase gigante = la big idea, il prezzo, la chiusura          */

:root {
  --fondo: #fff; --testo: #111; --tenue: #555; --accento: #e4572e; --ris: #1f8a5b;
  --evid: rgba(255, 214, 10, .55);
  --mano-colore: #e4572e;
  --corpo: 18px; --riga: 1.55;
  --font-titolo: system-ui, sans-serif; --font-corpo: system-ui, sans-serif; --font-mano: "Caveat", cursive;
  --gutter: 20px; --misura: 34rem;
  --bottone-fondo: #111; --bottone-testo: #fff; --raggio: 999px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 var(--corpo)/var(--riga) var(--font-corpo); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; }
button { font: inherit; }

/* strumenti del testo */
strong { font-weight: 700; }
mark { color: inherit; background: linear-gradient(var(--evid), var(--evid)) no-repeat 0 85% / 0% 0.55em; padding: 0 .08em; transition: background-size 1.1s cubic-bezier(.6,.1,.2,1) .15s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.in-vista { background-size: 100% 0.55em; }
.ris { color: var(--ris); font-weight: 700; }
.mano { background-image: var(--mano, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23e4572e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .42em; padding-bottom: .12em; transition: background-size 1.2s cubic-bezier(.6,.1,.2,1) .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mano.in-vista { background-size: 100% .42em; }
.nota { font-family: var(--font-mano); color: var(--mano-colore); font-size: 1.35em; line-height: 1.1; display: inline-block; transform: rotate(-3deg); }
.gigante { font-family: var(--font-titolo); font-size: clamp(2.3rem, 11vw, 5.5rem); line-height: .98; letter-spacing: -.03em; }
.barrato { position: relative; white-space: nowrap; }
.barrato::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .09em; background: var(--accento); transform: rotate(-8deg) scaleX(0); transform-origin: left; transition: transform .6s ease-out .3s; }
.barrato.in-vista::after, .v6-pronto .barrato[data-vista].in-vista::after { transform: rotate(-8deg) scaleX(1); }

/* il bottone e la riga del rischio */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 1.6em; border-radius: var(--raggio); background: var(--bottone-fondo); color: var(--bottone-testo); font: 700 1.05rem/1.1 var(--font-corpo); text-decoration: none; border: 0; cursor: pointer; }
.rischio { font-size: .95rem; color: var(--tenue); margin-top: .7em; }

/* domande: <details> nativo */
details { border-bottom: 1px solid color-mix(in srgb, var(--testo) 18%, transparent); }
summary { list-style: none; cursor: pointer; padding: 1.1em 2.2em 1.1em 0; position: relative; font-weight: 700; font-size: 1.1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: .2em; top: .85em; font-size: 1.5em; line-height: 1; transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details > p { padding: 0 0 1.2em; }

/* la barra d'acquisto: solo al telefono */
[data-barra-acquisto] { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 18px; transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
[data-barra-acquisto].su { transform: none; }
[data-barra-acquisto] .bottone { min-height: 48px; padding: 0 1.2em; }
@media (min-width: 760px) { [data-barra-acquisto] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  mark, .mano { background-size: 100% .55em; }
}