/* Igiene degli alimenti — la struttura della pagina (04/10/2026, Design/STRUTTURE-PAGINE.md)
   Caricato solo da /servizi/igiene-degli-alimenti/, dopo style.css. La linea grafica resta quella di
   style.css (colori di :root, Archivo + Instrument Sans, cornice del logo, segno sopra i titoli,
   pulsanti, movimento); qui cambia solo la struttura, tutta su un asse centrale:
   · apertura CENTRATA: titolo grande al centro, sotto la foto panoramica (06) dentro la cornice;
   · «Chi deve dotarsi del piano» come NUVOLA DI ETICHETTE (modulo-firma della pagina);
   · la preparazione come LINEA DEL TEMPO VERTICALE, a zig-zag attorno all'asse;
   · analisi su tre colonne · corso come BIGLIETTO · ASL come confronto PRIMA / DURANTE ·
     pratiche in un RIQUADRO con la cornice del logo · PREZZI E DOMANDE AFFIANCATI. */

/* il segno sopra i titoli, centrato: un filo, il quadrato del marchio, un filo */
.apertura-centrata .h1::before,.h2--centro::before{width:118px;margin-inline:auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='10'%3E%3Cpath d='M0 5h49M69 5h49' stroke='black' stroke-width='1.5'/%3E%3Crect x='54.75' y='.75' width='8.5' height='8.5' rx='1' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='10'%3E%3Cpath d='M0 5h49M69 5h49' stroke='black' stroke-width='1.5'/%3E%3Crect x='54.75' y='.75' width='8.5' height='8.5' rx='1' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat}
.h2--centro{text-align:center;margin-inline:auto}

/* ── apertura centrata ─────────────────────────────────── */
/* l'azzurro dell'apertura si ferma a metà foto: la parte bassa della foto e la nota stanno sul bianco */
.apertura-centrata{--bianco:clamp(150px,15vw,236px);padding:clamp(40px,4.4vw,70px) 0 clamp(60px,5.4vw,88px);text-align:center;
  background:linear-gradient(var(--soft) calc(100% - var(--bianco)),var(--white) calc(100% - var(--bianco)))}
.apertura-centrata::before{-webkit-mask:radial-gradient(62% 70% at 50% 18%,#000 0%,transparent 76%);mask:radial-gradient(62% 70% at 50% 18%,#000 0%,transparent 76%)}
.apertura-centrata__testo{display:flex;flex-direction:column;align-items:center}
.apertura-centrata .h1{max-width:15.5em;margin-inline:auto;font-size:clamp(36px,4.6vw,68px);line-height:1.02;font-stretch:var(--wide)}
.apertura-centrata__lead{max-width:31em;margin-bottom:10px;color:var(--heading)}
.apertura-centrata__sub{max-width:36em;font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;margin-bottom:clamp(26px,2.4vw,36px)}
.apertura-centrata__azioni{justify-content:center}

/* la foto panoramica: stretta e larga, con la cornice del logo tutto intorno (non spostata: l'asse è centrale) */
.apertura-centrata__foto{--fx:0px;--fy:0px;margin:clamp(42px,4.4vw,66px) 14px 0}
.apertura-centrata__foto::before{inset:-14px}
.apertura-centrata__foto .photo{aspect-ratio:3}
.apertura-centrata__foto .photo img{object-position:50% 20%}
.js .apertura-centrata__foto.reveal::before{transform:scale(.97)}
/* la nota appesa al centro del bordo basso della foto */
.apertura-centrata__nota{left:50%;right:auto;bottom:0;width:max-content;max-width:calc(100% - 32px);translate:-50% 50%;text-align:left}

/* ── chi deve: la nuvola di etichette ─────────────────── */
.nuvola{position:relative;isolation:isolate;text-align:center;padding-top:calc(var(--sec) + 24px)}
.nuvola::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--sec) * .35);width:min(1180px,100%);height:66%;translate:-50% 0;pointer-events:none;
  background:radial-gradient(closest-side,var(--trust),rgba(237,243,248,0))}
.nuvola__intro{max-width:35em;margin-inline:auto}
.etichette{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 18px;max-width:1060px;margin:clamp(32px,3.2vw,50px) auto 0}
.etichetta{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:9px 26px 9px 9px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(16.5px,1.32vw,19px);font-weight:600;line-height:1.25;letter-spacing:-.008em;color:var(--heading);text-align:left}
.etichetta .sq{--sq:46px}
.etichetta--grande{font-size:clamp(18px,1.7vw,24px);padding:11px 30px 11px 11px}
.etichetta--grande .sq{--sq:58px}
.etichetta--scura{background:var(--navy);border-color:var(--navy);color:var(--white);font-size:clamp(17.5px,1.55vw,22px);padding:11px 30px 11px 11px;box-shadow:var(--sh-2)}
.etichetta--scura .sq{--sq:58px;background:rgba(255,255,255,.08)}
/* la nuvola respira: le etichette dispari un poco più su */
@media (min-width:641px){
  .etichetta:nth-child(odd){translate:0 -7px}
  .etichetta:nth-child(2){translate:0 6px}
}
.js .etichetta.reveal.in{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),box-shadow .45s var(--ease),border-color .35s ease;
  transition-delay:calc(var(--d,0) * 80ms),calc(var(--d,0) * 80ms),0s,0s}
@media (hover:hover){
  .etichetta:hover{border-color:#C9D9E7;box-shadow:var(--sh-2)}
  .etichetta:not(.etichetta--scura):hover .sq{background:var(--navy);color:var(--white)}
  .etichetta:not(.etichetta--scura):hover .sq::after{border-color:rgba(255,255,255,.36)}
}

/* ── come prepariamo: la linea del tempo verticale ────── */
.spina-sezione{background:var(--trust);padding-block:var(--sec)}
.spina{--n:58px;--gap:clamp(26px,3vw,48px);position:relative;display:grid;gap:clamp(6px,.8vw,12px);max-width:1120px;margin:clamp(32px,3.2vw,50px) auto 0;padding:0;list-style:none}
/* l'asse: si disegna dall'alto quando entra nello schermo */
.spina::before{content:"";position:absolute;left:50%;top:calc(var(--n) / 2);bottom:calc(var(--n) / 2);width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(var(--primary),var(--navy));transform-origin:top;transform:scaleY(var(--draw,1))}
.js .spina{--draw:0}
.js .spina.in{--draw:1}
.js .spina::before{transition:transform 1.8s var(--ease-out) .2s}
.spina__passo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--n) minmax(0,1fr);column-gap:var(--gap);align-items:center}
.spina__num{grid-column:2;grid-row:1;--sq:var(--n);font-family:var(--font-display);font-stretch:var(--wide);font-size:22px;font-weight:650;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 8px var(--trust)}
.spina__passo p{position:relative;grid-column:1;grid-row:1;justify-self:end;max-width:27em;padding:clamp(18px,1.7vw,24px) clamp(20px,2vw,28px);
  background:var(--white);border:1px solid rgba(53,104,154,.14);border-radius:var(--r);box-shadow:var(--sh-1);
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.5;color:var(--heading);text-align:right}
.spina__passo:nth-child(even) p{grid-column:3;justify-self:start;text-align:left}
/* il filo che lega la scheda al numero */
.spina__passo p::after{content:"";position:absolute;top:50%;left:100%;width:var(--gap);height:1px;background:rgba(53,104,154,.45)}
.spina__passo:nth-child(even) p::after{left:auto;right:100%}

/* ── analisi: tre colonne con le icone ────────────────── */
.analisi__testa{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px clamp(32px,5vw,88px);align-items:end;margin-bottom:clamp(30px,3vw,46px)}
.analisi__testa .h2{margin-bottom:0;max-width:15em}
.analisi__testa .text{padding-bottom:4px}
.analisi__colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid rgba(53,104,154,.18)}
.analisi__colonna{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,1.8vw,26px);padding:clamp(26px,2.6vw,38px) clamp(22px,2.6vw,40px) clamp(28px,2.8vw,40px)}
.analisi__colonna:first-child{padding-left:0}
.analisi__colonna:last-child{padding-right:0}
.analisi__colonna + .analisi__colonna{border-left:1px solid rgba(53,104,154,.18)}
.analisi__colonna .sq{--sq:68px}
.analisi__colonna p{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(17px,1.36vw,20px);font-weight:560;line-height:1.35;letter-spacing:-.008em;color:var(--heading);max-width:17em}
.analisi__colonna p::first-letter{text-transform:uppercase}
.analisi__ricerca{display:flex;align-items:center;gap:12px;margin-top:clamp(22px,2.2vw,30px);font-size:clamp(15.5px,1.2vw,18px);line-height:1.5;color:var(--body)}
.analisi__ricerca .icon{width:22px;height:22px;color:var(--primary)}
.analisi__ricerca b{font-weight:620;color:var(--heading)}

/* ── corso: la scheda-biglietto ────────────────────────── */
.biglietto-sezione{background:var(--soft)}
.biglietto{--matrice:clamp(170px,18vw,250px);--fondo:var(--soft);position:relative;display:grid;grid-template-columns:var(--matrice) minmax(0,1fr);max-width:1100px;margin-inline:auto;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
/* le due tacche, sopra e sotto la linea di strappo */
.biglietto::before,.biglietto::after{content:"";position:absolute;z-index:2;left:calc(var(--matrice) - 15px);width:30px;height:30px;border-radius:50%;background:var(--fondo);box-shadow:inset 0 0 0 1px var(--border)}
.biglietto::before{top:-16px}
.biglietto::after{bottom:-16px}
.biglietto__matrice{position:relative;isolation:isolate;display:grid;place-items:center;padding:28px;background:var(--navy)}
.biglietto__matrice::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 100% 0%,rgba(53,104,154,.4),transparent 70%)}
.biglietto__matrice::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-xs);pointer-events:none}
/* la linea di strappo: una fila di fori sul bordo fra matrice e biglietto */
.biglietto__corpo{position:relative;padding:clamp(34px,3.6vw,56px) clamp(28px,4.4vw,68px) clamp(30px,3.4vw,50px)}
.biglietto__corpo::before{content:"";position:absolute;left:-4px;top:24px;bottom:24px;width:8px;background:radial-gradient(circle at 4px 4px,var(--fondo) 2.6px,transparent 3.2px) 0 0/8px 13px repeat-y}
.biglietto__corpo .h2{margin-bottom:clamp(14px,1.3vw,18px)}
.biglietto__primo{font-size:clamp(17px,1.32vw,20px);line-height:1.5;color:var(--heading);max-width:30em}
.biglietto__righe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(24px,3vw,44px);margin-top:clamp(20px,2vw,28px);padding-top:clamp(18px,1.8vw,24px);border-top:1px dashed rgba(53,104,154,.32)}
.biglietto__righe .text{max-width:none}

/* ── controllo dell'ASL: prima / durante ──────────────── */
.confronto-sezione .h2{max-width:17em}
.confronto__parola{background:linear-gradient(var(--sottolinea),var(--sottolinea)) 0 96%/100% .15em no-repeat}
.confronto__parola--prima{--sottolinea:var(--input)}
.confronto__parola--durante{--sottolinea:var(--primary)}
.confronto{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 clamp(24px,3.6vw,60px);margin-top:clamp(30px,3vw,46px)}
.confronto__lato{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:clamp(24px,2.4vw,34px);border-top:4px solid var(--input)}
.confronto__lato--durante{border-top-color:var(--primary)}
.confronto__lato .sq{--sq:60px}
.confronto__lato p{font-size:clamp(17.5px,1.45vw,21.5px);line-height:1.5;color:var(--heading);max-width:23em}
.confronto__lato strong{font-weight:650;color:var(--navy);white-space:nowrap}
/* 05/10 (M2): sotto il «7 giorni su 7», il numero per i festivi e le urgenze */
.confronto__lato p.confronto__nota{margin-top:12px;font-size:clamp(15px,1.1vw,16.5px);color:var(--body)}
.confronto__nota a{color:var(--primary);font-weight:600;white-space:nowrap}
.confronto__divisore{position:relative;display:flex;justify-content:center;align-items:center;width:52px}
.confronto__divisore::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(53,104,154,.22)}
.confronto__divisore .sq{--sq:52px;border:1px solid var(--border);box-shadow:var(--sh-1);color:var(--primary)}

/* ── pratiche sanitarie: il riquadro con la cornice del logo ── */
.riquadro-sezione{padding-top:calc(var(--sec) * .35)}
.riquadro{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px clamp(28px,4.4vw,80px);align-items:start;
  padding:clamp(40px,4.4vw,68px) clamp(28px,4.4vw,68px) clamp(34px,4vw,60px);background:var(--card-soft);border:1px solid var(--border);border-radius:var(--r)}
.riquadro::after{content:"";position:absolute;inset:clamp(10px,1vw,14px);border:1px solid var(--line-steel);border-radius:var(--r-xs);pointer-events:none}
.riquadro__icona{position:absolute;z-index:1;top:0;right:clamp(28px,4.4vw,68px);translate:0 -50%;--sq:clamp(60px,5.2vw,72px);box-shadow:0 0 0 8px var(--white)}
.riquadro__testa .h2{margin-bottom:clamp(14px,1.3vw,18px)}
.riquadro__corpo{display:grid;gap:14px;padding-top:clamp(0px,3.6vw,56px)}
.riquadro__corpo .text{max-width:32em}
.riquadro__corpo .more{margin-top:8px}

/* ── prezzi e domande frequenti, affiancati ───────────── */
.banco__griglia{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4.6vw,80px);align-items:start}
.banco__prezzi{position:relative;padding:clamp(28px,3vw,44px) clamp(24px,2.8vw,40px) clamp(26px,2.8vw,38px);background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-2)}
.banco__prezzi::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:var(--r) var(--r) 0 0;background:var(--primary)}
.banco__listino.price-card{margin:clamp(4px,.6vw,8px) 0 clamp(18px,1.8vw,24px);padding:0;border:0;border-block:1px solid var(--border);border-radius:0;box-shadow:none}
.banco__listino.price-card::before{display:none}
.banco__listino.price-card li{padding:16px 2px}
.banco__prezzi .prices__note{margin-bottom:clamp(20px,2vw,28px)}
.banco__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.banco__domande .faq__list{margin-top:clamp(4px,.6vw,8px)}
@media (min-width:960px){
  .banco__prezzi{position:sticky;top:calc(var(--header-c) + 28px)}
}

/* ═══ tablet ═══ */
@media (max-width:959px){
  .apertura-centrata__foto .photo{aspect-ratio:2.3}
  .analisi__testa{grid-template-columns:minmax(0,1fr)}
  .riquadro{grid-template-columns:minmax(0,1fr)}
  .riquadro__corpo{padding-top:0}
  .banco__griglia{grid-template-columns:minmax(0,1fr)}
}

/* ═══ telefono ═══ */
@media (max-width:640px){
  .apertura-centrata{--bianco:104px;padding:26px 0 58px}
  .apertura-centrata .h1{font-size:clamp(30px,8.4vw,35px);line-height:1.06}
  .apertura-centrata__lead{font-size:16.5px}
  .apertura-centrata__sub{font-size:15.5px;margin-bottom:24px}
  .apertura-centrata__azioni{flex-direction:column;gap:12px}
  .apertura-centrata__foto{margin:30px 8px 0}
  .apertura-centrata__foto::before{inset:-8px}
  .apertura-centrata__foto .photo{aspect-ratio:1.6}
  .apertura-centrata__foto .photo img{object-position:50% 22%}
  .apertura-centrata__nota{max-width:calc(100% - 20px);gap:12px;padding:10px 16px 10px 10px}

  .nuvola{padding-top:calc(var(--sec) + 14px)}
  .etichette{gap:10px 8px}
  .etichetta,.etichetta--grande,.etichetta--scura{gap:12px;padding:7px 16px 7px 7px;font-size:16px}
  .etichetta .sq,.etichetta--grande .sq,.etichetta--scura .sq{--sq:42px}

  .spina{--n:46px;--gap:14px;gap:12px}
  .spina::before{left:calc(var(--n) / 2)}
  .spina__passo{grid-template-columns:var(--n) minmax(0,1fr)}
  .spina__num{grid-column:1;font-size:19px;box-shadow:0 0 0 6px var(--trust)}
  .spina__passo p,.spina__passo:nth-child(even) p{grid-column:2;justify-self:stretch;max-width:none;padding:12px 14px;font-size:15px;text-align:left}
  .spina__passo p::after,.spina__passo:nth-child(even) p::after{left:auto;right:100%}

  .analisi__colonne{grid-template-columns:minmax(0,1fr)}
  .analisi__colonna,.analisi__colonna:first-child,.analisi__colonna:last-child{flex-direction:row;align-items:center;gap:14px;padding:14px 0}
  .analisi__colonna + .analisi__colonna{border-left:0;border-top:1px solid rgba(53,104,154,.18)}
  .analisi__colonna .sq{--sq:48px}
  .analisi__colonna p{font-family:var(--font);font-stretch:normal;font-size:15.5px;font-weight:500;line-height:1.45;letter-spacing:0;max-width:none}
  .analisi__ricerca{align-items:flex-start;font-size:15.5px}
  .analisi__ricerca .icon{margin-top:2px}

  .biglietto{--matrice-h:104px;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--matrice-h) auto;border-radius:var(--r)}
  .biglietto::before{left:-16px;top:calc(var(--matrice-h) - 15px)}
  .biglietto::after{left:auto;right:-16px;bottom:auto;top:calc(var(--matrice-h) - 15px)}
  .biglietto .sq--band{--sq:70px}
  .biglietto__corpo{padding:26px 20px 24px}
  .biglietto__corpo::before{left:24px;right:24px;top:-4px;bottom:auto;width:auto;height:8px;background:radial-gradient(circle at 4px 4px,var(--fondo) 2.6px,transparent 3.2px) 0 0/13px 8px repeat-x}
  .biglietto__primo{font-size:16.5px}
  .biglietto__righe{grid-template-columns:minmax(0,1fr)}

  .confronto{grid-template-columns:minmax(0,1fr)}
  .confronto__lato{flex-direction:row;align-items:flex-start;gap:14px;padding-top:18px}
  .confronto__lato .sq{--sq:44px}
  .confronto__lato p{font-size:16px}
  .confronto__lato p.confronto__nota{font-size:14.5px;margin-top:8px}
  .confronto__divisore{justify-content:flex-start;width:auto;height:58px;padding-left:4px}
  .confronto__divisore::before{display:none}
  .confronto__divisore .sq{--sq:36px}
  .confronto__divisore .icon{rotate:90deg}

  .riquadro{padding:40px 18px 26px}
  .riquadro .text{font-size:15px;text-wrap:wrap}
  .riquadro__icona{right:20px;--sq:56px}

  .banco__prezzi{padding:26px 18px 22px}
  .banco__listino.price-card li{padding:14px 0}
  .banco__azioni{flex-direction:column;align-items:stretch;gap:14px}
  .banco__azioni .btn{width:100%}
  .banco__azioni .link{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .js .spina{--draw:1}
  .js .apertura-centrata__foto.reveal::before{transform:none}
}