/* ==========================================================================
   Nixsa Care · sito di presentazione (versione 2)
   Linguaggio: fotografia a tutta pagina con sfumature morbide, molto spazio,
   un solo carattere sans (Plus Jakarta Sans), angoli ampi, interfaccia vera
   inserita dentro le fotografie. Colori Nixsa: navy e blu, oro solo come tocco.
   ========================================================================== */
:root {
  --ink: #0E1A2B; --navy: #14243B; --navy-2: #0B1524; --blue: #2B4870; --blue-2: #3D6194; --sky: #8FB0D9;
  --gold: #B8892F; --gold-l: #E2BC6A; --gold-s: #F5EBD6;
  --ink-2: #344055; --muted: #667085; --muted-2: #8A93A3;
  --bg: #FFFFFF; --bg-2: #F5F6F8; --tint: #EDF2F8; --paper: #FAF9F6; --line: #E6E9EE; --line-2: #D3D8E0;
  --ok: #2F7D5B; --ok-s: #E5F2EB; --warn: #B7791F; --warn-s: #FBF1DE; --ko: #B4443A; --ko-s: #F9E6E3;
  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --wrap: 1240px; --pad: clamp(20px, 4vw, 48px); --hh: 72px; --r: 10px; --R: 24px;
  --shadow: 0 1px 2px rgba(14,26,43,.05), 0 12px 32px -12px rgba(14,26,43,.18);
  --shadow-l: 0 2px 6px rgba(14,26,43,.06), 0 40px 80px -28px rgba(14,26,43,.38);
  --ease: cubic-bezier(.22, .7, .15, 1);
  --grid: none;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.menu-aperto { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
[hidden] { display: none !important; }
.salta { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 600; }
.salta:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.ico { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tipografia ---------- */
.etichetta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--blue); }
.etichetta i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.chiaro .etichetta, .scuro .etichetta { color: var(--gold-l); }
.titolo-1 { font-size: clamp(2.5rem, 5vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.titolo-2 { font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.titolo-3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.titolo-2 span, .titolo-3 span { color: var(--muted-2); }
.testo { margin-top: 18px; max-width: 54ch; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.7; color: var(--muted); }
.scuro .titolo-2, .scuro .titolo-3 { color: #fff; }
.scuro .titolo-2 span, .scuro .titolo-3 span { color: rgba(255,255,255,.5); }
.scuro .testo { color: rgba(255,255,255,.7); }

/* ---------- Bottoni (a pillola) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 99px; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn .ico { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 16px; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn--blu, .btn--scuro { background: var(--navy); color: #fff; }
.btn--blu:hover, .btn--scuro:hover { background: var(--blue); }
.btn--bianco { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
.btn--bianco:hover { transform: translateY(-1px); }
.btn--vetro { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--vetro:hover { background: rgba(255,255,255,.22); }
.btn--bordo { border-color: var(--line-2); color: var(--ink); background: #fff; }
.btn--bordo:hover { border-color: var(--ink); }
.btn--oro { background: var(--gold-l); color: var(--ink); }
.btn--oro:hover { background: #ECC87A; }
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--blue); }
.link-freccia .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-freccia:hover .ico { transform: translateX(3px); }

/* ---------- Testata galleggiante ---------- */
.testata { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.testata__in { pointer-events: auto; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 22px; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 8px 30px -12px rgba(14,26,43,.25); transition: background .3s; }
.testata.scorsa .testata__in { background: rgba(255,255,255,.94); }
.marchio { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marchio img { width: 92px; height: auto; }
.marchio span { padding-left: 12px; border-left: 1px solid var(--line-2); font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.menu { display: flex; gap: 4px; margin-left: auto; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.menu a { padding: 8px 14px; border-radius: 99px; transition: background .2s; }
.menu a:hover { background: var(--bg-2); color: var(--ink); }
.testata .btn { min-height: 42px; padding: 0 20px; font-size: 14.5px; border-radius: 12px; }
.hamburger { display: none; width: 44px; height: 44px; margin-left: auto; align-items: center; justify-content: center; color: var(--ink); }
.hamburger .ico { width: 24px; height: 24px; }
.menu__cta { display: none; }
@media (max-width: 1060px) {
  .menu { display: none; }
  .hamburger { display: inline-flex; }
  .testata .btn { display: none; }
  .menu.aperto { display: flex; position: fixed; top: 84px; left: var(--pad); right: var(--pad); flex-direction: column; gap: 0; padding: 12px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-l); font-size: 18px; }
  .menu.aperto a { padding: 14px 12px; border-radius: 10px; }
  .menu.aperto .menu__cta { display: flex; margin-top: 8px; color: #fff; }
}
@media (max-width: 460px) { .marchio img { width: 78px; } .marchio span { font-size: 15px; } .testata { top: 10px; } }

/* ---------- Apertura: foto | pianta del nucleo ---------- */
.apertura { position: relative; min-height: max(780px, 100svh); display: grid; grid-template-columns: 1fr 1fr; background: var(--navy-2); color: #fff; overflow: hidden; }
.apertura__foto { position: relative; overflow: hidden; }
.apertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.06); animation: respira 18s var(--ease) infinite alternate; }
@keyframes respira { to { transform: scale(1.0); } }
.apertura__pianta { position: relative; background: radial-gradient(900px 600px at 60% 60%, #1A2E4B 0%, var(--navy-2) 70%); }
.apertura__pianta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(143,176,217,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,217,.06) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(closest-side, #000 50%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); }
.apertura__cucitura { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.35) 30%, rgba(255,255,255,.35) 70%, transparent); z-index: 2; }
.apertura__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,21,36,.62) 0%, rgba(11,21,36,.25) 34%, rgba(11,21,36,0) 55%, rgba(11,21,36,.5) 100%); }
.apertura__testo { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(108px, 14vh, 160px); text-align: center; padding-inline: var(--pad); }
.apertura__testo .titolo-1 { max-width: 15ch; margin-inline: auto; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.apertura__testo .testo { margin: 20px auto 0; color: rgba(255,255,255,.82); max-width: 52ch; text-align: center; }
.apertura__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.apertura__piede { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; background: rgba(11,21,36,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; color: rgba(255,255,255,.85); white-space: nowrap; }
.apertura__piede b { color: #fff; font-weight: 600; }
.apertura .pianta { position: absolute; left: 50%; bottom: 84px; width: min(540px, 86%, calc((100svh - 520px) * 1.55)); transform: translateX(-50%); }
.apertura .pianta svg { width: 100%; height: auto; overflow: visible; }
.apertura .pianta .muro { fill: none; stroke: rgba(143,176,217,.55); stroke-width: 1.4; }
.apertura .pianta .stanza { fill: rgba(143,176,217,.05); stroke: rgba(143,176,217,.4); stroke-width: 1; transition: fill .6s; }
.apertura .pianta .stanza.accesa { fill: rgba(226,188,106,.18); stroke: var(--gold-l); }
.apertura .pianta .nome { font: 500 10px var(--sans); fill: rgba(255,255,255,.55); letter-spacing: .04em; }
.apertura .pianta .arredo { fill: none; stroke: rgba(143,176,217,.28); stroke-width: 1; }
.avatar-p circle.f { fill: #2B4870; stroke: #fff; stroke-width: 1.6; }
.avatar-p text { font: 700 8.5px var(--sans); fill: #fff; }
.avatar-p .alone { fill: rgba(143,176,217,.25); }
.avatar-p.op circle.f { fill: var(--gold-l); stroke: #fff; }
.avatar-p.op text { fill: var(--ink); }
.notifica { position: absolute; z-index: 4; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; width: min(320px, 80%); padding: 12px 14px; border-radius: 16px; background: rgba(20,36,59,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.35; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.notifica b { display: block; color: #fff; font-weight: 600; font-size: 13.5px; }
.notifica em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.55); align-self: start; }
.notifica .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(226,188,106,.18); color: var(--gold-l); }
.notifica .ic .ico { width: 17px; height: 17px; }
.notifica.esce { opacity: 0; transform: translateY(8px); }
.notifica--1 { right: 5%; bottom: 64px; }
.notifica--2 { left: -110px; bottom: 210px; }
.chip-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #8FD3B0; }
.chip-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5BC28F; box-shadow: 0 0 0 0 rgba(91,194,143,.6); animation: pulsa 2s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 8px rgba(91,194,143,0); } 100% { box-shadow: 0 0 0 0 rgba(91,194,143,0); } }
@media (max-width: 900px) {
  .apertura { grid-template-columns: 1fr; grid-template-rows: 62svh 460px; min-height: 0; }
  .apertura__cucitura { display: none; }
  .apertura__velo { background: linear-gradient(180deg, rgba(11,21,36,.7) 0%, rgba(11,21,36,.35) 40%, rgba(11,21,36,.55) 62%, rgba(11,21,36,0) 64%); }
  .apertura__testo { top: 110px; }
  .apertura__piede { display: none; }
  .apertura .pianta { bottom: 70px; }
  .notifica--2 { display: none; }
  .notifica--1 { right: 50%; transform: translateX(50%); bottom: 18px; }
  .notifica--1.esce { transform: translate(50%, 8px); }
}
@media (max-width: 560px) { .apertura { grid-template-rows: 640px 400px; } .apertura__cta .btn { width: 100%; } }

/* ---------- Sezioni ---------- */
.sez { padding-block: clamp(84px, 11vw, 150px); }
.sez--grigio { background: var(--bg-2); }
.sez--carta { background: var(--paper); }
.scuro { background: var(--navy-2); color: #fff; }
.testa-sez { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 80px; align-items: end; }
.testa-sez .testo { margin-top: 0; }
.testa-sez--c { display: block; max-width: 820px; margin-inline: auto; text-align: center; }
.testa-sez--c .testo { margin: 20px auto 0; }
.testa-sez .etichetta { display: flex; margin-bottom: 18px; }
.testa-sez--c .etichetta { justify-content: center; }
@media (max-width: 900px) { .testa-sez { grid-template-columns: 1fr; gap: 18px; } }

/* Comparsa */
[data-rivela] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-rivela].visto { opacity: 1; transform: none; }
[data-rivela][data-ritardo="1"] { transition-delay: .12s; }
[data-rivela][data-ritardo="2"] { transition-delay: .24s; }
[data-rivela][data-ritardo="3"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { [data-rivela] { opacity: 1; transform: none; transition: none; } .apertura__foto img { animation: none; } }

/* ---------- Manifesto (numeri sobri) ---------- */
.manifesto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--line); }
.manifesto div { padding: 28px 28px 0 0; }
.manifesto b { display: block; font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.manifesto span { display: block; margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.5; max-width: 26ch; }
@media (max-width: 860px) { .manifesto { grid-template-columns: 1fr 1fr; row-gap: 20px; } }

/* ---------- Funzioni a tutta pagina (foto con sfumatura) ---------- */
.funzione { position: relative; min-height: clamp(560px, 72vh, 760px); display: flex; align-items: center; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.funzione__foto { position: absolute; inset: -6% 0; z-index: -2; }
.funzione__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 70% 50%); }
.funzione::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246,247,249,1) 0%, rgba(246,247,249,.94) 26%, rgba(246,247,249,.55) 44%, rgba(246,247,249,0) 62%); }
.funzione--scura { background: var(--navy-2); }
.funzione--scura::before { background: linear-gradient(90deg, rgba(11,21,36,1) 0%, rgba(11,21,36,.92) 28%, rgba(11,21,36,.4) 50%, rgba(11,21,36,0) 68%); }
.funzione--scura .titolo-3 { color: #fff; }
.funzione--scura .testo { color: rgba(255,255,255,.7); }
.funzione__testo { position: relative; max-width: 440px; }
.funzione__testo .etichetta { margin-bottom: 18px; }
.funzione__punti { display: grid; gap: 10px; margin-top: 26px; font-size: 15px; color: var(--ink-2); }
.funzione__punti li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.funzione__punti .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--blue); stroke-width: 2; }
.funzione--scura .funzione__punti { color: rgba(255,255,255,.8); }
.funzione--scura .funzione__punti .ico { color: var(--gold-l); }
.galleggia { position: absolute; z-index: 2; animation: galleggia 7s ease-in-out infinite alternate; }
@keyframes galleggia { to { transform: translateY(-10px); } }
@media (max-width: 900px) {
  .funzione { min-height: 0; flex-direction: column; align-items: stretch; padding-top: 80px; }
  .funzione::before { background: linear-gradient(180deg, rgba(246,247,249,1) 0%, rgba(246,247,249,1) 44%, rgba(246,247,249,0) 66%); }
  .funzione--scura::before { background: linear-gradient(180deg, rgba(11,21,36,1) 0%, rgba(11,21,36,1) 46%, rgba(11,21,36,0) 68%); }
  .funzione__foto { inset: auto 0 0 0; height: 420px; }
  .galleggia { position: relative; inset: auto !important; margin: 28px var(--pad) 0 auto; align-self: flex-end; z-index: 2; }
  .funzione__spazio { height: 200px; }
  .funzione { padding-bottom: 48px; }
}

/* Carta d'interfaccia (vetro chiaro) */
.carta-ui { width: min(360px, 86vw); padding: 16px; border-radius: 20px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--shadow-l); font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.carta-ui--scura { background: rgba(20,36,59,.7); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.carta-ui__t { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.carta-ui--scura .carta-ui__t { color: rgba(255,255,255,.6); }
.carta-ui h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.carta-ui--scura h4 { color: #fff; }
.riga-ui { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.riga-ui + .riga-ui { margin-top: 6px; }
.riga-ui .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--tint); color: var(--blue); flex-shrink: 0; }
.riga-ui .ic .ico { width: 16px; height: 16px; }
.riga-ui .ic.ok { background: var(--ok-s); color: var(--ok); }
.riga-ui .ic.warn { background: var(--warn-s); color: var(--warn); }
.riga-ui b { display: block; font-weight: 600; font-size: 13.5px; }
.riga-ui small { display: block; color: var(--muted); font-size: 12px; }
.riga-ui .dx { margin-left: auto; }
.onda { display: flex; align-items: center; gap: 3px; height: 26px; }
.onda i { width: 3px; border-radius: 2px; background: var(--blue-2); animation: onda 1.1s ease-in-out infinite; }
@keyframes onda { 50% { transform: scaleY(.35); } }

/* ---------- Schermi dentro le foto ---------- */
.dispositivo { position: relative; }
.dispositivo > img { width: 100%; height: auto; }
.schermo { position: absolute; overflow: hidden; container-type: inline-size; background: #fff; }
.schermo > * { position: absolute; inset: 0; }
.dispositivo--monitor .schermo { left: 39.05%; top: 19.13%; width: 42.82%; height: 43.36%; border-radius: .3%; }
.dispositivo--tablet .schermo { left: 27.02%; top: 23.44%; width: 46.68%; height: 46.97%; border-radius: 1.2% / 1.8%; }
.dispositivo--telefono .schermo { left: 52.93%; top: 13.87%; width: 16.67%; height: 57.62%; border-radius: 14% / 6.5%; }
.schermo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 40%); }

/* UI in scala (unità del contenitore) */
.ui { display: grid; grid-template-columns: 17% 1fr; font-size: 1.55cqw; line-height: 1.35; color: var(--ink); background: #F7F8FA; }
.ui__lato { background: var(--navy); color: rgba(255,255,255,.7); padding: 2.4cqw 1.4cqw; display: grid; align-content: start; gap: .5cqw; }
.ui__lato b { color: #fff; font-size: 1.8cqw; margin-bottom: 1.4cqw; display: flex; align-items: center; gap: .8cqw; }
.ui__lato b i { width: 1.8cqw; height: 1.8cqw; border-radius: .4cqw; background: var(--gold-l); }
.ui__lato span { padding: .7cqw 1cqw; border-radius: .6cqw; }
.ui__lato span.on { background: rgba(255,255,255,.12); color: #fff; }
.ui__main { padding: 2cqw 2.6cqw; display: grid; gap: 1.2cqw; align-content: start; min-width: 0; }
.ui__titolo { display: flex; justify-content: space-between; align-items: end; }
.ui__titolo h5 { margin: 0; font-size: 2.9cqw; font-weight: 600; letter-spacing: -.03em; }
.ui__titolo small { color: var(--muted); font-size: 1.4cqw; }
.ui__kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.ui__kpi div { background: #fff; border: 1px solid var(--line); border-radius: 1cqw; padding: 1.3cqw 1.5cqw; }
.ui__kpi small { color: var(--muted); font-size: 1.3cqw; display: block; }
.ui__kpi b { display: block; font-size: 3cqw; font-weight: 600; letter-spacing: -.04em; margin-top: .3cqw; font-variant-numeric: tabular-nums; }
.ui__kpi div.scuro-k { background: var(--navy); border-color: var(--navy); }
.ui__kpi div.scuro-k small { color: rgba(255,255,255,.6); }
.ui__kpi div.scuro-k b { color: var(--gold-l); }
.ui__due { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2cqw; }
.ui__box { background: #fff; border: 1px solid var(--line); border-radius: 1cqw; padding: 1.5cqw; min-width: 0; }
.ui__box h6 { margin: 0 0 1cqw; font-size: 1.3cqw; font-weight: 600; color: var(--muted); }
.ui__barre { display: flex; align-items: flex-end; gap: .8cqw; height: 9cqw; }
.ui__barre i { flex: 1; background: var(--blue); border-radius: .4cqw .4cqw 0 0; transform-origin: bottom; animation: cresce 1.4s var(--ease) both; }
.ui__barre i:last-child { background: var(--gold-l); }
@keyframes cresce { from { transform: scaleY(0); } }
.ui__lista div { display: flex; justify-content: space-between; gap: 1cqw; padding: .6cqw 0; border-bottom: 1px solid var(--line); font-size: 1.35cqw; }
.ui__lista div:last-child { border-bottom: 0; }
.pill { display: inline-block; padding: .25em .7em; border-radius: 99px; font-size: .9em; font-weight: 600; background: var(--tint); color: var(--blue); white-space: nowrap; }
.pill.ok { background: var(--ok-s); color: var(--ok); }
.pill.warn { background: var(--warn-s); color: var(--warn); }
.pill.ko { background: var(--ko-s); color: var(--ko); }

/* UI tablet: giro terapia */
.ui-tab { background: #F7F8FA; padding: 3cqw 3.4cqw; display: grid; gap: 1.8cqw; align-content: start; font-size: 2.3cqw; line-height: 1.35; }
.ui-tab__t { display: flex; justify-content: space-between; align-items: center; }
.ui-tab__t h5 { margin: 0; font-size: 3.6cqw; font-weight: 600; letter-spacing: -.03em; }
.ui-tab__barra { height: 1.2cqw; background: var(--line); border-radius: 1cqw; overflow: hidden; }
.ui-tab__barra i { display: block; height: 100%; width: 58%; background: var(--blue); border-radius: 1cqw; transition: width 1s var(--ease); }
.ui-tab__riga { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 2cqw; background: #fff; border: 1px solid var(--line); border-radius: 1.8cqw; }
.ui-tab__riga .av { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--gold-s); color: #8A6420; font-weight: 700; font-size: 2cqw; flex-shrink: 0; }
.ui-tab__riga b { display: block; font-size: 2.4cqw; }
.ui-tab__riga small { display: block; color: var(--muted); font-size: 1.9cqw; }
.ui-tab__btn { margin-left: auto; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: var(--ok); color: #fff; font-weight: 600; font-size: 2cqw; white-space: nowrap; transition: background .4s; }
.ui-tab__btn.fatto { background: var(--ok-s); color: var(--ok); }

/* UI telefono: app famiglie */
.ui-tel { background: var(--paper); display: flex; flex-direction: column; font-size: 5.6cqw; line-height: 1.35; }
.ui-tel__testa { padding: 16cqw 7cqw 7cqw; background: var(--navy); color: #fff; }
.ui-tel__testa small { opacity: .7; font-size: 4.6cqw; }
.ui-tel__testa b { display: block; font-size: 8.4cqw; font-weight: 600; letter-spacing: -.03em; margin-top: 1cqw; }
.ui-tel__corpo { padding: 5cqw; display: grid; gap: 3.5cqw; }
.ui-tel__card { background: #fff; border: 1px solid var(--line); border-radius: 5cqw; padding: 4.5cqw; }
.ui-tel__card h6 { margin: 0 0 2cqw; font-size: 4.2cqw; font-weight: 600; color: var(--muted); }
.ui-tel__card p { margin: 0; }
.ui-tel__card time { color: var(--muted); font-size: 4.4cqw; margin-right: 2cqw; font-variant-numeric: tabular-nums; }
.ui-tel__btn { display: block; text-align: center; padding: 3.6cqw; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 600; }

/* ---------- Cruscotto nel monitor (sezione) ---------- */
.vetrina { position: relative; overflow: hidden; background: #EDEBE6; }
.vetrina .dispositivo { width: 116%; margin-left: 0; }
.vetrina__testo { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.vetrina__testo .wrap > div { max-width: 400px; pointer-events: auto; }
.vetrina::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(240,238,233,1) 0%, rgba(240,238,233,.94) 26%, rgba(240,238,233,0) 44%); }
@media (max-width: 900px) {
  .vetrina { padding-top: 80px; }
  .vetrina::before { display: none; }
  .vetrina__testo { position: static; transform: none; margin-bottom: 24px; }
  .vetrina .dispositivo { width: 190%; margin-left: -70%; }
}

/* ---------- Amministrazione e fisco ---------- */
.fisco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); margin-top: 72px; align-items: start; }
.fisco__voci { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
.fisco__voci .ico { width: 24px; height: 24px; color: var(--gold-l); stroke-width: 1.5; }
.fisco__voci h3 { margin-top: 14px; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: #fff; line-height: 1.3; }
.fisco__voci p { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.6); line-height: 1.6; }
@media (max-width: 1000px) { .fisco { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fisco__voci { grid-template-columns: 1fr; } }
.fisco__media { position: relative; }
.fisco__foto { border-radius: var(--R); overflow: hidden; aspect-ratio: 4 / 3; }
.fisco__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Calcolatore */
.calc { position: relative; margin: -120px 24px 0; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 22px; box-shadow: var(--shadow-l); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.calc__testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px 0; }
.calc__testa h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.calc__testa small { display: block; font-size: 12.5px; color: var(--muted); }
.calc__corpo { padding: 16px 22px 22px; }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.campo label, .campo > span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.campo select, .campo input[type=number] { width: 100%; height: 42px; padding: 0 12px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14.5px; color: var(--ink); }
.campo select:focus, .campo input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.campo--largo { grid-column: 1 / -1; }
.scelta { display: flex; background: var(--bg-2); border-radius: 12px; padding: 4px; gap: 4px; }
.scelta button { flex: 1; padding: 8px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all .25s; }
.scelta button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -2px rgba(14,26,43,.18); }
.cursore { display: flex; align-items: center; gap: 12px; height: 42px; }
.cursore input { flex: 1; accent-color: var(--navy); }
.cursore output { min-width: 34px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.riparto { margin-top: 18px; display: grid; gap: 10px; }
.riparto__barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); gap: 2px; }
.riparto__barra i { display: block; height: 100%; transition: width .6s var(--ease); }
.riparto__barra .asl { background: var(--blue); }
.riparto__barra .osp { background: var(--gold-l); }
.riparto__barra .com { background: var(--sky); }
.fatture { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fattura { position: relative; padding: 12px 14px; background: var(--bg-2); border-radius: 14px; }
.fattura small { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.fattura small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.fattura.asl small::before { background: var(--blue); }
.fattura.osp small::before { background: var(--gold-l); }
.fattura.com small::before { background: var(--sky); }
.fattura b { display: block; margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fattura span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.calc__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.sdi { display: flex; margin-top: 16px; font-size: 11.5px; }
.sdi li { flex: 1; position: relative; padding-top: 20px; text-align: center; color: var(--muted-2); }
.sdi li::before { content: ""; position: absolute; left: 50%; top: 3px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); z-index: 1; transition: all .3s; }
.sdi li::after { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line-2); }
.sdi li:first-child::after { display: none; }
.sdi li.fatto { color: var(--ok); font-weight: 600; }
.sdi li.fatto::before { background: var(--ok); border-color: var(--ok); }
.sdi li.fatto::after { background: var(--ok); }
.nota { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 520px) { .campi { grid-template-columns: 1fr; } .calc { margin: -60px 0 0; } }

/* ---------- Famiglie (telefono) ---------- */
.famiglie { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.famiglie .dispositivo { border-radius: var(--R); overflow: hidden; box-shadow: var(--shadow-l); }
.zoom { position: relative; transform-origin: var(--o, 50% 50%); transform: scale(var(--z, 1)); }
.punti-ampi { display: grid; gap: 22px; margin-top: 34px; }
.punti-ampi li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.punti-ampi .ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--tint); color: var(--blue); }
.punti-ampi b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.punti-ampi span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.famiglie--inv { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 900px) { .famiglie, .famiglie--inv { grid-template-columns: 1fr; } }

/* ---------- Esploratore dei moduli ---------- */
.schede-mod { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 48px auto 0; padding: 6px; width: fit-content; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.schede-mod button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 13px; font-size: 14px; font-weight: 600; color: var(--muted); transition: all .25s; white-space: nowrap; }
.schede-mod button .ico { width: 17px; height: 17px; }
.schede-mod button:hover { color: var(--ink); }
.schede-mod button[aria-selected="true"] { background: var(--navy); color: #fff; }
.esplora__pannello { margin-top: 36px; }
.esplora__corpo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.esplora__testo .titolo-3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.esplora__testo ul { display: grid; gap: 10px; margin-top: 22px; font-size: 15px; color: var(--ink-2); }
.esplora__testo li { display: flex; gap: 10px; line-height: 1.45; }
.esplora__testo li .ico { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.2; margin-top: 2px; }
@media (max-width: 980px) {
  .schede-mod { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; scrollbar-width: none; }
  .schede-mod::-webkit-scrollbar { display: none; }
  .esplora__corpo { grid-template-columns: 1fr; }
}

/* Finestra applicazione */
.app { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l); overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.app__barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FBFBFC; }
.app__barra i { width: 10px; height: 10px; border-radius: 50%; background: #E1E4EA; }
.app__barra span { margin-left: 12px; flex: 1; max-width: 320px; padding: 4px 12px; background: var(--bg-2); border-radius: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__corpo { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 440px; }
.app__lato { padding: 14px 10px; background: var(--navy); color: rgba(255,255,255,.68); font-size: 12.5px; }
.app__lato .logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; font-weight: 600; color: #fff; }
.app__lato .logo i { width: 16px; height: 16px; border-radius: 5px; background: var(--gold-l); }
.app__lato li { padding: 7px 9px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__lato li.on { background: rgba(255,255,255,.1); color: #fff; }
.app__main { padding: 20px 22px; min-width: 0; background: #F8F9FB; }
.app__titolo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.app__titolo h4 { font-size: 18px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.app__titolo small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
@media (max-width: 640px) { .app__corpo { grid-template-columns: 1fr; } .app__lato { display: none; } .app__main { padding: 14px; } }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--tint); color: var(--blue); }
.chip.ok { background: var(--ok-s); color: var(--ok); }
.chip.warn { background: var(--warn-s); color: var(--warn); }
.chip.ko { background: var(--ko-s); color: var(--ko); }
.chip.oro { background: var(--gold-s); color: #8A6420; }
.chip.grigio { background: var(--bg-2); color: var(--muted); }
.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab th { padding: 9px 10px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tab td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab b { color: var(--ink); font-weight: 600; }
.scheda { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.scheda h5 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.griglia2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.griglia3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scorri { overflow-x: auto; }
.barra { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width 1s var(--ease); }
@media (max-width: 640px) { .griglia2, .griglia3 { grid-template-columns: 1fr; } }

/* ---------- Per chi (schede fotografiche) ---------- */
.settori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.settore { position: relative; aspect-ratio: 3 / 4; border-radius: var(--R); overflow: hidden; color: #fff; isolation: isolate; }
.settore img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.settore:hover img { transform: scale(1.05); }
.settore::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,36,0) 35%, rgba(11,21,36,.88) 100%); }
.settore div { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.settore b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.settore span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; }
.settore .chip { margin-bottom: 12px; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); }
@media (max-width: 1000px) { .settori { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .settori { grid-template-columns: 1fr; } .settore { aspect-ratio: 4 / 3; } }

/* ---------- Normativa ---------- */
.norme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 72px; }
.norme .ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--blue); box-shadow: var(--shadow); }
.norme .ico { width: 22px; height: 22px; }
.norme h3 { margin-top: 20px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.norme p { margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .norme { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .norme { grid-template-columns: 1fr; } }

/* ---------- Avvio ---------- */
.passi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 64px; border-top: 1px solid var(--line); }
.passi li { position: relative; padding: 30px 26px 0 0; }
.passi li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px var(--paper); }
.passi small { display: block; font-size: 12.5px; font-weight: 600; color: var(--gold); }
.passi b { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.passi span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 980px) { .passi { grid-template-columns: 1fr 1fr; row-gap: 30px; } }
@media (max-width: 520px) { .passi { grid-template-columns: 1fr; } }

/* ---------- Domande ---------- */
.faq-griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); font-size: 18px; font-weight: 400; color: var(--ink); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 50px 24px 0; font-size: 15.5px; color: var(--muted); }
@media (max-width: 900px) { .faq-griglia { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Chiusura con foto ---------- */
.chiusura { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate; }
.chiusura > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; z-index: -2; }
.chiusura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,21,36,.85) 0%, rgba(11,21,36,.55) 45%, rgba(11,21,36,.1) 80%); }
.chiusura .titolo-2 { color: #fff; max-width: 14ch; }
.chiusura .testo { color: rgba(255,255,255,.78); }
.chiusura__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Contatti ---------- */
.contatti__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contatti__lista { display: grid; gap: 14px; margin-top: 32px; font-size: 15.5px; color: var(--ink-2); }
.contatti__lista li { display: flex; gap: 12px; align-items: center; }
.contatti__lista .ico { color: var(--blue); }
.contatti__lista a { border-bottom: 1px solid var(--line-2); }
.modulo { padding: clamp(22px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--R); box-shadow: var(--shadow); }
.modulo h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.modulo .campi { margin-top: 20px; }
.modulo input, .modulo textarea, .modulo select { width: 100%; padding: 10px 14px; background: var(--bg-2); border: 1px solid transparent; border-radius: 12px; font-size: 15px; color: var(--ink); transition: border-color .2s, background .2s; }
.modulo input, .modulo select { height: 46px; }
.modulo textarea { min-height: 100px; resize: vertical; }
.modulo input:focus, .modulo textarea:focus, .modulo select:focus { outline: none; background: #fff; border-color: var(--blue); }
.modulo .btn { width: 100%; margin-top: 20px; white-space: normal; text-align: center; }
.modulo .nota { text-align: center; }
@media (max-width: 900px) { .contatti__in { grid-template-columns: 1fr; } }

/* ---------- Piede ---------- */
.piede { padding: 64px 0 36px; background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.piede__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.piede img { width: 110px; }
.piede p { margin-top: 16px; max-width: 40ch; line-height: 1.6; }
.piede h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.piede li { margin-bottom: 8px; }
.piede a:hover { color: var(--ink); }
.piede__sotto { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 760px) { .piede__in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Versione 3 · piattaforma multi-soluzione
   ========================================================================== */
/* Menu a tendina delle soluzioni */
.menu { align-items: center; }
.menu__voce { position: relative; }
.menu__apri { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; font-weight: 500; color: var(--ink-2); transition: background .2s; }
.menu__apri .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .25s var(--ease); }
.menu__apri:hover, .menu__voce--tendina:focus-within .menu__apri { background: var(--bg-2); color: var(--ink); }
.tendina { position: absolute; top: calc(100% + 14px); left: -10px; width: 360px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .25s var(--ease); }
.tendina::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.menu__voce--tendina:hover .tendina, .menu__voce--tendina.aperta .tendina, .menu__voce--tendina:focus-within .tendina { opacity: 1; visibility: visible; transform: none; }
.menu__voce--tendina:hover .menu__apri .ico, .menu__voce--tendina.aperta .menu__apri .ico { transform: rotate(-90deg); }
.tendina a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; }
.tendina a:hover { background: var(--bg-2); }
.tendina .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--blue); }
.tendina .ico { width: 19px; height: 19px; }
.tendina b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.tendina small { display: block; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1060px) {
  .menu.aperto { max-height: calc(100svh - 110px); overflow-y: auto; }
  .menu.aperto .menu__apri { display: none; }
  .menu.aperto .tendina { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu.aperto .tendina a { padding: 10px 12px; }
}

/* Altre soluzioni (striscia di schede) */
.altre__lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; }
.altre__lista a { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; }
.altre__lista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.altre__lista a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,36,0) 40%, rgba(11,21,36,.85)); }
.altre__lista a:hover img { transform: scale(1.06); }
.altre__lista span { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.altre__lista a.qui { outline: 2px solid var(--gold-l); outline-offset: 3px; }
.altre__lista a.qui span::before { content: "Siete qui"; display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--gold-l); }
@media (max-width: 1000px) { .altre__lista { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .altre__lista { grid-template-columns: 1fr 1fr; } .altre__lista a { aspect-ratio: 1; } }

/* ---------- Home: apertura con soluzioni che si alternano ---------- */
.portale { position: relative; min-height: max(760px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; background: var(--navy-2); isolation: isolate; }
.portale__foto { position: absolute; inset: 0; z-index: -2; }
.portale__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease), transform 8s linear; }
.portale__foto img.on { opacity: 1; transform: scale(1); }
.portale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,36,.55) 0%, rgba(11,21,36,.15) 32%, rgba(11,21,36,.25) 55%, rgba(11,21,36,.88) 100%), linear-gradient(90deg, rgba(11,21,36,.55) 0%, rgba(11,21,36,0) 60%); }
.portale__in { padding-top: 150px; padding-bottom: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: end; }
.portale .titolo-1 { color: #fff; max-width: 13ch; text-shadow: 0 2px 30px rgba(0,0,0,.2); }
.portale .testo { color: rgba(255,255,255,.82); }
.portale__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portale__scheda { justify-self: end; width: 100%; }
.portale__scheda .carta-ui { width: 100%; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.portale__scheda .carta-ui.esce { opacity: 0; transform: translateY(10px); }
.portale__tab { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.portale__tab button { position: relative; padding: 20px 18px 24px 0; text-align: left; color: rgba(255,255,255,.6); transition: color .3s; }
.portale__tab button i { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--gold-l); }
.portale__tab button[aria-selected="true"] { color: #fff; }
.portale__tab button[aria-selected="true"] i { animation: avanza-tab 6s linear forwards; }
.portale__tab.ferma button[aria-selected="true"] i { animation: none; width: calc(100% - 18px); }
@keyframes avanza-tab { to { width: calc(100% - 18px); } }
.portale__tab b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.portale__tab small { display: block; margin-top: 3px; font-size: 12.5px; opacity: .8; }
@media (max-width: 960px) {
  .portale__in { grid-template-columns: 1fr; padding-top: 130px; }
  .portale__scheda { justify-self: stretch; }
  .portale__tab { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .portale__tab::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) { .portale__scheda { display: none; } .portale__cta .btn { width: 100%; } }

/* ---------- Home: soluzioni ---------- */
.soluzioni { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }
.soluzione { position: relative; grid-column: span 2; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: var(--R); overflow: hidden; color: #fff; isolation: isolate; }
.soluzione--grande { grid-column: span 3; min-height: 520px; }
.soluzione > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.soluzione:hover > img { transform: scale(1.05); }
.soluzione::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,36,0) 25%, rgba(11,21,36,.92) 100%); }
.soluzione .chip { align-self: flex-start; margin-bottom: 14px; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.soluzione h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.soluzione p { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.55; max-width: 44ch; }
.soluzione ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.soluzione li { padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; font-weight: 500; }
.soluzione__piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14.5px; font-weight: 600; }
.soluzione__piede span { display: inline-flex; align-items: center; gap: 8px; }
.soluzione__piede .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.soluzione:hover .soluzione__piede .ico { transform: translateX(4px); }
@media (max-width: 1000px) { .soluzioni { grid-template-columns: 1fr 1fr; } .soluzione, .soluzione--grande { grid-column: span 1; } .soluzione--grande { grid-column: span 2; } }
@media (max-width: 640px) { .soluzioni { grid-template-columns: 1fr; } .soluzione, .soluzione--grande { grid-column: span 1; min-height: 420px; } }

/* ---------- Home: configuratore dei moduli ---------- */
.config { margin-top: 56px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.config__scelte { display: grid; gap: 8px; position: sticky; top: 110px; }
.config__scelte button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px; text-align: left; border-radius: 16px; border: 1px solid transparent; transition: all .25s; }
.config__scelte button:hover { background: #fff; }
.config__scelte button[aria-pressed="true"] { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.config__scelte .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--blue); }
.config__scelte button[aria-pressed="true"] .ic { background: var(--navy); color: #fff; }
.config__scelte b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.config__scelte small { display: block; font-size: 12.5px; color: var(--muted); }
.config__gruppo + .config__gruppo { margin-top: 28px; }
.config__gruppo h3 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.config__gruppo h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.modulo-t { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--muted-2); opacity: .55; transition: all .45s var(--ease); }
.modulo-t .ico { width: 20px; height: 20px; flex-shrink: 0; }
.modulo-t b { display: block; font-size: 14px; font-weight: 600; color: var(--muted-2); letter-spacing: -.01em; line-height: 1.25; transition: color .45s; }
.modulo-t small { display: block; font-size: 12px; line-height: 1.35; }
.modulo-t.on { opacity: 1; background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.7); box-shadow: 0 10px 24px -14px rgba(14,26,43,.6); }
.modulo-t.on .ico { color: var(--gold-l); }
.modulo-t.on b { color: #fff; }
.modulo-t.base { opacity: 1; color: var(--muted); }
.modulo-t.base .ico { color: var(--blue); }
.modulo-t.base b { color: var(--ink); }
.config__nota { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .config { grid-template-columns: 1fr; } .config__scelte { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .config__scelte { grid-template-columns: 1fr; } }

/* ---------- Tabella ciclo attivo per struttura ---------- */
.cicli { margin-top: 56px; border-radius: var(--R); overflow-x: auto; border: 1px solid rgba(255,255,255,.12); }
.cicli table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.cicli th { padding: 16px 20px; text-align: left; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.12); }
.cicli td { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.75); vertical-align: top; line-height: 1.5; }
.cicli tr:last-child td { border-bottom: 0; }
.cicli td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }
.cicli .pill { background: rgba(226,188,106,.16); color: var(--gold-l); }

/* ---------- Pagine di soluzione: apertura ---------- */
.apertura-sol { position: relative; min-height: max(680px, 92svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: var(--bg-2); }
.apertura-sol > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 70% 50%); z-index: -2; }
.apertura-sol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246,247,249,1) 0%, rgba(246,247,249,.95) 30%, rgba(246,247,249,.4) 52%, rgba(246,247,249,0) 70%); }
.apertura-sol .wrap { padding-top: 150px; padding-bottom: 90px; }
.apertura-sol__testo { max-width: 560px; }
.apertura-sol .titolo-1 { color: var(--ink); font-size: clamp(2.5rem, 4.8vw, 4.2rem); }
.apertura-sol .testo { color: var(--ink-2); }
.apertura-sol__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.apertura-sol__moduli { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.apertura-sol__moduli span { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.75); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.apertura-sol .galleggia { right: 6%; bottom: 12%; }
@media (max-width: 900px) {
  .apertura-sol { min-height: 0; flex-direction: column; align-items: stretch; }
  .apertura-sol > img { position: relative; height: 380px; order: 2; z-index: 0; }
  .apertura-sol::before { display: none; }
  .apertura-sol .wrap { padding-top: 120px; padding-bottom: 36px; }
  .apertura-sol .galleggia { position: absolute; top: auto !important; left: var(--pad) !important; right: auto !important; bottom: 24px !important; margin: 0; width: min(330px, calc(100% - 2 * var(--pad))) !important; }
  .apertura-sol > img { height: 460px; }
}

/* Moduli attivi in una soluzione */
.attivi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 48px; }
.attivi li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.attivi .ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--tint); color: var(--blue); flex-shrink: 0; }
.attivi li.vert .ic { background: var(--navy); color: var(--gold-l); }
.attivi .ico { width: 18px; height: 18px; }
.attivi b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.attivi small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Invito alla demo della soluzione */
.invito-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--R); background: var(--navy-2); color: #fff; position: relative; overflow: hidden; }
.invito-demo::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226,188,106,.18), transparent); pointer-events: none; }
.invito-demo .titolo-3 { color: #fff; }
.invito-demo .testo { color: rgba(255,255,255,.7); }
.invito-demo ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.invito-demo li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 13.5px; color: rgba(255,255,255,.85); }
.invito-demo li i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-l); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; }
@media (max-width: 800px) { .invito-demo { grid-template-columns: 1fr; } }

/* Dispositivo in auto (telefono dell'operatore domiciliare) */
.dispositivo--auto .schermo { left: 43.4%; top: 21.2%; width: 11.7%; height: 49.7%; border-radius: 13% / 6%; }
.fisco__voci--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .fisco__voci--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fisco__voci--4 { grid-template-columns: 1fr; } }

/* ---------- Schermate in scala per le pagine di soluzione ---------- */
/* mappa dei letti (monitor) */
.ui-letti { display: grid; grid-template-columns: repeat(10, 1fr); gap: .6cqw; }
.ui-letti i { height: 2.6cqw; border-radius: .6cqw; background: var(--ok-s); border: 1px solid #CFE5D9; display: grid; place-items: center; font-style: normal; font-size: 1.1cqw; font-weight: 600; color: var(--ok); }
.ui-letti i.o { background: var(--tint); border-color: #D3DEEC; color: var(--blue); }
.ui-letti i.d { background: var(--warn-s); border-color: #EFD9B0; color: var(--warn); }
.ui-letti i.s { background: var(--bg-2); border-color: var(--line); color: var(--muted-2); }
.ui-letti i.n { background: var(--navy); border-color: var(--navy); color: var(--gold-l); }
.ui-legenda { display: flex; flex-wrap: wrap; gap: 1.4cqw; font-size: 1.15cqw; color: var(--muted); }
.ui-legenda span::before { content: ""; display: inline-block; width: 1cqw; height: 1cqw; margin-right: .5cqw; border-radius: .3cqw; vertical-align: -.1cqw; background: var(--c); }
/* agenda (monitor) */
.ui-agenda { display: grid; grid-template-columns: 6cqw repeat(5, 1fr); gap: .5cqw; font-size: 1.1cqw; }
.ui-agenda > b { font-size: 1.15cqw; font-weight: 600; color: var(--muted); padding-bottom: .4cqw; }
.ui-agenda > small { color: var(--muted-2); padding-top: .2cqw; }
.ui-agenda > span { min-height: 2.6cqw; border-radius: .5cqw; padding: .4cqw .6cqw; background: transparent; border: 1px dashed var(--line); }
.ui-agenda > span.p { background: var(--tint); border: 0; border-left: .35cqw solid var(--blue); color: var(--ink); }
.ui-agenda > span.c { background: var(--ok-s); border: 0; border-left: .35cqw solid var(--ok); color: var(--ink); }
.ui-agenda > span.a { background: var(--gold-s); border: 0; border-left: .35cqw solid var(--gold); color: var(--ink); }
.ui-agenda > span.x { background: var(--ko-s); border: 0; border-left: .35cqw solid var(--ko); color: var(--ink); text-decoration: line-through; }
/* mappa dei giri (monitor) */
.ui-mappa { position: relative; background: #EEF1EC; border-radius: 1cqw; overflow: hidden; }
.ui-mappa svg { display: block; width: 100%; height: auto; }

/* carta-ui: piccoli componenti */
.letti-mini { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 10px; }
.letti-mini i { height: 30px; border-radius: 6px; background: var(--tint); border: 1px solid #D3DEEC; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--blue); display: grid; place-items: center; }
.letti-mini i.l { background: var(--ok-s); border-color: #CFE5D9; color: var(--ok); }
.letti-mini i.d { background: var(--warn-s); border-color: #EFD9B0; color: var(--warn); }
.letti-mini i.s { background: var(--bg-2); border-color: var(--line); color: var(--muted-2); }
.letti-mini i.n { background: var(--navy); border-color: var(--navy); color: var(--gold-l); animation: pulsa-letto 2s ease-in-out infinite; }
@keyframes pulsa-letto { 50% { box-shadow: 0 0 0 4px rgba(226,188,106,.35); } }
.spunte { display: grid; gap: 6px; margin-top: 10px; }
.spunte li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.spunte li i { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); font-style: normal; font-size: 11px; color: transparent; transition: all .4s; }
.spunte li.ok i { background: var(--ok); border-color: var(--ok); color: #fff; }
.spunte li small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.voci-prev { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; }
.voci-prev div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.voci-prev div:last-child { border-bottom: 0; }
.voci-prev .tot { padding-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.firma-tel { position: relative; height: 54px; margin-top: 10px; border-radius: 12px; background: #fff; border: 1px dashed var(--line-2); overflow: hidden; }
.firma-tel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.firma-tel path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: firma 3s var(--ease) infinite; }
@keyframes firma { 40%, 100% { stroke-dashoffset: 0; } }
.news { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.news div { padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); text-align: center; }
.news small { display: block; font-size: 10.5px; color: var(--muted); }
.news b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.news div.p2 { background: var(--warn-s); border-color: #EFD9B0; }
.news div.p3 { background: var(--ko-s); border-color: #F0C9C3; }
.passi--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .passi--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .passi--4 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .apertura-sol .galleggia { max-width: calc(100% - 2 * var(--pad)); } }

@media (max-width: 640px) { .soluzione { padding: 22px; } .soluzione::after { background: linear-gradient(180deg, rgba(11,21,36,.1) 0%, rgba(11,21,36,.92) 55%); } }

/* ---------- Ritocchi per il telefono ---------- */
@media (max-width: 900px) {
  /* configuratore: sul telefono solo i moduli accesi */
  .moduli .modulo-t:not(.on):not(.base) { display: none; }
  /* tabella dei cicli di incasso: una scheda per struttura */
  .cicli { border: 0; overflow: visible; }
  .cicli table, .cicli tbody, .cicli tr, .cicli td { display: block; min-width: 0; width: auto; }
  .cicli thead { display: none; }
  .cicli tr { margin-bottom: 12px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
  .cicli td { padding: 0; border: 0; }
  .cicli td + td { margin-top: 12px; }
  .cicli td:first-child { font-size: 17px; white-space: normal; }
  .cicli td:not(:first-child)::before { content: attr(data-t); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); }
  /* apertura RSA: pianta più grande */
  .apertura { grid-template-rows: 62svh 520px; }
  .apertura .pianta { width: 94%; bottom: 96px; }
}
@media (max-width: 560px) { .apertura { grid-template-rows: 640px 440px; } .apertura .pianta { bottom: 88px; } }

/* Cambio lingua nella testata */
.lingua { flex-shrink: 0; display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); transition: border-color .2s, color .2s; }
.lingua:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 1060px) { .lingua { margin-left: auto; } .lingua + .btn + .hamburger, .lingua ~ .hamburger { margin-left: 4px; } }

/* Inglese: il titolo dell apertura RSA è più lungo, va su due righe */
html[lang="en"] .apertura__testo .titolo-1 { max-width: 21ch; font-size: clamp(2.3rem, 4.3vw, 3.9rem); }
