/* Portale365 — token tipografici condivisi (unica fonte) */
:root{
  --font:'Switzer',sans-serif;
  --mono:'Roboto Mono',monospace;
  /* HEADLINE */
  --th-size:clamp(32px,4.6vw,66px);
  --th-lh:.95;
  --th-ls:-.03em;
  /* SUBHEAD (+ variante ridotta per card grandi) */
  --ts-size:clamp(24px,3vw,42px);
  --ts-size-sm:clamp(22px,2.6vw,34px);
  --ts-size-xs:clamp(19px,2vw,21px);              /* titoli card piccole */
  --quote-fs:clamp(22px,2.2vw,28px); /* SUBHEAD leggero (unica variante "quote"): citazione del carosello recensioni */
  --ts-w:500;        /* titoli di sezione */
  --ts-w-card:400;   /* titoli di blocchi e card */
  --ts-lh:1;
  --ts-ls:-.02em;
  /* BODY */
  --tb-size:17px;
  --tb-card:16px;   /* testo dentro le card */
  --tb2-size:15px;  /* testo secondario */
  --field-fs:16px;  /* campi modulo */
  --tb-lh:1.3;
  --tb-c:#55524c;
  --tb2-c:#8a867e;
  /* LABEL (mono) */
  --tl-size:12px;
  --tl-ls:.05em;
  --tl-lh:1.3;

  /* ===== SPAZIATURA — scala a multipli di 8 ===== */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:40px;
  --s6:48px;
  --s7:64px;
  --s8:80px;
  --s9:96px;
  --s10:120px;
  --s11:160px;
  --s12:200px;

  /* griglia */
  --grid-max:1290px;        /* contenitore standard */
  --hero-max:960px;         /* contenitore testi hero */
  --gutter:clamp(20px,5vw,56px); /* gronde laterali */
  --gutter-steps:clamp(16px,3vw,36px); /* ECCEZIONE VOLUTA: gronda ridotta del percorso a card larghe di Su misura */
  --pill-pad:clamp(48px,7vw,90px);     /* padding interno delle card-pillola (raggio 310px): il contenuto deve scavalcare la curva */
  --card-min:300px;         /* larghezza minima card nelle griglie auto-adattive */
  --card-min-lg:360px;      /* variante larga (coppie recapiti/modulo) */

  /* componente hero (pagine interne) */
  --nav-h:88px;             /* ingombro navbar in flusso */
  --hero-gap-2:20px;        /* titolo → sottotitolo (etichetta→titolo = --label-gap, sottotitolo→pulsanti = --btn-gap) */
  --hero-sub-max:620px;     /* larghezza max sottotitolo hero */

  /* ritmo verticale */
  --hero-pad:clamp(112px,12vw,200px);     /* sopra/sotto gli hero */
  --hero-pad-sm:clamp(96px,9vw,140px);    /* hero compatta (pagine con contenuto breve) */
  /* MODELLO A MARGINE INTERNO: ogni sezione porta il proprio padding verticale
     --sec-pad sopra e sotto, identico per tutte, qualunque sia il fondo; la
     distanza tra due sezioni è la SOMMA dei due margini interni e il confine
     cade a metà dello spazio vuoto. Nessuna regola dedicata ai cambi di fondo.
     Le hero restano fuori dal modello (componente a piena altezza). */
  --sec-pad:clamp(56px,4.5vw,64px);       /* margine interno sup+inf di ogni sezione (somma = 126 a 1400) */
  --sec-pad-wide:clamp(56px,7vw,98px);    /* VARIANTE DICHIARATA: blocchi del percorso home (somma = 196) */

  /* distanze interne */
  --head-gap:clamp(32px,4vw,48px); /* titolo sezione → contenuto */
  --label-gap:20px;                /* etichetta mono → titolo */
  --card-title-gap:16px;           /* titolo card → testo */
  --card-title-gap-sm:8px;         /* card compatte (solo titolo + 1-2 righe) */
  --card-gutter:clamp(24px,2.5vw,32px); /* tra card della stessa griglia */
  --btn-gap:40px;                  /* testo → pulsante */
  --sep-gap:48px;                  /* sopra/sotto separatori */

  /* padding */
  --card-pad:clamp(28px,3.5vw,40px);  /* card chiare */
  --band-pad:clamp(72px,9vw,112px);
  --dark-pad:clamp(90px,9vw,140px);  /* aria verticale del blocco scuro home ("Se non esiste, lo costruiamo") */   /* PRINCIPIO: aria interna delle card grandi (CTA, superfici con canvas).
                                         L'equidistanza (--sec-pad) vale tra SEZIONI, divisioni della pagina;
                                         le card sono oggetti dentro una sezione e hanno aria propria: 112 dentro,
                                         63 fuori è il rapporto voluto, identico per tutte le card grandi. */
  --field-pad:18px 22px;              /* campi modulo */

  /* pulsanti */
  --btn-h:50px;   --btn-px:32px;  --btn-fs:15px;  --btn-w:500; /* primario (etichetta = navbar) */
  --btnnav-h:44px;--btnnav-px:26px;--btnnav-fs:15px; /* navigazione */
  --btnxl-h:54px; --btnxl-px:36px; --btnxl-fs:15px; /* chiusura pagina (etichetta = navbar) */
  --btn-ico:44px;                                 /* bottone icona (invio chat) */

  /* testo introduttivo dei blocchi di chiusura */
  --closing-fs:clamp(19px,1.6vw,22px);
  --closing-lh:1.45;
  /* varianti dichiarate dentro i livelli esistenti */
  --ts-display:clamp(24px,3.2vw,44px);   /* SUBHEAD display: frasi di chiusura ad effetto (Chi siamo, Su misura, Rete) */
  --ts-closing:clamp(30px,4vw,54px);    /* SUBHEAD chiusura: titolo dei blocchi di chiusura pagina */
  --ts-year:clamp(28px,3vw,42px);       /* SUBHEAD display: anni della timeline (Chi siamo) — ruolo display, non intestazione */   /* SUBHEAD display: frasi di chiusura ad effetto (Chi siamo, Su misura, Rete) */
  --chip-fs:14px;                        /* chips suggerimento della hero */

  /* micro-testi dei mockup illustrativi (grafica, non tipografia) */
  --mock-fs:10.5px;
  --mock-fs-lg:14.5px;
  --mock-fs-sm:8.5px;

  /* raggi */
  --r-field:18px;   /* campi modulo */
  --r-card-sm:22px; /* card compatte, tendine nav, teche */
  --r-card:var(--r-card-sm); /* alias legacy */
  --r-card-md:26px; /* card medie */
  --r-card-lg:36px; /* card grandi, moduli */
  --r-cta:44px;     /* blocchi CTA (e card-pillola sotto i 900px) */
  --r-band:80px;    /* bande scure a tutta larghezza */
  --r-prompt:30px;  /* barra prompt hero home — componente unico, eccezione dichiarata */
  /* famiglia "grafica mockup" (11-16px): raggi proporzionati alla miniatura dentro le
     grafiche mockup della home (tile 11, chip 13, tag 12, schermate 16) — fuori scala VOLUTAMENTE */
  /* raggi fuori scala dichiarati: 11px mini-tile dei mockup; 13-14px voci di menu;
     24px card del diamante/metodo (23px = livello interno, raggio−1); 30px card
     "problemi" delle pagine prodotto; 310/400px card-pillola; 999px pill; 50% cerchi. */

  /* ECCEZIONI DICHIARATE — i connettori a 90° del diamante "Come si parte"
     (pagine prodotto) e del grafico del metodo (home) sono disegnati al pixel
     su queste gronde: non seguono la scala --card-gutter. */
  --diagram-gap:14px;
  --diagram-gap-0:0px;
  --diagram-max:1180px;
  /* ALTRE ECCEZIONI DICHIARATE (altezze/larghezze che il disegno richiede):
     — min-height delle 5 card illustrate di Su misura (.p365big) e degli slot del
       carosello prodotti: le illustrazioni sono posizionate in assoluto, la card
       cresce comunque col testo (min-height, mai height);
     — .p365fzspacer 500px: riserva l'area del canvas molecole nella banda scura;
     — [data-ps-elbow] 110px: celle-connettore del diamante (solo geometria SVG);
     — riquadri logo timeline Chi siamo 168×130px: teche a misura fissa per loghi;
     — griglia 12 colonne del carosello prodotti (span 7/5): composizione
       editoriale, adattata sotto i 920px dalle regole responsive dedicate;
     — gap della griglia banda scura "funzioni chiave" clamp(34px,5vw,80px):
       respiro proprio tra elenco e canvas molecole;
     — area orbite di Rete alta 640px: diagramma, il raggio si adatta in cqw;
     — geometria della timeline Chi siamo (binario, gap clamp(18px,3vw,44px));
     — card del percorso Su misura: le uniformi usano var(--s6), le asimmetriche
       verticali var(--s7) con lati compositivi — scelta voluta per card illustrate. */
}

/* Sotto i 400px i pulsanti vanno a larghezza piena: niente testo a capo, tocco comodo */
@media (max-width:400px){
  .p365-pearl{width:100%;justify-content:center}
}

/* ===== COMPONENTE HERO — pagine interne (la home è esclusa) =====
   Altezza = finestra meno navbar; svh tiene conto delle barre del browser mobile.
   Contenuto centrato verticalmente; su schermi molto bassi la hero cresce oltre
   lo schermo (min-height) invece di comprimere o tagliare il testo. */
.p365-hero{position:relative;z-index:1;box-sizing:border-box;max-width:var(--hero-max);margin:0 auto;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(24px,5vh,64px) var(--gutter)}
/* variante per le pagine il cui contenuto è tirato sotto la navbar (pagine prodotto):
   la nav non occupa flusso, quindi la hero copre l'intera finestra e compensa col padding */
.p365-hero--under{min-height:100vh;min-height:100svh;padding-top:calc(var(--nav-h) + clamp(24px,5vh,64px))}

/* ingresso hero a cascata (stesso disegno di Su misura): righe del titolo mascherate + dissolvenze */
html{scrollbar-gutter:stable}
@keyframes p365-title-in{0%{transform:translateY(112%);opacity:0;filter:blur(10px)}100%{transform:translateY(0);opacity:1;filter:blur(0px)}}
@keyframes p365-fade-in{0%{opacity:0;transform:translateY(14px);filter:blur(6px)}100%{opacity:1;transform:translateY(0);filter:blur(0px)}}
@media (prefers-reduced-motion: reduce){.p365-hero *{animation-duration:.01s !important;animation-delay:0s !important}}

/* segnaposto del runtime (componenti in caricamento): invisibili — niente riquadri grigi
   al primo frame; lo spazio resta riservato da hint-size, lo sfondo pagina traspare */
.sc-placeholder{background:transparent !important;border:none !important;border-radius:0 !important}
.sc-placeholder::before{content:none !important;animation:none !important}
.sc-interp.sc-missing{background:transparent !important}
.sc-interp.sc-missing::before{content:none !important}

/* mobile/tablet: scorrimento senza barra visibile */
@media (max-width:1024px){
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
}