/* ==========================================================================
   Ritocchi Taste (31 ottobre 2026): dal brief «brief-design-horizon.md», principi presi da
   dooh.com e doohgroup.com (filosofia degli spazi, rapporto titolo/corpo, superfici), senza
   copiarne identità, caratteri o colori. Tutto additivo: togliendo questo file si torna alla
   versione precedente. Si carica dopo main.css e fable.css, quindi vince a parità di specificità.
   I 5 ritocchi sono numerati [T1]…[T5] come nella lista del brief.
   ========================================================================== */

/* [T4] Due soli raggi in tutta la pagina: 12 px per bottoni, campi, pillole, riquadro prima/dopo;
   18 px per i pannelli (modulo). Prima erano 12/14/22 + 8 sui video. Le variabili sono quelle di
   main.css, così ogni componente che le usa cambia da solo. */
:root{--r-sm:12px;--r:12px;--r-lg:18px}

/* [T1] Intestazioni di sezione a sinistra alla radice (non più centrate e poi corrette sezione per
   sezione), titolo con misura stretta. Il primo schermo resta centrato: è la parte che converte e
   Nicolò l'ha voluto così il 29 ottobre. */
.head,.ask-head{max-width:none;margin-left:0;margin-right:0;text-align:left}
.head h2,.ask-head h2{max-width:16ch}
.head p,.ask-head>p{max-width:38ch}
/* etichetta con il trattino anche nelle sezioni che ancora usavano le maiuscole spaziate */
.head .eyebrow,.ask-head .eyebrow{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none}
.head .eyebrow::before,.ask-head .eyebrow::before{content:"";flex:none;width:22px;height:1.5px;background:currentColor;opacity:.7}

/* [T2] Scala degli spazi unica (8/14/24/40/64 di fable.css): la sezione «apre» con aria e si chiude
   stretta sul proprio contenuto. Le sezioni che hanno già la propria misura (.pr, .final) la tengono,
   perché le loro regole hanno una classe e vincono su «section». */
section{padding-block:var(--fb-s5,64px) var(--fb-s4,40px)}
.head,.ask-head{margin-bottom:var(--fb-s3,24px)}

/* [T3] Titoli più grandi rispetto al corpo (che resta 17 px). Il brief chiedeva 3,5:1 sul telefono,
   ma a quella misura il primo schermo non starebbe più in una schermata su iPhone 13: qui si va da
   1,7:1 a 2:1 sul telefono e da 3,8:1 a 4:1 sul computer, con interlinea sotto l'1 come nei
   riferimenti (senza scendere sotto .98: in italiano le ascendenti si toccherebbero). */
.hero h1{font-size:clamp(2.1rem,8.6vw,4.2rem);line-height:.98;letter-spacing:-.03em}
.head h2,.ask-head h2,.final h2{font-size:clamp(2rem,8vw,3.4rem);line-height:1;letter-spacing:-.03em}

/* [T4] Video dei prodotti a filo dello schermo sul telefono: il bordo dello schermo fa da cornice,
   come i pannelli a tutta larghezza di dooh.com. Sul computer tornano con 8 px. */
.pr-list{padding-left:0;padding-right:0}
.pr-media{border-radius:0}
.pr-card figcaption{margin-left:var(--gutter);margin-right:var(--gutter-r)}
@media (min-width:900px){
  .pr-list{padding-left:var(--gutter);padding-right:var(--gutter-r)}
  .pr-media{border-radius:8px}
  .pr-card figcaption{margin-left:0;margin-right:0}
}

/* [T4] Ombre: restano solo quella sotto il riquadro prima/dopo (è la luce dell'insegna) e quella del
   toast. Dove serve un confine, bordo di 1 px. */
.card,.ghost,.pill span,.check,.drop,.guide-box .cover,.final .nums b{box-shadow:none}
.card{border:1px solid var(--line)}

/* [T5] Bottone secondario a contorno 1 px invece della scritta sottolineata («Non hai la foto
   adesso?» nel primo schermo e in chiusura). Il primario resta pieno: una landing ha bisogno del
   pulsante che si vede. */
.alt{min-height:48px;padding:0 16px;border:1px solid var(--on-band-line);border-radius:var(--r);text-decoration:none}
.alt-a b{text-decoration:none}
.final .alt{border-color:var(--on-band-line)}
@media (hover:hover) and (pointer:fine){.alt:hover{border-color:var(--on-band)}}
.alt:active{transform:scale(.98)}

/* computer: sezioni più ariose in testa, titoli fino a 3,4 rem */
@media (min-width:900px){
  section{padding-block:96px 64px}
  .head,.ask-head{margin-bottom:var(--fb-s4,40px)}
}

/* «Chi siamo» e piè di pagina su fondo nero, a tutta larghezza (richiesta di Nicolò, 31 ottobre). Le variabili
   --on-band sono quelle dei testi di queste due parti: ridefinite qui, tutto diventa chiaro da solo.
   Il nero di .final-about arriva ai bordi con un fondo che sborda ai lati, così il contenuto resta nel suo margine. */
.final-about,footer{--on-band:#FFFFFF;--on-band-muted:#D1D1D6;--on-band-line:rgba(255,255,255,.18)}
.final{padding-bottom:0;overflow-x:clip}
.final-about{position:relative;isolation:isolate;margin-bottom:0;padding-top:var(--fb-s4,40px);padding-bottom:var(--fb-s4,40px);border-top:0}
.final-about::before{content:"";position:absolute;z-index:-1;inset:0 -100vmax -1px;background:#0B0B0C}
.final-about .eyebrow,.fa-t,.fa-t b,.final .nums div>span,footer,footer .wrap>span,.f-tel{color:var(--on-band)}
.fa-t,.final .nums div>span,footer .wrap>span,.f-tel{font-weight:500}
.final .nums b{border-color:#3A3A3C}
footer{background:#0B0B0C}
.f-logo img{filter:brightness(0) invert(1)}
@media (min-width:900px){.final-about{padding-top:var(--fb-s5,64px);padding-bottom:var(--fb-s5,64px)}}

/* «riduci movimento»: niente da aggiungere, questo file non introduce animazioni */