/* Il Referto — stile base. Nessuna risorsa esterna: font e immagini sono nel sito. */
@font-face{
  font-family:"Bebas Neue";
  src:url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --crema:#EFEBDD;      /* sfondo */
  --inchiostro:#1A2422; /* testo */
  --rosso:#B83A22;      /* rosso-arancio */
  --rosso-scuro:#7C2514;/* ombra del logo */
  --arancio:#E0891F;
  --verde:#1F5A4A;
  --caffe:#4A2C1A;
}
*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0;background:var(--crema);color:var(--inchiostro);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--verde);text-underline-offset:.15em}
a:hover{color:var(--rosso)}
a:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
h1,h2,h3,.display{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1}

/* Intestazione */
.site-header{border-bottom:2px solid var(--inchiostro)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--rosso)}
.brand img{width:2.4rem;height:2.4rem;display:block}
.brand span{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.7rem;letter-spacing:.03em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.nav a{color:var(--inchiostro);text-decoration:none;font-weight:600;padding:.25rem 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--rosso);color:var(--inchiostro)}

/* Copertina */
.hero{padding:3rem 0 2rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:2rem 3rem;align-items:center}
.hero .logo-anim{width:100%;max-width:15rem;height:auto;display:block;justify-self:center}
.titolo{
  margin:0;color:var(--rosso);font-size:clamp(4.5rem,15vw,9.5rem);
  text-shadow:1px 1px 0 var(--rosso-scuro),2px 2px 0 var(--rosso-scuro),3px 3px 0 var(--rosso-scuro),
              4px 4px 0 var(--rosso-scuro),5px 5px 0 var(--rosso-scuro),6px 6px 0 var(--rosso-scuro);
}
.motto{margin:1.25rem 0 0;font-size:clamp(1.3rem,3vw,1.75rem);font-style:italic;color:var(--verde);font-weight:600}
.intro{max-width:42rem;font-size:1.15rem;margin:1.5rem 0 0}

/* Tre porte d'ingresso */
.porte{padding:1rem 0 3rem}
.porte ul{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.porta{display:block;height:100%;padding:1.4rem 1.4rem 1.6rem;text-decoration:none;color:var(--inchiostro);
  background:#fff9;border:2px solid var(--inchiostro);border-top-width:10px;border-radius:.25rem}
.porta:hover{background:#fff}
.porta h2{margin:0 0 .5rem;font-size:2rem;color:var(--inchiostro)}
.porta p{margin:0}
.porta.archivio{border-top-color:var(--rosso)}
.porta.metodo{border-top-color:var(--verde)}
.porta.leggere{border-top-color:var(--arancio)}
.porta .vai{display:inline-block;margin-top:.9rem;font-weight:700;color:var(--verde)}
.porta:hover .vai{color:var(--rosso)}

/* Piè di pagina */
.site-footer{background:var(--inchiostro);color:var(--crema);padding:2rem 0;margin-top:2rem}
.site-footer a{color:var(--crema)}
.site-footer a:hover{color:var(--arancio)}
.site-footer ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.site-footer p{margin:.25rem 0;font-size:.95rem}

@media (max-width:40rem){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .logo-anim{max-width:9rem}
  .intro{margin-left:auto;margin-right:auto;text-align:left}
}

/* Pagine di testo */
.pagina{padding:2.5rem 0 1rem}
.testo{max-width:44rem}
.testo h1{color:var(--rosso);font-size:clamp(3.2rem,9vw,5rem);margin:0 0 1rem;
  text-shadow:1px 1px 0 var(--rosso-scuro),2px 2px 0 var(--rosso-scuro),3px 3px 0 var(--rosso-scuro),4px 4px 0 var(--rosso-scuro)}
.testo h2{font-size:2rem;margin:2.2rem 0 .6rem;color:var(--verde)}
.testo .lead{font-size:1.25rem;margin:0 0 1rem}
.testo li{margin:.55rem 0}
.testo .avviso{padding:1rem 1.2rem;border:2px dashed var(--inchiostro);background:#fff9;border-radius:.25rem}

/* Barre del logo: movimento leggero e irregolare (si ferma se il visitatore riduce il movimento) */
.logo-anim .barra{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .logo-anim .b1{animation:onda1 4.1s ease-in-out infinite}
  .logo-anim .b2{animation:onda2 5.3s ease-in-out -1.2s infinite}
  .logo-anim .b3{animation:onda3 3.7s ease-in-out -2.1s infinite}
}
@keyframes onda1{0%,100%{transform:scaleY(1)}22%{transform:scaleY(1.22)}51%{transform:scaleY(.82)}78%{transform:scaleY(1.12)}}
@keyframes onda2{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.9)}58%{transform:scaleY(1.07)}83%{transform:scaleY(.94)}}
@keyframes onda3{0%,100%{transform:scaleY(1)}18%{transform:scaleY(.8)}47%{transform:scaleY(1.2)}74%{transform:scaleY(.92)}}

/* Carte dei tipi di post (misure in unità u = 1/1080 della larghezza della carta, come in Canva) */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
.carte{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,27rem));gap:2.5rem;justify-content:center}
.carte li{margin:0}
.carta{display:block;position:relative;width:100%;aspect-ratio:4/5;cursor:pointer;container-type:inline-size;perspective:1800px}
.carta input{position:absolute;opacity:0;width:1px;height:1px}
.carta .interno{--u:calc(100cqw/1080);position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.carta:hover .interno{transform:translateY(-.6rem) scale(1.02)}
.carta input:checked ~ .interno{transform:rotateY(180deg)}
.carta:hover input:checked ~ .interno{transform:translateY(-.6rem) scale(1.02) rotateY(180deg)}
.carta input:focus-visible ~ .interno{outline:4px solid var(--arancio);outline-offset:6px}
.faccia{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--crema);overflow:hidden;
  box-shadow:0 .5rem 1.2rem #1a242240;transition:box-shadow .4s}
.carta:hover .faccia{box-shadow:0 1.1rem 1.8rem #1a242255}
.faccia::after{content:"";position:absolute;inset:0;border:calc(var(--u)*6) solid var(--inchiostro);pointer-events:none}
.faccia.retro{transform:rotateY(180deg)}
.faccia > *{position:absolute;display:block;margin:0}
.faccia .c{left:0;right:0;text-align:center}
.faccia .titolo-carta{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-synthesis:none;-webkit-text-stroke:calc(var(--u)*5) currentColor;color:var(--rosso);line-height:1;letter-spacing:0;white-space:nowrap}
.faccia .sottotitolo{font:italic 700 calc(var(--u)*64)/1.2 "Inter",system-ui,sans-serif;color:var(--verde)}
.faccia .filetto{height:calc(var(--u)*6);background:var(--rosso);left:calc(var(--u)*110);right:calc(var(--u)*110)}
.faccia .testo-breve{font:400 calc(var(--u)*56)/1.46 "Inter",system-ui,sans-serif;color:var(--inchiostro);left:calc(var(--u)*100);right:calc(var(--u)*100);text-align:center}
.faccia .testo-breve strong{font-weight:700}
.faccia .lente{width:calc(var(--u)*320);height:calc(var(--u)*320);left:calc(var(--u)*375);top:calc(var(--u)*1005)}
.faccia .num{font-family:"Bebas Neue",Impact,sans-serif;font-size:calc(var(--u)*150);line-height:1;color:var(--rosso);left:calc(var(--u)*108)}
.faccia .et{font-family:"Bebas Neue",Impact,sans-serif;font-size:calc(var(--u)*60);line-height:1;color:var(--verde);left:calc(var(--u)*216)}
.faccia .tx{font:400 calc(var(--u)*44)/1.45 "Inter",system-ui,sans-serif;color:var(--inchiostro);left:calc(var(--u)*216);width:calc(var(--u)*800)}
.faccia .tx strong{font-weight:700}
.faccia .nota{font:italic 400 calc(var(--u)*36)/1.35 "Inter",system-ui,sans-serif;color:var(--verde);left:calc(var(--u)*120);right:calc(var(--u)*120);text-align:center}
.suggerimento{text-align:center;font-size:.95rem;margin:0 0 1rem}
@media (prefers-reduced-motion:reduce){.carta .interno,.faccia{transition:none}}
.titolo-pagina{color:var(--rosso);font-size:clamp(3.2rem,9vw,5rem);margin:0 0 1rem;text-align:center;
  text-shadow:1px 1px 0 var(--rosso-scuro),2px 2px 0 var(--rosso-scuro),3px 3px 0 var(--rosso-scuro),4px 4px 0 var(--rosso-scuro)}
.lead.centro{text-align:center;font-size:1.15rem;max-width:40rem;margin:0 auto}

.faccia.fronte.arancio{background:var(--arancio)}
.arancio .titolo-carta{color:var(--crema)}
.arancio .sottotitolo,.arancio .testo-breve{color:var(--inchiostro)}
.arancio .filetto{background:var(--inchiostro)}
.arancio-retro .num{color:var(--arancio)}
.arancio-retro .filetto{background:var(--arancio)}

/* Pagine Dati e Fonti e Come leggere un Referto */
.mk h2{color:var(--rosso);font-size:2.3rem;margin:2.6rem 0 .6rem}
.mk .bozza{font-size:.8rem;color:var(--verde);font-style:italic}
.mk .indice{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.5rem 0 0;padding:0;list-style:none}
.mk .indice a{display:block;border:2px solid var(--inchiostro);padding:.3rem .7rem;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--inchiostro)}
.mk .indice a:hover{background:var(--inchiostro);color:var(--crema)}
.mk .referto{border:3px solid var(--inchiostro);background:#F8F6EE;padding:1.5rem 1.75rem;margin:1.5rem 0;box-shadow:.4rem .4rem 0 var(--inchiostro)}
.mk .referto .riga{display:grid;grid-template-columns:2.2rem 12rem 1fr;gap:.75rem;align-items:start;padding:.7rem 0;border-top:1px solid #1a242233}
.mk .referto .riga:first-of-type{border-top:0}
.mk .pin{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--rosso);color:var(--crema);font-family:"Bebas Neue",Impact,sans-serif;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.mk .et{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.35rem;color:var(--verde);letter-spacing:.02em}
.mk .qui{position:relative;outline:4px solid var(--inchiostro);outline-offset:3px;margin-top:1.4rem}
.mk .qui::before{content:"IL NOSTRO ESEMPIO";position:absolute;top:-1.55rem;left:-3px;background:var(--inchiostro);color:var(--crema);font:700 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.05em;padding:.3rem .5rem}
.mk .altri{opacity:.6}
.mk .nelcaso{margin:.8rem 0 0;padding:.5rem .9rem;border-left:6px solid var(--inchiostro);background:#1a24220d}
.mk .scala{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:1.6rem 0 .6rem}
.mk .scala div{padding:.8rem .5rem;text-align:center;color:#fff;font-family:"Bebas Neue",Impact,sans-serif;font-size:1.25rem;line-height:1.1;border:2px solid var(--inchiostro)}
.mk .scala small{display:block;font:400 .78rem/1.3 Inter,system-ui,sans-serif;margin-top:.4rem;color:#fff}
.mk .passi{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1.6rem 0 .6rem}
.mk .passi div{border:2px solid var(--inchiostro);padding:.8rem .6rem;text-align:center;background:var(--crema)}
.mk .passi b{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.3rem;color:var(--rosso);display:block;font-weight:400}
.mk .passi i{display:block;height:.6rem;margin-top:.5rem;background:linear-gradient(90deg,var(--rosso) var(--p),#1a242222 var(--p))}
.mk .tecniche{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem 1rem;margin:1.8rem 0 .6rem}
.mk .tecniche div{border:2px solid var(--inchiostro);padding:1rem;background:var(--crema)}
.mk .tecniche b{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.4rem;color:var(--rosso);font-weight:400;display:block}
.mk .tecniche em{display:block;margin-top:.4rem;font-size:.85rem;color:var(--verde)}
.mk .box{border-left:6px solid var(--arancio);padding:.4rem 1rem;margin:1rem 0;background:#e0891f14}
.mk .legenda{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.2rem 0 .3rem}
.chip{display:inline-block;font:700 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .55rem;border:2px solid var(--inchiostro);white-space:nowrap}
.chip.ve{background:var(--crema);color:var(--inchiostro)}.chip.di{background:#E0891F;color:var(--inchiostro)}.chip.co{background:#B83A22;color:#fff}.chip.me{background:#1F5A4A;color:#fff}.chip.ba{background:#4A2C1A;color:#fff}
.cartella{border:3px solid var(--inchiostro);background:#F8F6EE;margin:0 0 .9rem;box-shadow:.3rem .3rem 0 var(--inchiostro)}
.cartella summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.2rem 1fr auto auto 1.6rem;gap:.8rem;align-items:center;padding:.9rem 1rem}
.cartella summary::-webkit-details-marker{display:none}
.cartella summary::after{content:"+";font:700 1.6rem/1 Inter,system-ui,sans-serif;color:var(--rosso);text-align:center}
.cartella[open] summary::after{content:"–"}
.cartella summary:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}
.cartella .num{font-family:"Bebas Neue",Impact,sans-serif;font-size:2rem;color:var(--rosso);line-height:1}
.cartella .tit{font-weight:700;font-size:1.05rem}
.cartella .dt{font-size:.85rem;color:var(--verde)}
.cartella .in{border-top:2px solid var(--inchiostro);padding:1rem 1.2rem 1.2rem}
.cartella h4{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.5rem;color:var(--verde);font-weight:400;margin:1.1rem 0 .4rem;letter-spacing:.02em}
.fonti,.file{list-style:none;margin:0;padding:0}
.fonti li,.file li{display:grid;gap:.9rem;align-items:start;padding:.7rem 0;border-top:1px solid #1a242222}
.fonti li{grid-template-columns:7.2rem 1fr auto}.file li{grid-template-columns:3.2rem 1fr auto}
.fonti li:first-child,.file li:first-child{border-top:0}
.tag{font:700 .68rem/1.2 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .4rem;text-align:center;border:2px solid var(--inchiostro)}
.tag.p{background:var(--verde);color:#fff}.tag.d{background:var(--arancio);color:var(--inchiostro)}
.ico{font:400 1.2rem/1 "Bebas Neue",Impact,sans-serif;background:var(--inchiostro);color:var(--crema);text-align:center;padding:.55rem 0}
.fnota{font-size:.88rem;color:#1a2422cc}
.vai{font-weight:700;font-size:.88rem;white-space:nowrap}
.meta{font-size:.9rem}.claim{margin:.2rem 0}
.avviso{border:3px solid var(--inchiostro);border-left:10px solid var(--arancio);background:#F8F6EE;padding:1rem 1.3rem;margin:2.5rem 0 1rem}
.avviso h3{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.7rem;color:var(--rosso);margin:0 0 .4rem}
.avviso p{margin:.5rem 0}
@media(max-width:44rem){
 .mk .referto .riga{grid-template-columns:2.2rem 1fr}.mk .referto .riga>:nth-child(3){grid-column:1 / -1}
 .mk .scala{grid-template-columns:1fr}.mk .passi{grid-template-columns:1fr 1fr}
 .cartella summary{grid-template-columns:2.6rem 1fr 1.4rem;gap:.5rem}.cartella summary .chip,.cartella summary .dt{grid-column:2}
 .fonti li{grid-template-columns:1fr}.fonti li .tag{justify-self:start}.file li{grid-template-columns:3.2rem 1fr}.file li .vai{grid-column:2}
}
@media(max-width:44rem){.cartella summary .chip{justify-self:start}}

/* ---- aggiunte 12/11: scorrimento morbido, privacy, rettifiche, legenda ---- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
h2[id]{scroll-margin-top:1.5rem}
.bozza{font-size:.85em;color:var(--verde);font-style:italic}
.testo .meta{margin-top:2rem;color:var(--verde)}
.reg{width:100%;border-collapse:collapse;border:3px solid var(--inchiostro);background:#F8F6EE;margin:.5rem 0}
.reg th{background:var(--inchiostro);color:var(--crema);text-align:left;padding:.6rem .8rem;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.reg td{padding:.9rem .8rem;font-style:italic;color:var(--verde)}
.leg-t{font-weight:700;font-size:.85rem;align-self:center;margin-right:.3rem}