/* Medicina del lavoro — la struttura della pagina (04/10/2026, Design/STRUTTURE-PAGINE.md)
   Caricato solo da /servizi/medicina-del-lavoro/, 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, fascia navy, movimento); qui cambia solo la struttura:
   · apertura DIVISA AL CONTRARIO: foto verticale 4:5 (05) a sinistra, su un pannello azzurro che
     arriva al bordo dello schermo, con la cornice sfalsata; il testo a destra, su bianco;
   · «Quando serve il medico competente» come FRASE GRANDE + tre schede (modulo-firma della pagina);
   · le visite come PERCORSO A CERCHI NUMERATI, orizzontale, nella fascia navy;
   · maternità, consulenza e controlli su tre colonne con le icone grandi;
   · i prezzi come DUE CARTELLINI appesi · le domande in una COLONNA STRETTA al centro. */

/* ── apertura divisa ───────────────────────────────────── */
.apertura-divisa{overflow:hidden;padding:clamp(40px,4.4vw,72px) 0 clamp(56px,5.4vw,90px);background:var(--white)}
.apertura-divisa::before{display:none}
.apertura-divisa__griglia{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center}
.apertura-divisa__foto{--fx:-22px;--fy:22px;width:calc(100% - 22px);max-width:500px;margin:0 0 22px 22px}
/* il pannello azzurro con la carta millimetrata: dal bordo sinistro dello schermo a due terzi della foto */
.apertura-divisa__foto::after{content:"";position:absolute;z-index:-2;top:-100vh;bottom:-100vh;left:-100vw;right:32%;pointer-events:none;
  background:linear-gradient(rgba(53,104,154,.075) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(53,104,154,.075) 1px,transparent 1px) 0 0/48px 48px,var(--soft)}
.apertura-divisa__foto .photo{aspect-ratio:4/5}
.apertura-divisa__foto .photo img{object-position:22% 50%}
.apertura-divisa__nota{left:auto;right:clamp(-64px,-4vw,-28px);bottom:clamp(28px,3.2vw,48px)}
.apertura-divisa .h1{max-width:13em;font-size:clamp(34px,3.7vw,56px);line-height:1.04;font-stretch:var(--wide)}
.apertura-divisa .hero__lead{max-width:26em}
.apertura-divisa .hero__sub{max-width:31em}

/* ── quando serve: la frase grande e tre schede ───────── */
/* il titolo a sinistra, la regola a destra, sulla stessa riga di base */
.quando__testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,5vw,88px);align-items:end}
.quando__testa .h2{margin-bottom:0;max-width:13em}
.quando__testa .text{max-width:30em;padding-bottom:4px}
.massima{position:relative;max-width:21em;margin:clamp(38px,4.4vw,70px) 0 clamp(36px,4vw,62px);padding-left:clamp(58px,7.4vw,124px);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(28px,3.5vw,52px);font-weight:620;line-height:1.1;letter-spacing:-.022em;color:var(--heading);text-wrap:balance}
.massima strong{font-weight:inherit}
.massima::before{content:"«";content:"«" / "";position:absolute;left:0;top:-.1em;font-size:2.5em;line-height:1;font-weight:700;color:var(--primary);opacity:.3}
.quando__esempi{margin-bottom:clamp(16px,1.6vw,22px);font-size:clamp(15.5px,1.2vw,18px);font-weight:600;color:var(--heading)}
.casi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.caso{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.2vw,30px);background:var(--card-soft);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1)}
.caso .sq{--sq:46px;margin-bottom:18px;background:var(--white)}
.caso__rischio{font-size:14.5px;line-height:1.4;color:var(--body)}
.caso__luogo{margin-top:4px;font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(19px,1.6vw,23px);font-weight:640;line-height:1.2;letter-spacing:-.012em;color:var(--heading)}
.caso__luogo strong{font-weight:inherit}
.caso__esito{width:100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:clamp(15px,1.1vw,16.5px);line-height:1.5;color:var(--heading)}

/* ── come funzionano le visite: il percorso a cerchi, nella fascia navy ── */
.percorso-sezione{padding:0 clamp(10px,1.4vw,20px) calc(var(--sec) * .9)}
.percorso{position:relative;isolation:isolate;overflow:hidden;width:min(100%,1400px);margin-inline:auto;padding:clamp(46px,4.8vw,76px) clamp(26px,5vw,84px) clamp(46px,4.6vw,72px);
  background:var(--navy);border-radius:var(--r-lg);color:var(--white)}
.percorso::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,rgba(53,104,154,.32),transparent 62%),radial-gradient(60% 70% at 0% 100%,rgba(15,37,71,.5),transparent 70%)}
.percorso > *{max-width:1232px;margin-inline:auto}
.percorso__tappe{--c:clamp(64px,5.6vw,80px);--gap:clamp(20px,2.8vw,44px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(34px,3.4vw,52px);padding:0;list-style:none}
/* la linea che unisce i cerchi: si disegna quando entra nello schermo */
.percorso__tappe::before{content:"";position:absolute;top:calc(var(--c) / 2 - 1px);left:calc(var(--c) / 2);right:calc((100% - 3 * var(--gap)) / 4 - var(--c) / 2);height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(160,180,196,.45));transform-origin:left;transform:scaleX(var(--draw,1))}
.js .percorso__tappe{--draw:0}
.js .percorso__tappe.in{--draw:1}
.js .percorso__tappe::before{transition:transform 1.8s var(--ease-out) .3s}
.percorso__tappa{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,1.8vw,24px)}
.percorso__cerchio{position:relative;display:grid;place-items:center;width:var(--c);height:var(--c);border-radius:50%;background:var(--white);color:var(--navy);
  font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(22px,1.9vw,28px);font-weight:660;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.percorso__cerchio::after{content:"";position:absolute;inset:6px;border:1px solid var(--line-steel);border-radius:50%}
.percorso__tappa:last-child .percorso__cerchio{background:var(--primary);color:var(--white)}
.percorso__tappa:last-child .percorso__cerchio::after{border-color:rgba(255,255,255,.4)}
.percorso__tappa p{max-width:17em;font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;color:var(--on-navy)}

/* ── maternità, consulenza e controlli: tre colonne con le icone grandi ── */
.tre-servizi{background:var(--sectors)}
.tre-servizi__colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.4vw,72px);margin-top:clamp(30px,3vw,46px)}
.tre-servizi__voce{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2vw,28px)}
.tre-servizi__icona{width:clamp(58px,5.4vw,78px);height:clamp(58px,5.4vw,78px);color:var(--navy);stroke-width:1.25;transition:transform .5s var(--ease),color .3s ease}
.tre-servizi__voce:hover .tre-servizi__icona{transform:translateY(-4px);color:var(--primary)}
.tre-servizi__voce p{position:relative;width:100%;padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(53,104,154,.24);font-size:clamp(16.5px,1.3vw,19px);line-height:1.5;color:var(--heading)}
/* il quadrato del marchio sul filo */
.tre-servizi__voce p::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--sectors);border:1.5px solid var(--primary);border-radius:1px}

/* ── prezzi: due cartellini appesi ─────────────────────── */
.cartellini-griglia{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,96px);align-items:center}
.cartellini__testo .prices__note{max-width:26em}
.cartellini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(18px,2.6vw,40px);width:100%;max-width:620px;justify-self:end;padding:clamp(64px,5.4vw,84px) 0 0;list-style:none}
.cartellino{--rot:-2.2deg;--fondo:var(--white);--riga:var(--line-steel);position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(220px,19vw,268px);
  padding:clamp(58px,5vw,70px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,32px);background:var(--fondo);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:inset 0 0 0 10px var(--fondo),inset 0 0 0 11px var(--riga),var(--sh-2);rotate:var(--rot);transform-origin:50% 28px}
/* il foro e il filo */
.cartellino::before{content:"";position:absolute;top:20px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--white);box-shadow:inset 0 1px 2px rgba(15,37,71,.28),0 0 0 1px var(--border)}
.cartellino::after{content:"";position:absolute;left:50%;bottom:calc(100% - 28px);width:1px;height:clamp(64px,5.4vw,86px);background:linear-gradient(rgba(53,104,154,0),rgba(53,104,154,.6))}
.cartellino__prezzo{order:-1;display:inline-flex;align-items:baseline;gap:6px;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.cartellino__prezzo small{font-size:14px;font-weight:500;color:var(--body);letter-spacing:.02em}
.cartellino__prezzo b{font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(46px,4.4vw,66px);font-weight:660;letter-spacing:-.03em;line-height:.95}
.cartellino__prezzo span{font-family:var(--font-display);font-size:clamp(20px,1.8vw,26px);font-weight:600;color:var(--primary)}
.cartellino__voce{width:100%;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(16px,1.3vw,19px);font-weight:600;line-height:1.3;letter-spacing:-.008em;color:var(--heading)}
.cartellino--navy{--rot:1.8deg;--fondo:var(--navy);--riga:rgba(255,255,255,.22);margin-top:clamp(24px,2.6vw,40px);border-color:var(--navy)}
.cartellino--navy .cartellino__prezzo{color:var(--white)}
.cartellino--navy .cartellino__prezzo small{color:var(--on-navy)}
.cartellino--navy .cartellino__prezzo span{color:var(--on-navy-muted)}
.cartellino--navy .cartellino__voce{color:var(--white);border-top-color:var(--navy-line)}
.js .cartellino.reveal.in{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),rotate .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms),calc(var(--d,0) * 80ms),0s}
@media (hover:hover){
  .cartellino:hover{rotate:0deg}
}

/* ── domande frequenti: una colonna stretta, al centro ── */
.domande-strette__colonna{max-width:800px}
.domande-strette .h2{text-align:center}
.domande-strette .h2::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}
.domande-strette .faq__list{gap:0;margin-top:clamp(26px,2.6vw,38px);border-top:1px solid rgba(53,104,154,.22)}
.domande-strette .faq__item,.domande-strette .faq__item[open],.domande-strette .faq__item:hover{background:none;border:0;border-bottom:1px solid rgba(53,104,154,.22);border-radius:0;box-shadow:none}
.domande-strette .faq__item summary{padding:22px 4px;border-radius:0;font-size:clamp(17px,1.35vw,20px)}
.domande-strette .faq__item summary .sq{background:var(--white)}
.domande-strette .faq__item[open] summary .sq{background:var(--navy)}
.domande-strette .faq__body p{max-width:none;padding:0 4px 24px}

/* ═══ tablet ═══ */
@media (max-width:1099px){
  .casi{grid-template-columns:minmax(0,1fr)}
  .caso{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
  .caso .sq{grid-row:1 / 4;margin:0}
  .caso__esito{margin-top:8px;padding-top:8px}
}
@media (max-width:959px){
  .quando__testa{grid-template-columns:minmax(0,1fr)}
  .apertura-divisa__griglia{gap:clamp(32px,5vw,48px)}
  .apertura-divisa__foto{--fx:-14px;--fy:14px;width:calc(100% - 14px);margin:0 0 14px 14px}
  .apertura-divisa__nota{left:-12px;right:-24px;bottom:22px}
  .percorso__tappe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .percorso__tappe::before{display:none}
  .cartellini-griglia{grid-template-columns:minmax(0,1fr)}
  .cartellini{justify-self:start}
}

/* ═══ telefono ═══ */
@media (max-width:760px){
  .apertura-divisa__griglia{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
  .apertura-divisa__foto{width:62%;max-width:400px}
  .apertura-divisa__foto::after{bottom:-40px;right:28%}
  .apertura-divisa__nota{left:46%;right:auto;bottom:24px;width:max-content;max-width:calc(100vw - var(--gutter) * 2 - 14px - (100% * .46))}
}
@media (max-width:640px){
  .apertura-divisa{padding:24px 0 46px}
  .apertura-divisa__foto{--fx:-10px;--fy:10px;width:62%;margin:0 0 10px 10px}
  .apertura-divisa__nota{gap:10px;padding:10px 12px 10px 10px;bottom:20px}
  .apertura-divisa__nota .sq{--sq:40px}
  .apertura-divisa__nota strong{font-size:15px}
  .apertura-divisa__nota small{font-size:13px}
  .apertura-divisa .h1{font-size:clamp(29px,8vw,34px);line-height:1.06}

  .massima{margin:30px 0 28px;padding-left:44px;font-size:clamp(23px,6.4vw,26px);line-height:1.18}
  .caso{column-gap:14px;padding:14px 16px}
  .caso .sq{--sq:40px}
  .caso__luogo{font-size:18px}
  .caso__esito{font-size:15px;margin-top:2px;padding-top:0;border-top:0}

  .percorso-sezione{padding:0 10px calc(var(--sec) * .9)}
  .percorso{padding:34px 18px 28px;border-radius:var(--r)}
  .percorso__tappe{--c:46px;grid-template-columns:minmax(0,1fr);row-gap:18px}
  .percorso__tappe::before{display:block;top:calc(var(--c) / 2);bottom:calc(var(--c) / 2);left:calc(var(--c) / 2 - 1px);right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(160,180,196,.45));transform-origin:top;transform:scaleY(var(--draw,1))}
  .percorso__tappa{flex-direction:row;align-items:center;gap:16px}
  .percorso__cerchio{flex:none;font-size:19px}
  .percorso__cerchio::after{inset:4px}
  .percorso__tappa p{max-width:none;font-size:15px;line-height:1.5}

  .tre-servizi__colonne{grid-template-columns:minmax(0,1fr);gap:0;border-bottom:1px solid rgba(53,104,154,.22)}
  .tre-servizi__voce{flex-direction:row;align-items:center;gap:16px;padding:16px 0;border-top:1px solid rgba(53,104,154,.22)}
  .tre-servizi__icona{width:44px;height:44px;flex:none;stroke-width:1.5}
  .tre-servizi__voce p{padding-top:0;border-top:0;font-size:15.5px}
  .tre-servizi__voce p::before{display:none}

  .cartellini{justify-self:stretch;max-width:none;gap:14px;padding-top:58px}
  .cartellino{min-height:196px;padding:50px 16px 18px;box-shadow:inset 0 0 0 8px var(--fondo),inset 0 0 0 9px var(--riga),var(--sh-2)}
  .cartellino::before{top:17px}
  .cartellino::after{height:56px;bottom:calc(100% - 25px)}
  .cartellino--navy{margin-top:18px}
  .cartellino__prezzo b{font-size:40px}
  .cartellino__prezzo span{font-size:19px}
  .cartellino__voce{font-size:15px}

  .domande-strette .faq__item summary{padding:16px 2px;font-size:16px}
  .domande-strette .faq__body p{padding:0 2px 18px}
}

@media (prefers-reduced-motion:reduce){
  .js .percorso__tappe{--draw:1}
}