/* ============================================================
   ORDITRA — sito pubblico
   Si appoggia alle variabili di app.css. Qui c'è solo ciò che
   riguarda le pagine di presentazione.
   ============================================================ */

.sito { padding-bottom: 0 }

/* ---------- il telaio di sfondo ----------
   Fisso dietro tutto, non intercetta il tocco. I due colori sono
   token perché il filo deve cambiare fra tema chiaro e scuro. */
:root { --tessitura-filo: rgba(22,25,29,.10); --tessitura-spola: rgba(224,64,42,.55) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --tessitura-filo: rgba(236,232,226,.09); --tessitura-spola: rgba(255,107,82,.6) }}
:root[data-theme="dark"]{
  --tessitura-filo: rgba(236,232,226,.09); --tessitura-spola: rgba(255,107,82,.6) }

#telaio{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sito > *:not(#telaio){position:relative;z-index:1}

/* ---------- comparsa delle sezioni ---------- */
[data-rivela]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rivela].visibile{opacity:1;transform:none}
[data-rivela][data-ritardo="1"]{transition-delay:.09s}
[data-rivela][data-ritardo="2"]{transition-delay:.18s}
[data-rivela][data-ritardo="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  [data-rivela]{opacity:1;transform:none;transition:none}
}

/* ---------- navigazione ---------- */
.nav { display:flex; align-items:center; gap:8px; padding:14px 20px;
       max-width:1040px; margin:0 auto }
.nav .brand { margin-right:auto }
.nav a.link { color:var(--ink-2); text-decoration:none; font:600 14.5px var(--f);
              padding:10px 12px; border-radius:9px }
.nav a.link:hover { color:var(--brand); background:var(--brand-soft) }
.nav a.bottone { background:var(--brand); color:var(--brand-ink); text-decoration:none;
                 font:700 14.5px var(--f); padding:12px 18px; border-radius:10px }
.nav a.bottone:hover { opacity:.9 }

/* ---------- apertura ---------- */
.hero { max-width:1040px; margin:0 auto; padding:56px 20px 44px }
.occhiello { font:650 11.5px var(--m); letter-spacing:.22em; text-transform:uppercase;
             color:var(--brand); margin-bottom:20px }
.hero h1 { margin:0 0 18px; font-size:clamp(38px,8.5vw,72px); font-weight:820;
           letter-spacing:-.04em; line-height:1.02; text-wrap:balance }
.hero h1 .filo { color:var(--brand) }
.hero .sotto { margin:0 0 32px; max-width:46ch; font-size:clamp(17px,2.4vw,20px);
               color:var(--ink-2); line-height:1.5 }
.azioni { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.btn { display:inline-flex; align-items:center; gap:9px; height:56px; padding:0 26px;
       border-radius:12px; text-decoration:none; font:700 16px var(--f); border:0; cursor:pointer }
.btn.primario { background:var(--brand); color:var(--brand-ink) }
.btn.secondario { background:var(--surface); color:var(--ink); border:1px solid var(--line-2) }
.btn.secondario:hover { border-color:var(--brand); color:var(--brand) }
.btn svg { width:19px; height:19px; fill:currentColor }

/* ---------- fascia multilingua ---------- */
.lingue { background:var(--ink); color:var(--paper); padding:26px 20px }
.lingue .in { max-width:1040px; margin:0 auto; display:flex; gap:14px 34px;
              flex-wrap:wrap; align-items:baseline; justify-content:center }
.lingue span { font-size:16px; opacity:.92 }
.lingue span::before { content:"→ "; color:var(--brand); font-weight:700 }

/* ---------- sezioni ---------- */
.sez { max-width:1040px; margin:0 auto; padding:64px 20px }
.sez + .sez { border-top:1px solid var(--line) }
.tit { font:700 12px var(--f); letter-spacing:.18em; text-transform:uppercase;
       color:var(--ink-3); margin:0 0 10px }
.sez h2 { margin:0 0 14px; font-size:clamp(26px,4.5vw,38px); font-weight:780;
          letter-spacing:-.025em; text-wrap:balance }
.sez .intro { margin:0 0 34px; max-width:56ch; color:var(--ink-2); font-size:16.5px }

/* ---------- passaggi ---------- */
.passi { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.passo { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:26px }
.passo .n { font:700 12px var(--m); letter-spacing:.12em; color:var(--brand); margin-bottom:14px }
.passo h3 { margin:0 0 7px; font-size:18px; font-weight:700 }
.passo p { margin:0; color:var(--ink-2); font-size:15px }

/* ---------- listino ---------- */
.listino { border:1px solid var(--line); border-radius:15px; overflow:hidden; background:var(--surface) }
.voce { display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center;
        padding:16px 18px; border-bottom:1px solid var(--line) }
.voce:last-child { border-bottom:0 }
.voce .campione { width:44px; height:44px; border-radius:8px; border:1px solid var(--line-2) }
.voce .nome { font-weight:650; font-size:16px }
.voce .desc { color:var(--ink-3); font-size:13.5px; margin-top:2px }
.voce .da { text-align:right; white-space:nowrap }
.voce .da .n { font:700 17px var(--m); font-variant-numeric:tabular-nums }
.voce .da .u { display:block; font-size:11.5px; color:var(--ink-3) }
.nota-prezzi { margin:14px 0 0; font-size:13.5px; color:var(--ink-3) }

/* ---------- confronto ---------- */
.confronto { display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:640px){ .confronto { grid-template-columns:1fr } }
.col { border-radius:15px; padding:26px; border:1px solid var(--line) }
.col.prima { background:var(--surface-2) }
.col.dopo  { background:var(--surface); border-color:var(--brand) }
.col h3 { margin:0 0 16px; font-size:13px; letter-spacing:.12em; text-transform:uppercase }
.col.prima h3 { color:var(--ink-3) }
.col.dopo h3 { color:var(--brand) }
.col ul { margin:0; padding:0; list-style:none; display:grid; gap:12px }
.col li { display:grid; grid-template-columns:22px 1fr; gap:11px; font-size:15.5px; color:var(--ink-2) }
.col li b { color:var(--ink); font-weight:650 }
.col .segno { font-weight:700 }
.col.prima .segno { color:var(--ink-3) }
.col.dopo .segno { color:var(--ok) }

/* ---------- zona ---------- */
.zona { background:var(--surface); border:1px solid var(--line); border-radius:15px;
        padding:30px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center }
@media (max-width:640px){ .zona { grid-template-columns:1fr } }
.zona h3 { margin:0 0 6px; font-size:21px; font-weight:750 }
.zona p { margin:0; color:var(--ink-2); font-size:15.5px }
.orario { text-align:right; white-space:nowrap }
@media (max-width:640px){ .orario { text-align:left } }
.orario .h { font:700 30px var(--m); font-variant-numeric:tabular-nums; color:var(--brand) }
.orario .l { font-size:12.5px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase }

/* ---------- chiusura ---------- */
.chiusura { background:var(--ink); color:var(--paper); padding:66px 20px }
.chiusura .in { max-width:1040px; margin:0 auto; text-align:center }
.chiusura h2 { margin:0 0 14px; font-size:clamp(27px,5vw,42px); font-weight:800;
               letter-spacing:-.03em; color:var(--paper) }
.chiusura p { margin:0 0 30px; color:#A8A29A; font-size:17px }
.chiusura .azioni { justify-content:center }
.chiusura .btn.secondario { background:transparent; color:var(--paper); border-color:#434A52 }

footer.piede { padding:34px 20px 54px; border-top:1px solid var(--line) }
footer.piede .in { max-width:1040px; margin:0 auto; display:flex; gap:16px;
                   flex-wrap:wrap; align-items:center; color:var(--ink-3); font-size:13.5px }
footer.piede a { color:var(--ink-3); text-decoration:none }
footer.piede a:hover { color:var(--brand) }
footer.piede .sep { margin-left:auto }

/* ---------- il marchio che converge all'apertura ----------
   Non è decorazione: il marchio racconta "sparso → ordinato",
   e all'apertura lo esegue. Chi ha ridotto le animazioni lo vede fermo. */
.segno-grande { width:min(100%,420px); margin:0 0 30px; color:var(--brand) }
.segno-grande svg { width:100%; height:auto; display:block }
@media (prefers-reduced-motion:no-preference){
  .segno-grande [data-dente]{ animation:converge .7s cubic-bezier(.22,.9,.3,1) both }
  @keyframes converge{ from{ transform:translateX(-26px); opacity:0 } to{ transform:none; opacity:1 } }
}