/* Pezzi condivisi da tutte le pagine interne: barra e mega menu, footer con freccia verso WhatsApp e nome della
   pagina a particelle. Nel sito finale (Astro) diventano componenti. La home per ora ha i suoi. */
  .topnav { position:absolute; inset:24px 24px auto; display:flex; justify-content:space-between; align-items:center; z-index:5; }
  /* Barra in alto e mega menu: il puntino rosso del Menu si allarga e diventa il menu */
  .topnav { gap:16px; }
  .tn-logo img { height:40px; display:block; }
  .tn-menu { margin-left:auto; display:flex; align-items:center; gap:12px; background:none; border:1px solid rgba(212,210,210,.5); border-radius:999px; padding:10px 20px 10px 14px; color:var(--bone); font:500 12px var(--f-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
  .tn-dot { width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 14px rgba(254,30,52,.9); transition:transform .4s cubic-bezier(.3,1.6,.5,1); }
  .tn-menu:hover .tn-dot { transform:scale(1.6); }
  .tn-lbl { display:grid; height:1.2em; overflow:hidden; line-height:1.2; }
  .tn-lbl span { transition:transform .45s cubic-bezier(.7,0,.2,1); }
  .tn-lbl span + span { font-family:var(--f-serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:15px; }
  .tn-menu:hover .tn-lbl span { transform:translateY(-100%); }
  .mega { position:fixed; inset:0; z-index:70; }
  .mega[hidden] { display:none; }
  .mg-wipe, .mg-panel { position:absolute; inset:0; clip-path:circle(0 at var(--cx, 90%) var(--cy, 40px)); }
  .mg-wipe { background:var(--red); }
  .mg-panel { background:var(--void); display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(280px, 1fr); grid-template-rows:auto 1fr; gap:0 clamp(24px, 5vw, 80px); padding:24px clamp(16px, 4vw, 56px) clamp(24px, 4vw, 48px); overflow-y:auto; }
  .mg-bar { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(24px, 4vh, 56px); }
  .mg-bar img { height:40px; }
  .mg-close { display:flex; align-items:center; gap:12px; background:none; border:1px solid rgba(212,210,210,.5); border-radius:999px; padding:10px 18px; color:var(--bone); font:500 12px var(--f-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
  .mg-close i { position:relative; width:12px; height:12px; }
  .mg-close i::before, .mg-close i::after { content:""; position:absolute; left:0; top:5px; width:12px; height:2px; background:var(--red); transform:rotate(45deg); }
  .mg-close i::after { transform:rotate(-45deg); }
  .mg-main { position:static; inset:auto; display:block; align-self:center; }
  .mg-list { list-style:none; padding:0; }
  .mg-list > li { border-top:1px solid #2c2b2b; }
  .mg-link { display:flex; align-items:baseline; gap:18px; padding:.12em 0 .02em; color:var(--bone); text-decoration:none; font-weight:700; text-transform:uppercase; font-size:clamp(34px, min(6.4vw, 8.2vh), 104px); line-height:.95; letter-spacing:-.06em; overflow:hidden; }
  .mg-n { font:500 11px var(--f-sans); letter-spacing:.2em; color:#8a8888; transform:translateY(-1.2em); flex:none; width:2.4em; }
  .mg-w { display:inline-flex; }
  .mg-w .ch { display:inline-block; }
  .mg-w .ch.orn { font-family:var(--f-orn); font-weight:400; text-transform:none; color:var(--red); letter-spacing:0; }
  .mg-link:hover, .mg-link:focus-visible, li.on > .mg-link { color:var(--bone); }
  .mg-list > li:not(.on) .mg-link { color:#5a5858; }
  .mega:not(.hovering) .mg-list > li .mg-link { color:var(--bone); }
  .mg-sub { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 14px calc(2.4em * 11 / 16 + 18px); }
  .mg-sub a { font-size:13px; color:var(--ash); text-decoration:none; border:1px solid #393939; border-radius:999px; padding:7px 14px; }
  .mg-link:focus-visible, .mg-sub a:focus-visible, .mg-close:focus-visible, .tn-menu:focus-visible { outline:2px solid var(--red); outline-offset:4px; border-radius:6px; }
  .mg-sub a:hover { border-color:var(--red); color:var(--bone); }
  .mg-side { display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding-bottom:8px; }
  .mg-desc { display:flex; flex-direction:column; gap:14px; margin-top:12vh; }
  .mg-dn { font-family:var(--f-orn); color:var(--red); font-size:clamp(64px, 8vw, 120px); line-height:.8; }
  .mg-dt { font-family:var(--f-serif); font-style:italic; font-size:clamp(22px, 2.2vw, 32px); line-height:1.15; max-width:22ch; }
  .mg-contact { display:flex; flex-direction:column; gap:10px; }
  .mg-contact > a { color:var(--bone); text-decoration:none; font-size:16px; }
  .mg-contact > a:hover { color:var(--red); }
  .mg-wa { display:flex !important; align-items:center; gap:16px; margin-bottom:10px; font-size:18px !important; }
  .mg-wa .wa-ic { width:64px; }
  .mg-wa small { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8a8888; margin-top:3px; }
  .mg-eco { margin-top:12px; font-size:13px; color:#8a8888; }
  .mg-eco a { color:var(--ash); text-decoration:none; margin-left:8px; }
  @media (max-width:900px) {
    .tn-logo img { height:32px; } .topnav .cta { display:none; }
    .mg-panel { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
    .mg-link { font-size:clamp(40px, 13vw, 64px); padding:.16em 0 .04em; }
    .mg-n { display:none; }
    .mg-sub { flex-wrap:nowrap; overflow-x:auto; padding:0 0 14px; scrollbar-width:none; margin-right:-16px; }
    .mg-sub a { flex:none; }
    .mg-desc { margin-top:28px; flex-direction:row; align-items:flex-end; gap:16px; }
    .mg-dn { font-size:64px; }
    .mg-dt { font-size:19px; }
    .mega:not(.hovering) .mg-list > li:not(.on) .mg-link { color:#5a5858; }
  }
  .cta { border:1px solid var(--ash); border-radius:8px; padding:12px 24px; font-size:12px; letter-spacing:.071em; text-transform:uppercase; color:var(--bone); text-decoration:none; }
  /* footer: freccia verso WhatsApp e scritta a particelle (come nella home) */
  .sfoot { padding:clamp(80px, 12vh, 140px) clamp(16px, 5vw, 72px) 0; border-top:1px solid var(--line); }
  .sfoot h2 { font-weight:700; text-transform:uppercase; font-size:clamp(40px, 7vw, 116px); line-height:.9; letter-spacing:-.065em; }
  .sfoot h2 i { font-family:var(--f-serif); font-weight:300; text-transform:none; letter-spacing:-.02em; font-size:.42em; vertical-align:.55em; margin-right:.25em; }
  .foot-top { position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:36px 48px; }
  .foot-top .foot-cta { grid-column:1; justify-self:start; color:var(--bone); text-decoration:none; font-size:12px; letter-spacing:.071em; text-transform:uppercase; border:1px solid var(--ash); border-radius:8px; padding:12px 24px; }
  .foot-top .foot-cta:hover { border-color:var(--red); }
  .wa-btn { grid-column:2; grid-row:1; display:flex; align-items:center; gap:20px; color:var(--bone); text-decoration:none; margin-bottom:.4em; }
  .wa-ic { position:relative; flex:none; width:clamp(76px, 7.5vw, 112px); aspect-ratio:1; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 0 40px rgba(254,30,52,.45); transition:transform .4s cubic-bezier(.3,1.6,.5,1); }
  .wa-ic svg { width:48%; fill:var(--bone); }
  .wa-ic::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--red); animation:wa-ping 2.4s ease-out infinite; }
  @keyframes wa-ping { from { transform:scale(1); opacity:.7; } to { transform:scale(1.7); opacity:0; } }
  .wa-btn:hover .wa-ic { transform:scale(1.08) rotate(-8deg); }
  .wa-txt b { display:block; font-size:clamp(17px, 1.6vw, 22px); font-weight:500; }
  .wa-txt small { display:block; margin-top:4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--iron); }
  .foot-arrow { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .fa-line, .fa-head { fill:none; stroke:var(--red); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
  .sfoot .mini-foot { margin-top:clamp(56px, 8vw, 96px); padding:18px 0; }
  .foot-word { display:block; width:100%; }
  @media (max-width:900px) { .foot-top { grid-template-columns:1fr; } .wa-btn { grid-column:1; grid-row:auto; margin:24px 0 0 auto; } }
  @media (prefers-reduced-motion:reduce) { .wa-ic::after { animation:none; } }
  .mini-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:22px clamp(16px, 5vw, 72px); border-top:1px solid var(--line); font-size:12px; color:var(--iron); }
  .mini-foot a { color:var(--iron); text-decoration:none; margin-left:16px; }