/* Sezioni del sito Pyxplan che NON sono la pagina principale — estratte da
   landing-home.css l'8 ago 2026 (era a 831 righe contro un cap di 800).

   Dentro: la pagina di settore (verticale edilizia), le fasce con le schermate
   (showcase / gestioni) e, in fondo, il POSTER B-CAD 2026.

   ⚠️ ORDINE: va caricato SUBITO DOPO landing-home.css in public/index.html — i
   token e le regole di base stanno lì. Sono nati un file solo.

   ⚠️ RIPRISTINO DELLA LANDING (docs/landing-bcad-2026.md §3): il blocco .bcad* in
   fondo è il poster della fiera e si toglie in blocco quando la fiera finisce.
   Il ripristino §3.2 rimpiazza index.html per intero con lo snapshot, che porta
   il proprio CSS inline: non dipende da questo file. */

/* ============================================================
   PAGINA DI SETTORE (verticale edilizia)
   ============================================================ */
.page-hero{padding:5rem 2rem 3.5rem;position:relative;overflow:hidden}
.page-hero::before{
  content:'';position:absolute;top:-240px;right:-160px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(82,183,136,0.10) 0%,transparent 70%);
}
.page-hero-inner{max-width:1100px;margin:0 auto;position:relative}
.breadcrumb{font-size:13px;color:var(--ink-muted);margin-bottom:1.25rem}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb::before{content:'← ';color:var(--ink-muted)}
.page-hero h1{max-width:820px}
.page-lead{font-size:18px;color:var(--ink-soft);font-weight:300;line-height:1.7;max-width:760px}
.page-lead + .page-lead{margin-top:1rem}
.page-lead b{color:var(--ink);font-weight:500}

/* Striscia di ancore alle sezioni della pagina */
.anchor-rail{
  display:flex;gap:8px;flex-wrap:wrap;
  max-width:1100px;margin:0 auto;padding:0 2rem 3rem;
}
.anchor-pill{
  font-size:12.5px;padding:6px 14px;border-radius:16px;
  border:1px solid var(--border);background:var(--white);
  color:var(--ink-soft);white-space:nowrap;transition:all 0.2s;
}
.anchor-pill:hover{border-color:var(--accent-light);color:var(--accent)}

/* Blocco di argomento: testo + finestra, a colonne alternate */
.block{padding:4.5rem 2rem;border-top:1px solid var(--border)}
.block.warm{background:var(--bg-warm)}
.block-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3.5rem;align-items:start;
}
.block-inner.reverse .block-visual{order:-1}
.block-kicker{
  display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;color:var(--accent);background:var(--accent-pale);
  padding:4px 10px;border-radius:12px;margin-bottom:1rem;
}
.block-title{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:27px;
  line-height:1.25;letter-spacing:-0.6px;margin-bottom:0.85rem;
}
.block-text{font-size:15.5px;color:var(--ink-soft);font-weight:300;line-height:1.7;margin-bottom:1.25rem}
.feat-list{list-style:none}
.feat-list li{
  position:relative;padding:0.55rem 0 0.55rem 1.75rem;
  font-size:14.5px;line-height:1.55;border-bottom:1px solid var(--border);
}
.feat-list li:last-child{border-bottom:0}
.feat-list li::before{
  content:'';position:absolute;left:0;top:0.95rem;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
}
.feat-list li b{font-weight:500;color:var(--ink)}
.block-note{
  margin-top:1.5rem;padding:0.9rem 1.1rem;
  border-left:2px solid var(--accent);background:var(--accent-pale);
  border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);font-weight:300;
}
.block-note b{color:var(--ink);font-weight:500}

/* the recurring AI note: same shape as block-note, on the AI palette */
.ai-note{
  margin-top:1.5rem;padding:0.9rem 1.1rem;
  border-left:2px solid var(--ai);background:var(--ai-pale);
  border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);font-weight:300;
}
.ai-note b{color:var(--ink);font-weight:500}
.ai-note-label{
  display:block;font-size:11px;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--ai);font-weight:500;margin-bottom:4px;
}

/* Documento finto: righe di un SAL */
.doc-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.doc-title{font-size:14px;font-weight:500}
.doc-meta{font-size:11px;color:var(--ink-muted)}
.doc-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;font-size:12.5px;border-bottom:1px solid var(--border);
}
.doc-row:last-of-type{border-bottom:0}
.doc-code{
  font-size:11px;color:var(--ink-muted);width:58px;flex-shrink:0;
  letter-spacing:0.3px;
}
.doc-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-qty{font-size:11.5px;color:var(--ink-muted);width:64px;text-align:right;flex-shrink:0}
.doc-amount{width:78px;text-align:right;flex-shrink:0;font-weight:500}
.doc-totals{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.doc-total-row{
  display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--ink-soft);padding:3px 0;
}
.doc-total-row.minus{color:var(--danger)}
.doc-total-row.final{
  font-size:14px;color:var(--ink);font-weight:500;
  margin-top:6px;padding-top:8px;border-top:1px solid var(--border);
}

/* Scadenzario della sicurezza */
.due-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;margin-bottom:6px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg);font-size:12.5px;
}
.due-row:last-child{margin-bottom:0}
.due-state{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--accent-light);
}
.due-row.warn{border-color:var(--gold-border);background:var(--gold-pale)}
.due-row.warn .due-state{background:var(--gold)}
.due-row.bad{border-color:var(--danger-light);background:var(--danger-pale)}
.due-row.bad .due-state{background:var(--danger-light)}
.due-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.due-when{font-size:11px;color:var(--ink-muted);white-space:nowrap}

/* Riuso fuori dall'edilizia */
.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.cross-card{
  border:1px solid var(--border);border-radius:12px;
  background:var(--white);padding:1.35rem;
}
.cross-from{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:6px;
}
.cross-title{font-size:15px;font-weight:500;margin-bottom:0.4rem}
.cross-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.6;font-weight:300}

@media(max-width:960px){
  .block-inner{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .block-inner.reverse .block-visual{order:0}
  .cross-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .page-hero{padding:3rem 1.5rem 2.5rem}
  .anchor-rail{padding:0 1.5rem 2rem}
  .block{padding:3rem 1.5rem}
  .block-title{font-size:25px}
  .cross-grid{grid-template-columns:minmax(0,1fr)}
}

.due-row.after-doc{margin-top:12px}

/* ============================================================
   SCHERMATE REALI DEL PRODOTTO
   Le finestre disegnate (.screen) restano illustrazioni; queste sono
   fotografie dell'applicazione e portano sempre la loro didascalia.
   ============================================================ */
.shot{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--white);box-shadow:0 12px 40px rgba(26,26,46,0.10);
}
.shot img{display:block;width:100%;height:auto}
.shot-caption{
  margin-top:0.65rem;font-size:11.5px;color:var(--ink-muted);
  display:flex;align-items:center;gap:6px;line-height:1.4;
}
.shot-caption::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent-light);flex-shrink:0;
}
.shot-caption.centered{justify-content:center}
.stack > * + *{margin-top:1.75rem}
.inline-proposal{margin-top:1.5rem}

/* Fascia con la schermata vera a tutta larghezza */
.showcase{background:var(--bg-warm);padding:5rem 2rem}
.showcase .section-sub{margin-bottom:2.5rem}
.showcase .section-sub em{font-style:normal;color:var(--ink);font-weight:500}
.showcase .shot-caption{justify-content:flex-end}
@media(max-width:768px){.showcase{padding:3.5rem 1.5rem}}

/* Le tre gestioni: sicurezza, qualità, AI */
.gestioni-grid{grid-template-columns:repeat(3,1fr)}
.gestioni-note{
  margin-top:1.5rem;padding:1.35rem 1.6rem;
  border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--accent-pale);
}
.gestioni-note p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;font-weight:300}
.gestioni-note strong{color:var(--ink);font-weight:500}
@media(max-width:960px){.gestioni-grid{grid-template-columns:minmax(0,1fr)}}

/* Le colonne non devono mai allargarsi oltre lo schermo per colpa del loro
   contenuto (righe di documento con colonne a larghezza fissa). */
.block-visual,.jpanel > *,.screen{min-width:0}
.screen-body{overflow-x:auto}

/* Schermata di telefono: l'immagine E' gia' lo schermo, niente cornice aggiunta. */
.phone-plain{max-width:300px;margin:0 auto}
.phone-plain img{display:block;width:100%;height:auto}

/* Fascia con schermata su fondo chiaro (alterna con .showcase) */
.showcase.light{background:var(--bg)}
.gestioni-shot{margin-top:2.5rem}

/* ============================================================
   PESO DELLE IMMAGINI (6 ago 2026)
   Prima erano tutte uguali: stessa misura, stesso fondo, una dietro
   l'altra — e quindi nessuna spiccava. Ora ci sono tre livelli.

   1) .statement  — l'immagine forte della pagina: fondo scuro, larga
      oltre il testo. Una sola per pagina.
   2) .bleed-band — testo in colonna e schermata che esce dal bordo:
      spezza il ritmo e fa sembrare la pagina più larga.
   3) .shot.tight — immagine di appoggio, più stretta e centrata.
   ============================================================ */

/* 1) L'immagine forte: stessa fascia delle altre, ma immagine piu' larga */
.statement{padding:5.5rem 2rem;background:var(--bg-warm)}
.statement.light{background:var(--bg)}
.statement .container{max-width:1240px}
.statement .shot{max-width:1240px;margin-left:auto;margin-right:auto}

/* 2) Testo in colonna, schermata che esce dal bordo */
/* `container-type:inline-size` serve allo sconfinamento a specchio qui sotto:
   `cqw` misura la fascia REALE (larghezza della finestra meno la barra di
   scorrimento), mentre `vw` la ignora e sbaglia di ~15px per eccesso. */
.bleed-band{padding:5.5rem 2rem;overflow:hidden;position:relative;container-type:inline-size}
.bleed-band.warm{background:var(--bg-warm)}
.bleed-inner{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:3.5rem;align-items:center;
}
/* invertendo le colonne va invertita anche la loro larghezza:
   l'immagine deve restare la parte larga */
.bleed-inner.reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr)}
.bleed-inner.reverse .bleed-shot{order:-1}
.bleed-inner .section-sub{margin-bottom:0}
.bleed-shot{min-width:0}
.bleed-shot .shot{border-radius:14px}
.bleed-shot .shot img{width:126%;max-width:none}
/* Nella variante a specchio l'immagine esce dal bordo SINISTRO: si sposta
   il riquadro, non l'immagine, cosi' la schermata resta intera e piu' grande
   (spostando l'immagine si perdeva il primo numero, quello che conta).
   ⚠️ Lo spostamento va LIMITATO allo spazio che c'e' davvero a sinistra del
   contenitore centrato, altrimenti la schermata non «sconfina»: esce dallo
   schermo e `overflow:hidden` le taglia via il fianco sinistro — cioe' il
   titolo e il primo numero, esattamente cio' che questa scelta voleva salvare
   (misurato l'11 ago 2026 sul sito pubblicato: -14px a 1440, -70px a 1280,
   -49px a 1024). I tre pezzi della formula, da dentro a fuori:
     (1240px - 100cqw)/2 - 2rem  = spazio libero a sinistra (negativo = ce n'e')
     max(-8vw, …)                = non si sconfina piu' di quanto si sconfini oggi
     min(0px, …)                 = sotto i 1240px non si sconfina affatto. */
.bleed-inner.reverse .bleed-shot .shot{margin-left:min(0px,max(-8vw,calc((1240px - 100cqw)/2 - 2rem)))}
.bleed-inner.reverse .bleed-shot .shot img{width:100%}

/* 3) Immagine di appoggio */
.shot.tight{max-width:880px;margin-left:auto;margin-right:auto}
.shot.tight + .shot-caption{max-width:880px;margin-left:auto;margin-right:auto}

@media(max-width:960px){
  .bleed-inner{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .bleed-inner.reverse .bleed-shot{order:0}
  .bleed-shot .shot img,
  .bleed-inner.reverse .bleed-shot .shot img{width:100%}
  .bleed-inner.reverse .bleed-shot .shot{margin-left:0}
}
@media(max-width:768px){
  .statement,.bleed-band{padding-left:1.5rem;padding-right:1.5rem}
}

/* ============================================================
   FONDALI ALTERNATI (6 ago 2026)
   Scorrendo, le fasce si alternano chiaro/scuro. Le schermate restano
   sempre a tema chiaro: sul fondo scuro diventano il punto luminoso.
   Basta aggiungere .dark-band alla sezione.
   ============================================================ */
.dark-band{background:var(--ink);color:var(--white)}
.dark-band h2{color:var(--white)}
.dark-band h2 em{color:var(--accent-light)}
.dark-band .section-label{color:var(--accent-light)}
.dark-band .section-sub{color:rgba(255,255,255,0.68)}
.dark-band .section-sub em,.dark-band .section-sub strong{color:var(--white)}
.dark-band .shot{box-shadow:0 30px 80px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.14)}
.dark-band .shot-caption{color:rgba(255,255,255,0.5)}

/* le tessere del ciclo */
.dark-band .cycle-step{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.13)}
.dark-band .cycle-step-num{color:var(--accent-light)}
.dark-band .cycle-step-name{color:var(--white)}
.dark-band .cycle-step-desc{color:rgba(255,255,255,0.55)}
.dark-band .cycle-step.pivot{background:rgba(82,183,136,0.16);border-color:rgba(82,183,136,0.45)}
.dark-band .cycle-step.pivot .cycle-step-num{color:var(--accent-light)}

/* i cartoncini dei moduli e delle gestioni */
.dark-band .mod-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.13)}
.dark-band .mod-card:hover{
  border-color:rgba(82,183,136,0.5);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.dark-band .mod-icon{background:rgba(82,183,136,0.18)}
.dark-band .mod-title{color:var(--white)}
.dark-band .mod-desc{color:rgba(255,255,255,0.62)}
.dark-band .gestioni-note{
  background:rgba(82,183,136,0.10);
  border-color:rgba(255,255,255,0.13);border-left-color:var(--accent-light);
}
.dark-band .gestioni-note p{color:rgba(255,255,255,0.7)}
.dark-band .gestioni-note strong{color:var(--white)}
.dark-band .limit-row{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.13)}
.dark-band .limit-mark{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6)}
.dark-band .limit-title{color:var(--white)}
.dark-band .limit-desc{color:rgba(255,255,255,0.62)}

/* ============================================================
   AGGIUNTE DI PUBBLICAZIONE — consenso privacy del modulo (ripreso
   dal sito live) e poster B-CAD 2026 (docs/landing-bcad-2026.md).
   ============================================================ */
.wl-btn:disabled{opacity:0.5;cursor:not-allowed}
.wl-consent{
  max-width:480px;margin:1.25rem auto 0;
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:rgba(255,255,255,0.55);
  text-align:left;line-height:1.5;
}
.wl-consent input[type=checkbox]{
  margin-top:3px;flex-shrink:0;
  accent-color:var(--accent-light);
  width:15px;height:15px;cursor:pointer;
}
.wl-consent a{color:var(--accent-light);text-decoration:underline;text-underline-offset:2px}
.wl-consent a:hover{color:var(--white)}
.wl-msg{font-weight:500;color:var(--white)}
.wl-msg.error{color:var(--danger-light)}

/* Poster B-CAD 2026 — banda chiara fra i confini (scuri) e la waitlist. */
.bcad{
  display:flex;align-items:center;justify-content:center;
  padding:3rem 1.5rem;
  background:var(--bg-warm);
}
.bcad picture{display:flex;justify-content:center;max-width:600px;min-width:0}
.bcad-poster{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:calc(100vh - 10rem);
  border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
@media(max-width:768px){
  .bcad{padding:1.75rem 1rem}
  .bcad-poster{max-height:none}
}

/* Video promo + invito B-CAD — seconda sezione, dopo il hero: due carte
   gemelle (stesso formato 4:5), video a sinistra e poster della fiera a
   destra. Stessa grammatica del poster: banda chiara, angoli tondi, ombra. */
.promo{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:2rem;
  padding:3rem 1.5rem;
  background:var(--bg-warm);
}
.promo picture{display:flex;justify-content:center;min-width:0}
.promo-video,
.promo .bcad-poster{
  display:block;height:auto;
  width:100%;max-width:460px;
  border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.promo-video{background:#1a1a1a;flex:0 1 460px}
@media(max-width:768px){
  .promo{padding:1.5rem 1rem;gap:1.25rem}
  .promo-video,.promo .bcad-poster{max-width:100%}
}