/* TaTech Informatica · base comune a tutte le pagine (token, caratteri, pulsanti, testata con mega-menu, piede).
   Concept «La traccia»: il rosso segna solo quello che facciamo noi. Componenti in componenti.css, home in p-home.css. */
:root{
  --carta:#F7F6F3;--bianco:#FFFFFF;--sabbia:#EFEDE8;--linea:#E2E0DA;--grafite:#17181C;--tech:#3D3D3D;--ferro:#565A63;
  --rosso:#D01124;--rosso-scuro:#A30D1C;--rosa:#FCEBED;--notte:#121317;--notte-2:#1D1F25;--nebbia:#C8CAD0;--cenere:#9A9DA6;--brace:#FF6F7C;
  --f-tit:'Schibsted Grotesk',system-ui,sans-serif;--f-txt:'Atkinson Hyperlegible Next',system-ui,sans-serif;--f-mono:'Atkinson Hyperlegible Mono',ui-monospace,monospace;
  --gut:clamp(20px,4vw,48px);--max:1280px;--r:14px;--r-foto:20px;
  --ombra:0 30px 60px -30px rgba(23,24,28,.35);
  --testata:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carta);color:var(--grafite);font:400 18px/1.6 var(--f-txt);overflow-x:clip}
@media (max-width:700px){body{font-size:17px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-tit);margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:12px;top:-60px;z-index:200;background:var(--grafite);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.salta:focus{top:12px}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ico{width:20px;height:20px;flex:none}
.foto{display:block;background:var(--ph,var(--sabbia))}
.foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}

/* etichetta con il cursore */
.et{display:flex;align-items:center;gap:10px;font:500 13px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rosso);margin-bottom:18px}
.et i{width:3px;height:16px;background:var(--rosso);flex:none;transform-origin:50% 100%}
.et-scuro{color:var(--brace)}.et-scuro i{background:var(--brace)}
.h2{font-size:clamp(34px,4.2vw,58px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.sotto{font-size:clamp(18px,1.4vw,20px);color:var(--ferro);max-width:56ch;margin-top:18px}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 17px/1 var(--f-txt);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn-rosso{background:var(--rosso);color:#fff}
.btn-rosso:hover{background:var(--rosso-scuro)}
.btn-bordo{border-color:var(--grafite);color:var(--grafite);background:transparent}
.btn-bordo:hover{background:var(--grafite);color:#fff}
.btn-scuro{background:var(--grafite);color:#fff}
.btn-scuro:hover{background:#000}
.btn-s{min-height:42px;padding:0 20px;font-size:15px}
.btn:active{transform:translateY(1px)}


/* cursore che scrive (fine dei titoli) */
.cursore{display:inline-block;width:.07em;height:.82em;background:var(--rosso);margin-left:.06em;vertical-align:-.04em;animation:lampo 1s steps(1) 3}
@keyframes lampo{50%{opacity:0}}
.ico-ext{width:13px;height:13px;flex:none;margin-left:5px;vertical-align:-1px;opacity:.75}

/* ---------- testata ---------- */
.testata{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .25s,box-shadow .25s}
.testata-in{display:flex;align-items:center;gap:28px;height:var(--testata);transition:height .25s}
.testata.scorre,.testata.mega-aperto{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--linea);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
.testata.scorre .testata-in{height:64px}
.logo{display:block;flex:none}
.logo img{height:34px;width:auto}
.menu{margin-left:auto}
.menu>ul{display:flex;align-items:center;gap:24px}
.menu a,.menu-srv{display:inline-flex;align-items:center;font:500 16px/1 var(--f-txt);text-decoration:none;padding:8px 0;background:linear-gradient(var(--rosso),var(--rosso)) 0 100%/0 2px no-repeat;transition:background-size .25s;white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"],.menu-srv:hover,.menu-srv.attivo,.menu-srv[aria-expanded="true"]{background-size:100% 2px}
.menu-srv{border:0;cursor:pointer;gap:4px;color:var(--grafite);background-color:transparent}
.ico-giu{width:16px;height:16px;transition:transform .25s}
[aria-expanded="true"]>.ico-giu{transform:rotate(180deg)}
.testata-az{display:flex;align-items:center;gap:16px}
.t-ico{display:inline-flex;align-items:center;gap:7px;color:var(--ferro);font-size:15px;text-decoration:none;white-space:nowrap;min-height:40px}
.t-ico:hover,.t-ico[aria-current="page"]{color:var(--grafite)}
.t-cta .ico{width:18px;height:18px}
.t-tel,.menu-apri{display:none}
.menu-m{display:none}
@media (max-width:1320px){.t-ico span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.testata-az{gap:12px}}   /* solo icona, il nome resta per i lettori di schermo */
@media (max-width:1180px){.menu-cat{display:none}.menu>ul{gap:20px}.testata-in{gap:22px}}

/* mega-menu «Servizi» */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bianco);border-top:1px solid var(--linea);box-shadow:0 30px 50px -30px rgba(23,24,28,.35);padding:28px 0 0}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mega-t{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ferro);padding-bottom:10px;border-bottom:1px solid var(--linea)}
.mega-gr li{border-bottom:1px solid var(--linea)}
.mega-gr a{display:block;padding:14px 0;text-decoration:none}
.mg-n{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 19px/1.2 var(--f-tit)}
.mg-n .fr{width:18px;height:11px;flex:none;color:var(--rosso);transition:transform .25s}
.mg-d{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:var(--ferro)}
.mega-gr a:hover .mg-n,.mega-gr a[aria-current="page"] .mg-n{color:var(--rosso-scuro)}
.mega-gr a:hover .fr{transform:translateX(4px)}
.mega-piede{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:22px;padding:16px 0 20px;border-top:1px solid var(--linea);font-size:15px;color:var(--ferro)}
.mega-piede a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:36px}
.mega-piede b{color:var(--grafite);font-family:var(--f-tit)}
.mega-piede .fr{width:16px;height:10px;color:var(--rosso)}
.mega-piede a:hover b{color:var(--rosso-scuro)}

@media (max-width:1060px){
  :root{--testata:64px}
  .menu,.t-ico,.testata-az .t-cta,.mega{display:none!important}
  .testata-az{margin-left:auto;gap:6px}
  .logo img{height:28px}
  .t-tel,.menu-apri{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:0;background:transparent;cursor:pointer;color:var(--grafite)}
  .t-tel .ico{width:22px;height:22px}
  .hamb{display:grid;gap:6px;width:22px}.hamb i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
  .menu-apri[aria-expanded="true"] .hamb i:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-apri[aria-expanded="true"] .hamb i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .menu-m:not([hidden]){display:block;background:var(--bianco);border-top:1px solid var(--linea);box-shadow:0 20px 40px -20px rgba(0,0,0,.3);padding:8px var(--gut) 24px;max-height:calc(100svh - 64px);overflow:auto;overscroll-behavior:contain}
  .testata:has(.menu-m:not([hidden])){background:var(--bianco)}
  .mm-l>li>a,.mm-srv{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0;font:700 22px/1.2 var(--f-tit);text-decoration:none;border:0;border-bottom:1px solid var(--linea);background:none;cursor:pointer;color:var(--grafite);text-align:left}
  .mm-l a[aria-current="page"],.mm-srv.attivo{color:var(--rosso)}
  .mm-srv .ico-giu{width:22px;height:22px}
  .mm-sub{padding:4px 0 10px 14px;border-bottom:1px solid var(--linea);border-left:2.5px solid var(--rosso);margin:6px 0 0}
  .mm-sub a{display:block;padding:9px 0;font:700 18px/1.25 var(--f-tit);text-decoration:none}
  .mm-sub li:first-child a{font:500 14px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ferro)}
  .mm-sub a[aria-current="page"]{color:var(--rosso)}
  .menu-m-az{display:grid;gap:4px;margin-top:18px}
  .menu-m-az .btn{margin-bottom:10px}
  .menu-m-az a:not(.btn){display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;color:var(--ferro)}
}

/* ---------- piede ---------- */
.piede{background:var(--notte);color:var(--cenere);border-top:1px solid var(--notte-2);padding:56px 0 32px;font-size:15px}
.piede-in{display:grid;grid-template-columns:4fr 3fr 2fr 3fr;gap:32px}
.pd-a img{height:34px;width:auto;margin-bottom:16px}
.pd-a p{max-width:34em}
.pd-a p+p{margin-top:14px}
.pd-dati{color:var(--nebbia)}
.pd-t{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nebbia);margin-bottom:10px}
.pd-col ul{display:grid;gap:2px}
.pd-col a{display:inline-flex;align-items:center;gap:8px;color:var(--nebbia);text-decoration:none;min-height:32px}
.pd-col a:hover,.pd-col a[aria-current="page"]{color:var(--brace)}
.pd-col .ico{width:18px;height:18px}
.piede-fondo{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--notte-2)}
.piede-fondo a{color:var(--nebbia)}.piede-fondo a:hover{color:var(--brace)}
@media (max-width:1023px){.piede-in{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.piede-in{grid-template-columns:1fr}.piede-fondo{flex-direction:column;align-items:flex-start}}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){.cursore{animation:none}*{transition-duration:.01ms!important}}
.nw{white-space:nowrap}
