/* «ESPLORA WEBCAR» — IL MENU COMPLETO DELLA TESTATA (anteprima, 01/10).
   Le cinque voci della testata sono ancore della home: le altre venti pagine
   (team, partner, lavora con noi, officina, contatti…) si raggiungevano solo
   da sezioni sparse e dal footer. Questo e' lo strato che le porta tutte:
   fondo notte con la griglia luminosa dell'hero, tre «territori» (Auto,
   Servizi, WebCar), la ricerca vera verso lo store, la tessera viva delle
   offerte della settimana (numeri dal dato, vedi build-anteprima-settimana)
   e la tessera Mobivin.

   PERCHE' UN FOGLIO A PARTE, CARICATO DALLA TESTATA STESSA. Il guscio
   (tools/offers/anteprima-guscio.mjs) copia la testata della home in ogni
   pagina, ma non le loro <head>; e non tutte le pagine caricano v2.css
   (area-accesso.html ha un foglio indipendente, apposta). Il <link> e lo
   <script> stanno DENTRO <header class="testata">: dove arriva la testata
   arriva il suo menu, senza toccare una <head> per volta.

   I token sono quelli di v2.css; ogni var() porta il suo ripiego perche'
   area-accesso.css non li definisce tutti. Desktop da 1024: cinque voci +
   «Esplora WebCar», strato sotto la testata. Sotto 1024: hamburger, cassetto
   alto quanto lo schermo con le due CTA ferme in fondo. */

/* le cinque voci tornano solo da 1024: fra 760 e 1023 c'e' l'hamburger */
@media (max-width:1023px){.testata .menu{display:none}}

/* ── il bottone ──────────────────────────────────────────────────────── */
.testata .mt-apri{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;padding:0 15px 0 13px;margin-left:2px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fff;font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:700;font-size:12.5px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.testata .mt-apri:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.testata .mt-apri:focus-visible{outline:2px solid var(--ciano,#22D3EE);outline-offset:3px}
.testata .mt-apri[aria-expanded="true"]{background:#fff;color:var(--inchiostro,#0A1526);border-color:#fff}
.mt-icona{position:relative;display:block;width:18px;height:12px;flex:none}
.mt-icona i{position:absolute;left:0;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease,top .22s ease,width .22s ease}
.mt-icona i:nth-child(1){top:0;width:18px}
.mt-icona i:nth-child(2){top:5px;width:12px}
.mt-icona i:nth-child(3){top:10px;width:18px}
.mt-apri[aria-expanded="true"] .mt-icona i:nth-child(1){top:5px;transform:rotate(45deg)}
.mt-apri[aria-expanded="true"] .mt-icona i:nth-child(2){opacity:0}
.mt-apri[aria-expanded="true"] .mt-icona i:nth-child(3){top:5px;transform:rotate(-45deg)}
.mt-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:1023px){
  .testata .mt-apri{width:44px;padding:0}
  .mt-etichetta{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* a 390 logo + due bottoni + hamburger non entrano: «Scarica l'App» resta nel cassetto */
@media (max-width:419px){.testata nav > .btn.pieno{display:none}}

/* ── lo strato ───────────────────────────────────────────────────────── */
.mt-pannello{position:absolute;left:0;right:0;top:100%;color:#fff;color-scheme:dark;
  background:radial-gradient(90% 60% at 85% 0%,rgba(34,211,238,.13),transparent 60%),radial-gradient(120% 80% at 10% 0%,#17358A 0%,var(--notte,#0B1226) 58%);
  border-top:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  max-height:calc(100vh - var(--mt-alto,86px));max-height:calc(100dvh - var(--mt-alto,86px));overflow-y:auto;overscroll-behavior:contain;
  animation:mt-entra .2s cubic-bezier(.2,.7,.2,1)}
.mt-pannello:focus{outline:none}
.mt-pannello[hidden]{display:none}
/* la griglia luminosa dell'hero, la stessa trama da 44px */
.mt-pannello::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(80% 90% at 50% 0%,#000 25%,transparent 100%);-webkit-mask-image:radial-gradient(80% 90% at 50% 0%,#000 25%,transparent 100%)}
/* il filo elettrico sotto la testata */
.mt-pannello::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad,linear-gradient(135deg,#1663E0 0%,#22D3EE 100%));opacity:.9}
@keyframes mt-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* `.testata .wrap` e `.testata nav` (v2.css) darebbero allo strato altezza 60 e flex: qui si riprende il controllo */
.testata .mt-dentro{position:relative;width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--gutter,18px)}

/* la ricerca */
.mt-cerca{position:relative;display:flex;align-items:center;gap:10px;height:58px;padding:0 6px 0 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -30px rgba(34,211,238,.6);transition:border-color .2s ease,background .2s ease}
.mt-cerca:focus-within{border-color:var(--ciano,#22D3EE);background:rgba(255,255,255,.1)}
.mt-lente{width:20px;height:20px;flex:none;fill:none;stroke:var(--ciano,#22D3EE);stroke-width:2;stroke-linecap:round}
.mt-cerca input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:500 17px/1.2 var(--sans,"DM Sans",Arial,sans-serif);outline:none;-webkit-appearance:none;appearance:none}
.mt-cerca input::placeholder{color:rgba(255,255,255,.62)}
.mt-cerca input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.mt-tasto{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;font:600 12px/1 var(--mono,ui-monospace,Consolas,monospace);color:rgba(255,255,255,.75)}
.testata .mt-vai{flex:none;min-height:46px;padding:0 22px;font-size:14px}

/* il corpo: territori e tessere */
.mt-corpo{display:grid;gap:26px}
.testata .mt-gruppi{display:grid;gap:30px;align-items:start}
.mt-titolo{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.55) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mt-titolo span{font-family:var(--mono,ui-monospace,Consolas,monospace);font-weight:500;font-size:11px;letter-spacing:.14em;-webkit-text-fill-color:var(--ciano,#22D3EE);color:var(--ciano,#22D3EE)}
.mt-gruppo ul{list-style:none;margin:0;padding:0}
.mt-gruppo a{position:relative;display:grid;gap:3px;min-height:56px;padding:9px 34px 9px 0;border-radius:10px;transition:transform .2s ease}
.mt-gruppo a b{font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:600;font-size:21px;letter-spacing:-.025em;line-height:1.15;color:#fff;transition:color .2s ease}
.mt-gruppo a small{font-size:13px;line-height:1.35;color:rgba(255,255,255,.62)}
.mt-gruppo a::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2px solid var(--ciano,#22D3EE);border-right:2px solid var(--ciano,#22D3EE);transform:rotate(45deg);opacity:.35;transition:opacity .2s ease,transform .2s ease}
.mt-gruppo a:hover b{color:var(--ciano,#22D3EE)}
.mt-gruppo a:hover::after{opacity:1;transform:translateX(4px) rotate(45deg)}
.mt-gruppo a[aria-current="page"] b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 3px 0;border-radius:50%;background:var(--ciano,#22D3EE);box-shadow:0 0 12px var(--ciano,#22D3EE);vertical-align:middle}
.mt-pannello a:focus-visible,.mt-pannello button:focus-visible{outline:2px solid var(--ciano,#22D3EE);outline-offset:3px}

/* le tessere */
.mt-tessera{position:relative;display:grid;gap:6px;padding:20px 20px 18px;border-radius:var(--r,18px);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -40px rgba(34,211,238,.45);overflow:hidden}
.mt-tessera p{margin:0}
.mt-occhiello{display:flex;align-items:center;gap:8px;font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano,#22D3EE)}
.mt-occhiello img{width:22px;height:22px;border-radius:6px}
.mt-vivo{width:8px;height:8px;border-radius:50%;background:var(--lampo,#FF7A1A);box-shadow:0 0 0 0 rgba(255,122,26,.6);animation:mt-pulsa 2s ease-out infinite}
@keyframes mt-pulsa{0%{box-shadow:0 0 0 0 rgba(255,122,26,.55)}80%,100%{box-shadow:0 0 0 9px rgba(255,122,26,0)}}
.mt-settimana{border-color:transparent;background:linear-gradient(160deg,rgba(23,53,138,.9),rgba(11,18,38,.95)) padding-box,var(--grad,linear-gradient(135deg,#1663E0 0%,#22D3EE 100%)) border-box;transition:transform .2s ease}
.mt-settimana::before{content:"";position:absolute;right:-30%;top:-40%;width:80%;height:120%;background:radial-gradient(50% 50% at 50% 50%,rgba(34,211,238,.28),transparent 70%);pointer-events:none}
.mt-settimana:hover{transform:translateY(-2px)}
.mt-cifra{font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:700;font-size:17px;color:rgba(255,255,255,.85)}
.mt-cifra b{font-weight:800;font-size:44px;letter-spacing:-.05em;line-height:.95;color:#fff;margin-right:4px}
.mt-da{font-size:15px;color:rgba(255,255,255,.82)}
.mt-da b{font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:800;font-size:24px;letter-spacing:-.03em;background:var(--grad,linear-gradient(135deg,#1663E0 0%,#22D3EE 100%));-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.35)}
.mt-nota{font-size:12.5px;color:rgba(255,255,255,.66)}
.mt-freccia{margin-top:6px;font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:700;font-size:14px;color:#fff}
.mt-claim{font-family:var(--display,"Sora WebCar",Arial,sans-serif);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.mt-mobivin .btn{justify-self:start;margin-top:8px;min-height:44px}
.mt-scrivici{display:grid;gap:2px;padding:4px 2px}
.mt-scrivici a{display:block;padding:12px 0;line-height:20px;font-size:15px;color:rgba(255,255,255,.88);overflow-wrap:anywhere}
.mt-scrivici a:hover{color:var(--ciano,#22D3EE)}
.mt-cta{display:none}

/* ── la cascata: le voci entrano una dopo l'altra (≤35 ms l'una) ── */
.mt-pannello:not([hidden]) .mt-gruppo li,.mt-pannello:not([hidden]) .mt-tessera{animation:mt-voce .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--mt-i,0) * 35ms)}
@keyframes mt-voce{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── sotto 1024: il cassetto a tutto schermo ─────────────────────────── */
@media (max-width:1023px){
  .mt-pannello{height:calc(100vh - var(--mt-alto,86px));height:calc(100dvh - var(--mt-alto,86px));overflow:hidden}
  html.mt-aperto,html.mt-aperto body{overflow:hidden}
  .testata .mt-dentro{display:flex;flex-direction:column;height:100%;padding:0}
  .mt-cerca{margin:16px var(--gutter,18px) 4px;height:54px;flex:none}
  .testata .mt-vai{padding:0 16px}
  .mt-tasto{display:none}
  .mt-corpo{flex:1;min-height:0;grid-auto-rows:max-content;align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px var(--gutter,18px) 24px;gap:28px}
  .mt-titolo{font-size:30px}
  .mt-gruppo a{min-height:60px}
  .mt-gruppo a b{font-size:21px}
  .mt-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none;padding:12px var(--gutter,18px) calc(12px + env(safe-area-inset-bottom,0px));background:rgba(7,12,25,.92);border-top:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .testata .mt-cta .btn{min-height:50px;font-size:15px}
}
@media (min-width:640px) and (max-width:1023px){
  .testata .mt-gruppi{grid-template-columns:repeat(3,1fr);gap:24px}
  .mt-gruppo a b{font-size:19px}
  .mt-corpo{grid-template-columns:1fr 1fr;grid-template-areas:"sett mobi" "nav nav" "mail mail"}
  .mt-corpo > .mt-settimana{grid-area:sett}
  .mt-corpo > .mt-mobivin{grid-area:mobi}
  .mt-corpo > .mt-gruppi{grid-area:nav}
  .mt-corpo > .mt-scrivici{grid-area:mail}
}
/* ── da 1024: lo strato a tre territori + colonna delle tessere ───────── */
@media (min-width:1024px){
  .testata .mt-dentro{display:grid;gap:30px;padding-block:28px 36px}
  .mt-corpo{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(250px,.9fr);grid-template-areas:"nav nav nav sett" "nav nav nav mobi" "nav nav nav mail";column-gap:clamp(24px,3vw,44px);row-gap:16px;align-items:start}
  .mt-corpo > .mt-settimana{grid-area:sett}
  .mt-corpo > .mt-gruppi{grid-area:nav;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
  .mt-corpo > .mt-mobivin{grid-area:mobi}
  .mt-corpo > .mt-scrivici{grid-area:mail}
  .mt-titolo{font-size:clamp(30px,2.8vw,40px);margin-bottom:6px}
  .mt-gruppo a{min-height:58px;padding-block:8px}
  .mt-gruppo a b{font-size:clamp(18px,1.5vw,22px)}
  .mt-gruppo a small{font-size:12.5px}
  .mt-gruppo a:hover{transform:translateX(4px)}
}

@media (prefers-reduced-motion:reduce){
  .mt-pannello,.mt-pannello:not([hidden]) .mt-gruppo li,.mt-pannello:not([hidden]) .mt-tessera,.mt-vivo{animation:none}
  .mt-icona i,.mt-gruppo a,.mt-gruppo a::after,.mt-settimana,.testata .mt-apri{transition:none}
  .mt-gruppo a:hover,.mt-settimana:hover{transform:none}
}