/* Titoli di chiusura (.end h2): le parole salgono da una maschera quando la fascia entra nella vista,
   poi una luce azzurra attraversa piano la riga a contorno. Solo con JavaScript attivo e senza "riduci movimento" (assets/fine.js). */
.end h2.fine .fw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.06em 0.16em; margin: -0.1em -0.06em -0.16em; }
.end h2.fine .fw > span { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.7s ease; transition-delay: var(--d, 0ms); }
.end h2.fine-on .fw > span { transform: none; opacity: 1; }
.end h2.fine-on i { background: linear-gradient(100deg, rgba(46, 168, 240, 0) 42%, rgba(46, 168, 240, 0.6) 50%, rgba(46, 168, 240, 0) 58%) no-repeat; background-size: 300% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; animation: fine-luce 9s ease-in-out var(--sweep, 1.5s) infinite; }
@keyframes fine-luce { 0% { background-position: 120% 0; } 30%, 100% { background-position: -20% 0; } }
@media print { .end h2.fine .fw > span { transform: none; opacity: 1; } }
/* a word wider than the column (other languages, on the phone) goes to a new line instead of widening the page; fine.js shrinks the title */
.end h2 { overflow-wrap: break-word; }


/* ---------- Logo (16 ottobre 2026): il logo dell'azienda al posto del testo del mockup, nel menu ---------- */
header.nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; height: 28px; width: auto; }

/* ---------- Contatti diretti (16 ottobre 2026): WhatsApp, Telegram ed email in basso a destra su ogni pagina; piccoli, con il
   nome che compare al passaggio del mouse. Sotto il menu aperto (z-index 60, assets/esploso.css). ---------- */
.rapidi { position: fixed; z-index: 57; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.rapidi a { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.rapidi a:hover, .rapidi a:focus-visible { transform: scale(1.1); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.22); outline: none; }
.rapidi svg { width: 22px; height: 22px; }
.rapidi .r-wa { background: #25D366; }
.rapidi .r-tg { background: #229ED9; }
.rapidi .r-mail { background: #2EA8F0; color: #04121E; }
.rapidi a::before { content: attr(data-label); position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 10px; white-space: nowrap; background: #070C14; border: 1px solid #22344A; color: #E9F1F8;
  font: 500 12px/1 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.rapidi a:hover::before, .rapidi a:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
/* the name of the building at the bottom right of the home hero would end under the buttons (hero-scroll.css comes later, hence html) */
html .b1p-hero .bh-foot { padding-right: calc(72px + env(safe-area-inset-right, 0px)); }
/* on the phone the four steps get columns as wide as their words, spread over the line: equal columns are too narrow for
   longer words in other languages ("Construction") */
@media (max-width: 820px) { html .b1p-hero .bh-steps { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 10px; } }

/* ---------- Piede (16 ottobre 2026): uno per tutto il sito, dopo il contenuto. In alto una fascia di punti che ondeggia e si accende
   vicino al puntatore (canvas, assets/fine.js); i gruppi entrano quando il piede arriva nella vista; i link si sottolineano. ---------- */
.piede { position: relative; border-top: 1px solid #22344A; background: linear-gradient(180deg, rgba(46, 168, 240, 0.06), rgba(7, 12, 20, 0) 260px), #070C14; color: #9DB0C4; overflow: hidden; }
.piede-firma { display: block; width: 100%; height: clamp(150px, 19vw, 290px); margin: 0 0 clamp(28px, 4vw, 56px); touch-action: pan-y; }
/* the logo made of points replaces the logo in image (fine.js); the image stays without script */
.piede.piede-firma-on .piede-logo { display: none; }
@media (min-width: 961px) { .piede.piede-firma-on .piede-top { grid-template-columns: minmax(0, 1fr) auto; } }
.piede-in { position: relative; max-width: 1440px; margin-inline: auto; padding: clamp(40px, 5vw, 72px) clamp(16px, 3.4vw, 48px) calc(28px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.piede-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid #22344A; }
.piede-logo { display: inline-flex; }
.piede-logo img { display: block; height: 32px; width: auto; }
.piede-claim { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; color: #9DB0C4; text-wrap: pretty; }
.piede-cta { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; background: #2EA8F0; color: #04121E; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color 0.2s ease, gap 0.25s ease; }
.piede-cta:hover, .piede-cta:focus-visible { background: #6CC4F6; gap: 18px; }
.piede-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); padding-block: clamp(32px, 4vw, 52px); }
.piede-tit { margin: 0 0 16px; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #2EA8F0; }
.piede ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.piede ul a { display: inline-block; padding: 5px 0; color: #E9F1F8; font-size: 15px; line-height: 1.35; background: linear-gradient(#2EA8F0, #2EA8F0) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease, color 0.2s ease; }
.piede ul a:hover, .piede ul a:focus-visible { color: #2EA8F0; background-size: 100% 1px; }
.piede-qualita > a { display: inline-block; transition: transform 0.25s ease; }
.piede-qualita > a:hover { transform: translateY(-3px); }
.piede-qualita img { display: block; height: 72px; width: auto; }
.piede-qualita p { margin: 12px 0 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.6; letter-spacing: 0.06em; }
.piede-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding: 22px 64px 0 0; border-top: 1px solid #22344A; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.04em; }
.piede-base .foot-legal { margin: 0; flex: 1 1 520px; line-height: 1.6; }
.piede-leg { margin: 0; display: flex; align-items: center; gap: 20px; }
.piede-leg a { color: #9DB0C4; transition: color 0.2s ease; }
.piede-leg a:hover, .piede-leg a:focus-visible { color: #E9F1F8; }
.piede-su { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid #22344A; background: none; color: #E9F1F8; font: inherit; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.piede-su:hover, .piede-su:focus-visible { border-color: #2EA8F0; color: #2EA8F0; }
.piede-su svg { transition: transform 0.25s ease; }
.piede-su:hover svg { transform: translateY(-3px); }
.piede.piede-js .piede-top > *, .piede.piede-js .piede-gruppo { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1); }
.piede.piede-on .piede-top > *, .piede.piede-on .piede-gruppo { opacity: 1; transform: none; }
.piede.piede-on .piede-top > :nth-child(2) { transition-delay: 0.08s; }
.piede.piede-on .piede-top > :nth-child(3) { transition-delay: 0.16s; }
.piede.piede-on .piede-gruppo:nth-child(2) { transition-delay: 0.1s; }
.piede.piede-on .piede-gruppo:nth-child(3) { transition-delay: 0.2s; }
.piede.piede-on .piede-gruppo:nth-child(4) { transition-delay: 0.3s; }
@media (max-width: 960px) { .piede-top { grid-template-columns: minmax(0, 1fr); justify-items: start; } .piede-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede-in { padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)); } .piede-base { padding-right: 0; } }   /* the last line can scroll above the contact buttons */
@media (max-width: 420px) { .piede-cta { width: 100%; box-sizing: border-box; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) {
  .rapidi a, .rapidi a::before, .piede-cta, .piede ul a, .piede-su svg { transition: none; }
  .piede.piede-js .piede-top > *, .piede.piede-js .piede-gruppo { opacity: 1; transform: none; transition: none; }
}
@media print { .rapidi, .piede-firma { display: none; } }

/* ---------- Lingua (17 ottobre 2026): selettore con le bandiere che mostra la lingua corrente (build.py, switch). Nella barra una
   tendina (<details>): bandiera e sigla della lingua della pagina, si apre sulle lingue con il nome; nel menu aperto le sigle IT / EN
   (assets/esploso.css). ---------- */
.bandiera { display: block; flex: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(233, 241, 248, 0.28); }
.bandiera-codice { display: flex; align-items: center; justify-content: center; font-size: 8px; color: #E9F1F8; background: #22344A; }
details.lingua { position: relative; }
details.lingua > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; box-sizing: border-box; border: 1px solid #22344A;
  color: #E9F1F8; cursor: pointer; font: 500 12px/1 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em; user-select: none; transition: border-color 0.2s ease; }
details.lingua > summary::-webkit-details-marker { display: none; }
details.lingua > summary:hover, details.lingua > summary:focus-visible, details.lingua[open] > summary { border-color: #2EA8F0; outline: none; }
.lingua-freccia { color: #9DB0C4; transition: transform 0.2s ease; }
details.lingua[open] .lingua-freccia { transform: rotate(180deg); }
details.lingua ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 176px; margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  background: #070C14; border: 1px solid #22344A; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
details.lingua ul a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: #E9F1F8; font-size: 15px; font-weight: 600; }
details.lingua ul a:hover, details.lingua ul a:focus-visible { background: rgba(46, 168, 240, 0.12); outline: none; }
details.lingua ul a[aria-current] { color: #2EA8F0; }
details.lingua ul a[aria-current]::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #2EA8F0; }
@media (max-width: 1180px) { header.nav .lingua { margin-left: auto; } header.nav .lingua + .cta { margin-left: 0; } }
@media print { .lingua { display: none; } }
/* on the phone the bar holds only logo and Contattaci, with the round menu button: the other language stays in the open menu,
   and under 400 px the logo is a little smaller (at 360 px the logo of 16 October sent the menu button to a second line) */
@media (max-width: 520px) { header.nav .lingua { display: none; } header.nav .lingua + .cta { margin-left: auto; } }
@media (max-width: 400px) { header.nav .logo img { height: 22px; } }