/* ============================================================================
   S.B. COPERTURE S.R.L.S. — «LA SALITA»
   ---------------------------------------------------------------------------
   1 · FONDAMENTA   token di colore, tipografia, spazio, movimento
   2 · BASE         reset, testo, titoli, misura di lettura
   3 · PEZZI        occhiello, bottone, scheda, callout, dato, passo, icona
   4 · SEZIONI      una per una, dall'alto in basso
   5 · MOVIMENTO    comparsa a cascata, micro-interazioni, reduced-motion
   ========================================================================= */

/* ═══ 1 · FONDAMENTA ═══════════════════════════════════════════════════════ */

@font-face{font-family:Oswald;src:url(font/oswald-latin.woff2)format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(font/sourcesans3-latin.woff2)format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap}

:root{
  /* ── colore ─────────────────────────────────────────────────────────── */
  --rosso:#BE1C2B;            /* campionato dal logo del cliente */
  --rosso-chiaro:#E0404E;
  --rosso-scuro:#8E121E;
  --inchiostro:#1D1D1B;
  --terracotta:#B4552F;       /* i coppi */
  --ardesia:#2E343C;          /* le tegole grigie */
  --ardesia-2:#3B434D;
  --ardesia-3:#4C5561;
  --calce:#F8F6F1;
  --calce-2:#EFEAE1;
  --calce-3:#E2DACC;
  --grigio:#6E675F;
  --grigio-2:#9A938A;

  /* ── tipografia: una scala sola, usata ovunque ──────────────────────── */
  --t-xs:clamp(11.5px,.25vw + 11px,13px);
  --t-sm:clamp(14px,.35vw + 13px,15.5px);
  --t-base:clamp(16.5px,.45vw + 15px,18.5px);
  --t-lg:clamp(18.5px,.8vw + 16px,22px);
  --t-xl:clamp(21px,1.3vw + 17px,28px);
  --t-2xl:clamp(25px,2.1vw + 18px,38px);
  --t-3xl:clamp(31px,3.8vw + 17px,58px);
  --t-4xl:clamp(40px,6.2vw + 13px,94px);
  --t-cifra:clamp(46px,7.5vw + 12px,120px);

  --titolo:Oswald,'Arial Narrow',sans-serif;
  --testo:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --misura:58ch;

  /* ── spazio: base 8, niente valori a occhio ─────────────────────────── */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;
  --sezione:clamp(76px,9.5vw,148px);
  --gutter:clamp(20px,5vw,72px);
  --colonna:1280px;

  /* ── forma e profondità ─────────────────────────────────────────────── */
  --raggio:6px;
  --raggio-l:16px;
  --bordo:1px solid var(--calce-3);
  --ombra:0 1px 2px rgba(29,29,27,.04),0 10px 26px -14px rgba(29,29,27,.22);
  --ombra-alta:0 2px 6px rgba(29,29,27,.06),0 26px 54px -20px rgba(29,29,27,.34);

  /* ── movimento: una curva e tre tempi, non di più ───────────────────── */
  --curva:cubic-bezier(.22,.68,.32,1);
  --veloce:.2s;
  --medio:.32s;
  --lento:.42s;
}

/* ═══ 2 · BASE ═════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--testo);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--inchiostro);
  background:var(--calce);
  overflow-x:clip;                /* NON hidden: hidden rompe position:sticky */
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--rosso);color:#fff}

h1,h2,h3,h4{
  font-family:var(--titolo);font-weight:600;
  letter-spacing:-.005em;text-wrap:balance;
}
h1{font-size:var(--t-4xl);line-height:.98}
h2{font-size:var(--t-3xl);line-height:1.02}
h3{font-size:var(--t-lg);line-height:1.18;font-weight:500}
h4{font-size:var(--t-base);line-height:1.2;font-weight:500}
p{text-wrap:pretty;max-width:var(--misura)}
p + p{margin-top:var(--s4)}
strong{font-weight:600}

.involucro{max-width:var(--colonna);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--sezione);scroll-margin-top:88px;position:relative}
.stretto{max-width:62ch}

/* ═══ 3 · PEZZI ════════════════════════════════════════════════════════════ */

/* ── icona ──────────────────────────────────────────────────────────────── */
.ico{width:1em;height:1em;flex:none;stroke-width:1.75}

/* ── occhiello: etichetta + filetto, apre ogni sezione ──────────────────── */
.occhiello{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--titolo);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rosso);
  margin-bottom:var(--s5);
}
.occhiello .ico{width:17px;height:17px}
.occhiello::after{
  content:'';flex:1;max-width:90px;height:2px;
  background:linear-gradient(90deg,var(--rosso),transparent);
}

/* ── bottoni ────────────────────────────────────────────────────────────── */
.azioni{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  font-family:var(--titolo);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:var(--s4) var(--s6);border-radius:var(--raggio);
  border:2px solid transparent;min-height:56px;position:relative;
  transition:transform var(--veloce) var(--curva),
             box-shadow var(--medio) var(--curva),
             background-color var(--veloce) var(--curva),
             color var(--veloce) var(--curva);
}
.btn .ico{width:20px;height:20px;stroke-width:2}
.btn-wa{background:#25D366;color:#06301A;border-color:#25D366;box-shadow:var(--ombra)}
.btn-wa:hover{transform:translateY(-3px);background:#1EBA57;box-shadow:var(--ombra-alta)}
.btn-tel{background:transparent;color:var(--inchiostro);border-color:currentColor}
.btn-tel:hover{transform:translateY(-3px);background:var(--inchiostro);color:var(--calce)}
.su-scuro .btn-tel{color:#fff;border-color:rgba(255,255,255,.6)}
.su-scuro .btn-tel:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
.btn:active{transform:translateY(-1px)}

/* ── scheda ─────────────────────────────────────────────────────────────── */
.scheda{
  background:#fff;border:var(--bordo);border-radius:var(--raggio-l);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform var(--medio) var(--curva),
             box-shadow var(--medio) var(--curva),
             border-color var(--medio) var(--curva);
}
.scheda:hover{transform:translateY(-6px);box-shadow:var(--ombra-alta);border-color:transparent}
.scheda .foto{aspect-ratio:4/3;overflow:hidden;background:var(--calce-2);position:relative}
.scheda .foto img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--lento) var(--curva)}
.scheda:hover .foto img{transform:scale(1.06)}
.scheda .corpo{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.scheda p{font-size:var(--t-sm);line-height:1.5;color:var(--grigio)}
.scheda .bollo{
  position:absolute;top:var(--s4);left:var(--s4);z-index:2;
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--rosso);color:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  transition:transform var(--medio) var(--curva)}
.scheda .bollo .ico{width:22px;height:22px;stroke-width:2}
.scheda:hover .bollo{transform:scale(1.08) rotate(-4deg)}


/* ── la scheda dei servizi porta dritta su WhatsApp ─────────────────────── */
a.scheda{text-decoration:none;color:inherit}
a.scheda::after{
  content:'';position:absolute;inset:auto 0 0 0;height:3px;
  background:#25D366;transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--curva)}
a.scheda:hover::after,a.scheda:focus-visible::after{transform:scaleX(1)}
.scheda .corpo{flex:1}
.scheda .apri{
  margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--calce-3);
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--titolo);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:#128C4A;
}
.scheda .apri .ico{width:16px;height:16px;stroke-width:2}
.scheda .apri .freccia{margin-left:auto;transition:transform var(--medio) var(--curva)}
a.scheda:hover .apri .freccia{transform:translateX(5px)}

/* ── callout: la frase chiave della sezione ─────────────────────────────── */
.callout{
  margin-top:var(--s6);padding:var(--s5) var(--s6);
  border-left:4px solid var(--rosso);border-radius:0 var(--raggio) var(--raggio) 0;
  background:linear-gradient(100deg,rgba(190,28,43,.07),rgba(190,28,43,0) 70%);
  font-family:var(--titolo);font-weight:500;font-size:var(--t-xl);
  line-height:1.22;max-width:26ch;
}
.su-scuro .callout{background:linear-gradient(100deg,rgba(224,64,78,.16),transparent 70%);color:#fff}

/* ── dato in grande ─────────────────────────────────────────────────────── */
.dato{display:flex;flex-direction:column;gap:var(--s1)}
.dato b{
  font-family:var(--titolo);font-weight:600;font-size:var(--t-3xl);
  line-height:.9;color:var(--rosso);letter-spacing:-.02em;
}
.dato span{font-size:var(--t-sm);color:var(--grigio);line-height:1.35;max-width:22ch}
.su-scuro .dato b{color:var(--rosso-chiaro)}
.su-scuro .dato span{color:var(--grigio-2)}
.dati{display:flex;flex-wrap:wrap;gap:var(--s7);margin-top:var(--s7)}

/* ── testo sottolineato a mano ──────────────────────────────────────────── */
.segnato{
  background:linear-gradient(transparent 62%,rgba(190,28,43,.22) 62%);
  padding-inline:2px;
}

/* ── elenco con icona ───────────────────────────────────────────────────── */
.elenco{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s5)}
.elenco li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-base);line-height:1.5}
.elenco .ico{width:21px;height:21px;color:var(--rosso);margin-top:4px;stroke-width:2}
.su-scuro .elenco .ico{color:var(--rosso-chiaro)}

/* ── impaginazione a due colonne ────────────────────────────────────────── */
.duecolonne{display:grid;gap:clamp(36px,5vw,84px);align-items:start}
@media(min-width:920px){
  .duecolonne{grid-template-columns:1fr 1fr}
  .duecolonne.stretta-sx{grid-template-columns:.9fr 1.1fr}
  .duecolonne.larga-sx{grid-template-columns:1.1fr .9fr}
}

/* ── cornice per le foto ────────────────────────────────────────────────── */
.cornice{border-radius:var(--raggio-l);overflow:hidden;box-shadow:var(--ombra);position:relative}
.cornice img{width:100%;display:block}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
.coppia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raggio)}

/* ═══ 4 · SEZIONI ══════════════════════════════════════════════════════════ */

/* ── testata ────────────────────────────────────────────────────────────── */
.testata{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--gutter);
  background:color-mix(in srgb,var(--calce) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--medio) var(--curva),
             background-color var(--medio) var(--curva),
             padding var(--medio) var(--curva);
}
.testata.staccata{border-bottom-color:var(--calce-3);padding-block:10px}
.testata img{width:clamp(150px,16vw,206px)}
.testata .btn{padding:var(--s3) var(--s4);font-size:var(--t-xs);min-height:46px}
@media(max-width:600px){.testata .btn-tel{display:none}}

/* ── 1 · apertura ───────────────────────────────────────────────────────── */
.apertura{position:relative;min-height:100svh;display:grid;align-items:center;
  padding-top:calc(var(--s10) + var(--s4));padding-bottom:clamp(48px,7vw,88px);overflow:hidden}
.apertura .sfondo{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.apertura .sfondo img,.apertura .sfondo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apertura::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(16,16,15,.34) 0%,rgba(16,16,15,.12) 42%,rgba(16,16,15,.56) 100%);
}
.apertura .involucro{position:relative;z-index:2;color:#fff}

/* il riquadro che regge le scritte: il video sotto non deve disturbare */
.pannello{
  max-width:44rem;
  padding:clamp(24px,3.2vw,46px);
  border-radius:var(--raggio-l);
  background:rgba(16,18,21,.42);
  backdrop-filter:blur(5px) saturate(1.1);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.75);
}
.pannello .occhiello{color:#fff;opacity:.9;margin-bottom:var(--s4)}
.pannello .occhiello::after{background:linear-gradient(90deg,#fff,transparent);opacity:.45}
.apertura h1{color:#fff;font-size:clamp(36px,5.2vw + 8px,74px);line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.apertura .sotto{font-size:var(--t-lg);margin-top:var(--s4);max-width:38ch;color:#F2EDE6;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.apertura .zona{margin-top:var(--s5);padding-top:var(--s4);font-size:var(--t-sm);color:#B9B1A6;
  border-top:1px solid rgba(255,255,255,.14)}

/* i servizi, in fila sotto il riquadro */
.chips-titolo{
  margin-top:var(--s7);margin-bottom:var(--s3);
  font-family:var(--titolo);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#CFC6BA;
}
.chips{list-style:none;display:grid;gap:var(--s2);max-width:56rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:720px){.chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.chip{
  display:flex;align-items:center;gap:var(--s3);height:100%;
  padding:var(--s3) var(--s4);border-radius:var(--raggio);
  background:rgba(16,18,21,.5);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;text-decoration:none;font-size:var(--t-sm);line-height:1.2;min-height:54px;
  transition:background-color var(--veloce) var(--curva),
             border-color var(--veloce) var(--curva),
             transform var(--veloce) var(--curva);
}
.chip .ico{width:19px;height:19px;color:var(--rosso-chiaro);stroke-width:2;
  transition:color var(--veloce) var(--curva)}
.chip:hover,.chip:focus-visible{background:var(--rosso);border-color:var(--rosso);transform:translateY(-2px)}
.chip:hover .ico,.chip:focus-visible .ico{color:#fff}

/* ── 2 · riparazioni ────────────────────────────────────────────────────── */
.riparazioni{background:var(--calce-2)}

/* ── 3 · servizi ────────────────────────────────────────────────────────── */
.servizi{display:grid;gap:var(--s5);margin-top:var(--s8);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:920px){.servizi{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── 4 · rifacimento: la firma ──────────────────────────────────────────── */
.manto{background:var(--ardesia);color:#fff}
.manto h2{color:#fff}
.manto p{color:#CDD3DA}
.manto .occhiello{color:var(--rosso-chiaro)}
.manto .occhiello::after{background:linear-gradient(90deg,var(--rosso-chiaro),transparent)}
.scena{position:relative;aspect-ratio:4/3;max-width:560px;margin-inline:auto;width:100%;
  touch-action:pan-y}
.scena svg{width:100%;height:100%}
.strati{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s6)}
.strati li{
  display:flex;gap:var(--s4);align-items:baseline;font-size:var(--t-base);
  color:#99A2AD;padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.09);
  transition:color var(--medio) var(--curva);
}
.strati li.acceso{color:#fff}
.strati b{
  font-family:var(--titolo);font-weight:600;font-size:var(--t-xl);line-height:1;
  color:var(--ardesia-3);width:1.6em;flex:none;
  transition:color var(--medio) var(--curva),transform var(--medio) var(--curva);
}
.strati li.acceso b{color:var(--rosso-chiaro);transform:translateX(3px)}

/* ── 5 · sicurezza ──────────────────────────────────────────────────────── */
.modi{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:560px){.modi{grid-template-columns:1fr 1fr}}
.modo{background:#fff;border:var(--bordo);border-radius:var(--raggio-l);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) var(--curva)}
.modo:hover{transform:translateY(-4px);box-shadow:var(--ombra)}
.modo .tondo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(190,28,43,.1);color:var(--rosso)}
.modo .tondo .ico{width:23px;height:23px;stroke-width:2}
.modo p{font-size:var(--t-sm);line-height:1.5;color:var(--grigio)}

/* ── 6 · sopralluogo ────────────────────────────────────────────────────── */
.perizia{background:var(--calce-2)}
.telaio{position:relative;border-radius:var(--raggio-l);overflow:hidden;
  background:var(--ardesia);margin-top:var(--s7);box-shadow:var(--ombra-alta)}
.telaio>img{width:100%;display:block}
.punto{
  position:absolute;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--rosso);color:#fff;font-family:var(--titolo);font-size:var(--t-base);
  font-weight:600;display:grid;place-items:center;
  transition:transform var(--medio) var(--curva),background-color var(--veloce) var(--curva);
}
.punto::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--rosso);opacity:.55;animation:anello 2.8s var(--curva) infinite}
@keyframes anello{0%{transform:scale(.8);opacity:.7}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.punto:hover{transform:translate(-50%,-50%) scale(1.12);background:var(--rosso-scuro)}
.punto[aria-expanded=true]{background:#fff;color:var(--rosso)}
.punto[aria-expanded=true]::before{animation:none;opacity:0}
.didascalia{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s5) var(--gutter);
  background:linear-gradient(to top,rgba(14,16,19,.96),rgba(14,16,19,.74));
  backdrop-filter:blur(6px);color:#fff;font-size:var(--t-base);line-height:1.45;
  transform:translateY(101%);transition:transform var(--lento) var(--curva);
}
.didascalia.aperta{transform:none}
.didascalia b{font-family:var(--titolo);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;font-size:var(--t-xs);color:var(--rosso-chiaro);
  display:block;margin-bottom:var(--s1)}
.invito{margin-top:var(--s4);font-size:var(--t-sm);color:var(--grigio);
  display:flex;align-items:center;gap:var(--s2)}
.invito .ico{width:17px;height:17px;color:var(--rosso)}

/* ── 7 · pannelli ───────────────────────────────────────────────────────── */
.pannelli{background:var(--ardesia);color:#fff}
.pannelli h2{color:#fff}
.pannelli p{color:#CDD3DA}
.pannelli .occhiello{color:var(--rosso-chiaro)}
.pannelli .occhiello::after{background:linear-gradient(90deg,var(--rosso-chiaro),transparent)}
.resa{
  margin-top:var(--s7);padding:var(--s6);border-radius:var(--raggio-l);
  background:linear-gradient(135deg,rgba(224,64,78,.16),rgba(224,64,78,.03));
  border:1px solid rgba(224,64,78,.3);
}
.resa b{display:block;font-family:var(--titolo);font-weight:600;
  font-size:var(--t-cifra);line-height:.85;color:var(--rosso-chiaro);letter-spacing:-.03em}
.resa span{display:block;margin-top:var(--s3);font-size:var(--t-base);color:#E2E6EA}
.colonna-video{position:relative;max-width:340px;border-radius:var(--raggio-l);
  overflow:hidden;background:#000;margin-inline:auto;box-shadow:var(--ombra-alta)}
.colonna-video video,.colonna-video img{width:100%;aspect-ratio:9/16;object-fit:cover}
.audio-off{position:absolute;right:var(--s3);bottom:var(--s3);
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);color:#fff;border:0;
  border-radius:var(--raggio);padding:10px 14px;font-size:var(--t-xs);cursor:pointer;
  font-family:var(--testo);min-height:42px;
  transition:background-color var(--veloce) var(--curva)}
.audio-off:hover{background:rgba(0,0,0,.86)}

/* ── 8 · come funziona ──────────────────────────────────────────────────── */
.passi{list-style:none;counter-reset:p;display:grid;gap:var(--s7);margin-top:var(--s8)}
@media(min-width:860px){.passi{grid-template-columns:repeat(5,1fr);gap:var(--s5)}}
.passi li{counter-increment:p;position:relative;padding-top:var(--s6)}
.passi li::before{
  content:counter(p,decimal-leading-zero);position:absolute;top:-.12em;left:-.04em;
  font-family:var(--titolo);font-size:clamp(56px,5.4vw,84px);font-weight:600;
  color:var(--calce-3);line-height:1;z-index:0;letter-spacing:-.04em;
}
.passi li::after{
  content:'';position:absolute;top:var(--s6);left:0;width:34px;height:3px;background:var(--rosso)}
.passi h3{position:relative;z-index:1;margin-top:var(--s5);margin-bottom:var(--s2)}
.passi p{font-size:var(--t-sm);line-height:1.5;color:var(--grigio)}

/* ── 9 · chi siamo ──────────────────────────────────────────────────────── */
.chi{background:var(--inchiostro);color:var(--calce)}
.chi h2{color:#fff}
.chi p{color:#CBC5BD}
.chi strong{color:#fff}
.chi .occhiello{color:var(--rosso-chiaro)}
.chi .occhiello::after{background:linear-gradient(90deg,var(--rosso-chiaro),transparent)}
.province{font-size:var(--t-sm);color:#948D84;margin-top:var(--s5);line-height:1.6;
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1)}
.chi-foto{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s3)}
.chi-foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--raggio);
  aspect-ratio:3/4}
.chi-foto img:first-child{border-radius:var(--raggio-l) var(--raggio) var(--raggio) var(--raggio-l)}

/* ── 10 · domande ───────────────────────────────────────────────────────── */
.faq{max-width:860px;margin-top:var(--s7)}
.faq details{border-bottom:1px solid var(--calce-3);
  transition:background-color var(--medio) var(--curva)}
.faq details[open]{background:linear-gradient(90deg,rgba(190,28,43,.035),transparent 60%)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s5) var(--s8) var(--s5) var(--s4);
  position:relative;font-family:var(--titolo);font-weight:500;font-size:var(--t-lg);
  line-height:1.24;transition:color var(--veloce) var(--curva);
}
.faq summary:hover{color:var(--rosso)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:'';position:absolute;right:var(--s5);top:50%;background:var(--rosso);
  transition:transform var(--medio) var(--curva),opacity var(--medio) var(--curva)}
.faq summary::before{width:15px;height:2px;transform:translateY(-50%)}
.faq summary::after{width:2px;height:15px;transform:translate(6.5px,-50%)}
.faq details[open] summary::after{transform:translate(6.5px,-50%) rotate(90deg);opacity:0}
.faq .risposta{padding:0 var(--s8) var(--s6) var(--s4);color:var(--grigio);
  font-size:var(--t-base);line-height:1.6}
.faq-coda{margin-top:var(--s7);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4);font-size:var(--t-base)}

/* ── 11 · contatti ──────────────────────────────────────────────────────── */
.contatti{position:relative;color:#fff;overflow:hidden}
.contatti>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.contatti::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,.95))}
.contatti .involucro{position:relative;z-index:2}
.contatti h2{color:#fff}
.contatti p{color:#DBD5CD}
.contatti .occhiello{color:var(--rosso-chiaro)}
.contatti .occhiello::after{background:linear-gradient(90deg,var(--rosso-chiaro),transparent)}
.dati-legali{margin-top:var(--s7);padding-top:var(--s5);font-size:var(--t-sm);
  color:#948D84;line-height:1.7;border-top:1px solid rgba(255,255,255,.12)}

/* ── piede ──────────────────────────────────────────────────────────────── */
footer{background:#121417;color:#8A8680;padding:var(--s6) var(--gutter);
  font-size:var(--t-sm);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);
  align-items:center;justify-content:space-between}
footer a{color:#B8B2AA;text-decoration:none;border-bottom:1px solid rgba(184,178,170,.35);
  transition:color var(--veloce) var(--curva),border-color var(--veloce) var(--curva)}
footer a:hover{color:#fff;border-color:#fff}
footer img{width:158px;opacity:.85}

/* ── barra fissa su telefono ────────────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:var(--s2);
  padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--calce) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--calce-3);
}
.barra .btn{flex:1;padding:var(--s3);font-size:var(--t-xs);min-height:50px}
@media(max-width:768px){.barra{display:flex}body{padding-bottom:78px}}

/* ═══ 5 · MOVIMENTO ════════════════════════════════════════════════════════ */

/* comparsa guidata dallo scroll, con cascata: --i sposta l'inizio */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sale{
      animation:sali linear both;animation-timeline:view();
      animation-range:entry calc(2% + var(--i,0) * 5%) cover calc(30% + var(--i,0) * 4%);
    }
    @keyframes sali{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  }
}

/* ripiego dove animation-timeline non c'è: lo mette main.js con questa classe */
.sale-js{opacity:0;transform:translateY(30px);
  transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva);
  transition-delay:calc(var(--i,0) * 70ms)}
.sale-js.visto{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .punto::before,  .sale-js{opacity:1;transform:none}
}

:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:3px}
.su-scuro :focus-visible,.manto :focus-visible,.chi :focus-visible,
.pannelli :focus-visible,.contatti :focus-visible{outline-color:#fff}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}