/* Commiato · onoranze funebri. Sobrio, caldo, mai lugubre.
   Colori di marca solo da --p --s --t --a; caratteri solo da --f-titoli / --f-testo. */
@font-face{font-family:'EB Garamond';src:url('../_font/eb-garamond/eb-garamond-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../_font/source-sans-3/source-sans-3-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --p:#4b3f63;   /* viola del lutto, spento */
  --s:#eff0ed;   /* pietra chiara */
  --t:#1f2429;   /* ardesia */
  --a:#c3b6d6;   /* lilla */
  --f-titoli:'EB Garamond', Georgia, serif;
  --f-testo:'Source Sans 3', system-ui, sans-serif;

  --tenue:color-mix(in oklab, var(--t) 70%, var(--s));
  --linea:color-mix(in oklab, var(--t) 16%, transparent);
  --velo-p:color-mix(in oklab, var(--p) 8%, var(--s));
  --gutter:clamp(16px, 4vw, 56px);
  --max:1320px;
  --r:18px;
  --testata:76px;
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--testata) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:18px;line-height:1.6;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titoli);font-weight:500;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}

.salta{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--t);color:var(--s);padding:10px 16px;border-radius:999px}
.salta:focus{left:16px}
.contenitore{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- barra di avanzamento (sopra la testata) ---------- */
.avanzamento{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:color-mix(in oklab, var(--p) 14%, var(--s))}
.avanzamento span{display:block;height:100%;background:var(--p);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- testata ---------- */
.testata{position:fixed;top:3px;left:0;right:0;z-index:50;height:var(--testata);background:color-mix(in oklab, var(--s) 86%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow .5s var(--curva)}
.testata.piena{box-shadow:0 1px 0 var(--linea)}
.testata-dentro{height:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-titoli);font-size:22px;font-weight:600;line-height:1.1;min-width:0;margin-right:auto}
.logo span{overflow-wrap:anywhere}
.logo-segno{width:30px;height:30px;flex:none;fill:none;stroke:var(--p);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav{display:flex;gap:26px}
.nav a{font-size:16px;text-decoration:none;color:var(--tenue);padding:10px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--p);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--curva)}
.nav a:hover{color:var(--t)}
.nav a:hover::after{transform:scaleX(1)}
.tel-testata{display:flex;align-items:center;gap:12px;text-decoration:none;padding:8px 18px 8px 8px;border-radius:999px;background:var(--p);color:var(--s);flex:none;min-height:48px;transition:transform .4s var(--curva)}
.tel-testata:active{transform:scale(.98)}
.tel-testata svg{width:32px;height:32px;padding:7px;border-radius:50%;background:color-mix(in oklab, var(--s) 16%, transparent);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.tel-testo{display:flex;flex-direction:column;line-height:1.1}
.tel-testo small{font-size:12px;letter-spacing:.04em;opacity:.85}
.tel-testo strong{font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.burger{display:none;width:48px;height:48px;border:1px solid var(--linea);border-radius:50%;background:transparent;color:var(--t);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform .45s var(--curva)}
.burger span:first-child{top:19px}
.burger span:last-child{top:27px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.pannello{position:fixed;inset:0;z-index:45;background:var(--s);padding:calc(var(--testata) + 40px) var(--gutter) 32px;display:flex;flex-direction:column;gap:28px;overflow-y:auto}
.pannello nav{display:flex;flex-direction:column}
.pannello nav a{font-family:var(--f-titoli);font-size:clamp(28px, 7vw, 40px);line-height:1.15;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--linea)}
.pannello .btn{align-self:flex-start}
.pannello-nota{color:var(--tenue);font-size:16px}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font-family:var(--f-testo);font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .4s var(--curva), background-color .4s var(--curva), color .4s var(--curva);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.btn-pieno{background:var(--p);color:var(--s)}
.btn-pieno:hover{background:color-mix(in oklab, var(--p) 86%, var(--t))}
.btn-vuoto{border-color:color-mix(in oklab, var(--t) 30%, transparent);color:var(--t);background:color-mix(in oklab, var(--s) 50%, transparent)}
.btn-vuoto:hover{background:var(--s);border-color:var(--t)}

/* ---------- hero: foto in dissolvenza lenta che sfuma nella pagina ---------- */
.hero{position:relative;min-height:min(100svh, 980px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;isolation:isolate;padding-top:calc(var(--testata) + 3px)}
.hero-foto{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0}
.hero-foto img.attiva{opacity:1}
.hero-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--s) 45%, transparent) 46%, color-mix(in oklab, var(--s) 92%, transparent) 62%, var(--s) 74%)}
.hero-testo{position:relative;text-align:center;width:100%;max-width:1060px;padding:0 var(--gutter) clamp(44px, 8vh, 100px)}
.hero-sopra{font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--p);margin-bottom:18px}
.hero h1{font-size:clamp(44px, 6.2vw, 100px);line-height:1.04;letter-spacing:-.018em;font-weight:500}
.hero-sotto{font-size:clamp(18px, 1.5vw, 21px);color:var(--tenue);max-width:40ch;margin:22px auto 0;text-wrap:balance}
.hero-azioni{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- fascia ---------- */
.fascia{background:var(--t);color:var(--s)}
.fascia ul{max-width:var(--max);margin-inline:auto;padding:30px var(--gutter);display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
.fascia li{display:flex;flex-direction:column;gap:2px;padding-left:18px;border-left:1px solid color-mix(in oklab, var(--s) 22%, transparent)}
.fascia strong{font-family:var(--f-titoli);font-size:25px;font-weight:500;line-height:1.2}
.fascia span{font-size:16px;color:color-mix(in oklab, var(--s) 72%, var(--t))}

/* ---------- sezioni: testata e titolo che cambia colore ---------- */
section{position:relative}
.testa-sezione{max-width:760px;margin-bottom:56px}
.testa-sezione p{color:var(--tenue);font-size:19px;margin-top:18px;max-width:58ch}
.testa-riga{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.titolo-scorre{font-size:clamp(40px, 5.2vw, 78px);line-height:1.02;letter-spacing:-.022em;padding-bottom:.08em;
  background-image:linear-gradient(90deg, var(--t) 42%, var(--p) 58%);background-size:260% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--t)}
.link-freccia{font-weight:600;text-decoration:none;border-bottom:1px solid var(--p);padding:8px 0 4px;white-space:nowrap}
.link-freccia span{display:inline-block;transition:transform .4s var(--curva)}
.link-freccia:hover span{transform:translateX(4px)}

/* ---------- prime ore: carte che si impilano ---------- */
.prime{padding:clamp(88px, 11vw, 150px) 0 clamp(60px, 8vw, 110px)}
.pila{display:flex;flex-direction:column;gap:28px}
.carta{--bg:var(--velo-p);--ct:var(--t);--ct2:var(--tenue);
  position:sticky;top:calc(var(--testata) + 22px + var(--i, 0) * 16px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px, 4vw, 64px);align-items:stretch;
  height:clamp(380px, 62svh, 500px);padding:clamp(22px, 3.4vw, 48px);border-radius:var(--r);
  background:var(--bg);color:var(--ct);box-shadow:0 -1px 0 color-mix(in oklab, var(--t) 8%, transparent), 0 40px 60px -48px color-mix(in oklab, var(--t) 60%, transparent);
  transform-origin:50% 0}
.carta:nth-child(1){--i:0}
.carta:nth-child(2){--i:1;--bg:color-mix(in oklab, var(--p) 15%, var(--s))}
.carta:nth-child(3){--i:2;--bg:color-mix(in oklab, var(--p) 24%, var(--s))}
.carta:nth-child(4){--i:3;--bg:var(--p);--ct:var(--s);--ct2:color-mix(in oklab, var(--s) 80%, var(--p))}
.carta-testo{display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:520px}
.carta-quando{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ct2)}
.carta h3{font-size:clamp(30px, 3.2vw, 48px);line-height:1.06;letter-spacing:-.012em}
.carta p{color:var(--ct2);font-size:18px}
.carta-link{font-family:var(--f-titoli);font-size:30px;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;line-height:1.3}
.carta-foto{border-radius:calc(var(--r) - 6px);overflow:hidden;position:relative;min-height:0}
.carta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- servizi ---------- */
.servizi{padding:clamp(80px, 10vw, 140px) 0;border-top:1px solid var(--linea)}
.promessa{font-family:var(--f-titoli);font-size:clamp(30px, 3.7vw, 56px);line-height:1.18;letter-spacing:-.01em;max-width:21em;margin-bottom:clamp(80px, 10vw, 150px)}
.servizi .contenitore{display:grid;grid-template-columns:repeat(12, 1fr);column-gap:24px}
.servizi .promessa{grid-column:1 / -1}
.servizi h2{grid-column:1 / 5;align-self:start}
.servizi-elenco{grid-column:5 / -1;display:grid;grid-template-columns:1fr 1fr;gap:48px 48px}
.servizi-elenco li{border-top:1px solid var(--linea);padding-top:26px}
.servizi-elenco svg{width:32px;height:32px;fill:none;stroke:var(--p);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.servizi-elenco h3{font-size:28px;line-height:1.12;margin-bottom:10px}
.servizi-elenco p{color:var(--tenue)}

/* ---------- annunci ---------- */
.annunci{padding:clamp(80px, 10vw, 140px) 0;background:color-mix(in oklab, var(--a) 26%, var(--s))}
.annunci-griglia{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.annuncio{background:var(--s);border-radius:var(--r);padding:34px 26px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 30px 50px -44px color-mix(in oklab, var(--t) 60%, transparent)}
.rametto{width:64px;height:26px;fill:none;stroke:var(--p);stroke-width:1.2;stroke-linejoin:round;margin-bottom:10px}
.annuncio-data{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tenue)}
.annuncio h3{font-size:30px;line-height:1.1;margin-top:4px}
.annuncio-eta{font-family:var(--f-titoli);font-style:italic;font-size:19px;color:var(--tenue)}
.annuncio-esequie{font-size:16px;line-height:1.5;color:var(--tenue);margin-top:10px;padding-top:16px;border-top:1px solid var(--linea)}
.annuncio-link{margin-top:auto;padding-top:18px;font-size:16px;font-weight:600;text-decoration-color:var(--p);text-underline-offset:5px}

/* ---------- prezzi ---------- */
.prezzi{padding:clamp(80px, 10vw, 140px) 0}
.listino{border-bottom:1px solid var(--linea)}
.offerta{display:grid;grid-template-columns:minmax(220px, 300px) 1fr auto;gap:32px;align-items:center;padding:36px 0;border-top:1px solid var(--linea)}
.offerta-prezzo{font-family:var(--f-titoli);font-size:clamp(44px, 4.6vw, 68px);line-height:1;color:var(--p);white-space:nowrap}
.offerta-prezzo small{font-size:20px;color:var(--tenue);font-style:italic;margin-right:4px}
.offerta h3{font-size:30px;margin-bottom:8px}
.offerta p{color:var(--tenue);max-width:60ch}
.offerta-link{font-weight:600;text-decoration:none;padding:13px 22px;border-radius:999px;border:1px solid color-mix(in oklab, var(--t) 28%, transparent);white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;transition:background-color .4s var(--curva), color .4s var(--curva)}
.offerta-link:hover{background:var(--t);color:var(--s)}
.nota{font-size:16px;color:var(--tenue);margin-top:22px}

/* ---------- sala ---------- */
.sala{padding:clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px)}
.sala-griglia{display:grid;grid-template-columns:repeat(12, 1fr);grid-auto-rows:clamp(220px, 22vw, 330px);gap:20px}
.sala-testo{grid-column:1 / 5;grid-row:1 / 3;align-self:center;padding-right:16px}
.sala-testo h2{margin-bottom:24px}
.sala-testo p{color:var(--tenue);margin-bottom:14px}
.sala-foto{border-radius:var(--r);overflow:hidden}
.sala-foto img{width:100%;height:100%;object-fit:cover}
.sala-a{grid-column:5 / 9;grid-row:1 / 3}
.sala-b{grid-column:9 / 13;grid-row:1}
.sala-c{grid-column:9 / 13;grid-row:2}

/* ---------- recensioni ---------- */
.parole{padding:clamp(80px, 10vw, 140px) 0;border-top:1px solid var(--linea)}
.voto{font-size:16px;color:var(--tenue);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stelle{color:var(--p);letter-spacing:.12em;font-size:18px}
.parole-griglia{display:grid;grid-template-columns:repeat(12, 1fr);gap:24px 40px}
.parola{margin:0}
.parola p{font-family:var(--f-titoli);font-size:24px;line-height:1.35}
.parola footer{margin-top:16px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tenue)}
.parola-grande{grid-column:1 / 8;grid-row:1 / 3;padding-right:24px}
.parola-grande p{font-size:clamp(30px, 3.2vw, 46px);line-height:1.2;letter-spacing:-.01em}
.parola:not(.parola-grande){grid-column:8 / 13;padding-top:26px;border-top:1px solid var(--linea)}

/* ---------- contatti ---------- */
.contatti{background:var(--t);color:var(--s);padding:clamp(80px, 10vw, 140px) 0}
.contatti .titolo-scorre{background-image:linear-gradient(90deg, var(--s) 42%, var(--a) 58%)}
.contatti-griglia{display:grid;grid-template-columns:1fr minmax(0, 520px);gap:clamp(40px, 6vw, 96px);align-items:start}
.numero-grande{display:inline-block;font-family:var(--f-titoli);font-size:clamp(46px, 6vw, 90px);line-height:1.05;text-decoration:none;margin-top:28px;white-space:nowrap;border-bottom:1px solid color-mix(in oklab, var(--s) 30%, transparent)}
.numero-nota{color:color-mix(in oklab, var(--s) 74%, var(--t));margin-top:12px}
.dati{margin:40px 0 0;display:grid;gap:22px}
.dati dt{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--a)}
.dati dd{margin:4px 0 0;font-size:18px}
.zone{margin-top:36px;padding-top:26px;border-top:1px solid color-mix(in oklab, var(--s) 18%, transparent)}
.zone-titolo{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--a);margin-bottom:12px}
.zone ul{display:flex;flex-wrap:wrap;gap:8px}
.zone li{font-size:16px;padding:6px 14px;border:1px solid color-mix(in oklab, var(--s) 24%, transparent);border-radius:999px}
.modulo{background:var(--s);color:var(--t);border-radius:var(--r);padding:clamp(24px, 3vw, 40px);display:flex;flex-direction:column}
.modulo h3{font-size:34px;line-height:1.1}
.modulo > p{color:var(--tenue);margin:10px 0 18px;font-size:17px}
.modulo label{font-size:16px;font-weight:600;margin:14px 0 6px}
.modulo input,.modulo select,.modulo textarea{font:inherit;font-size:17px;color:var(--t);background:color-mix(in oklab, var(--t) 3%, var(--s));border:1px solid color-mix(in oklab, var(--t) 24%, transparent);border-radius:12px;padding:12px 14px;min-height:50px;width:100%}
.modulo textarea{resize:vertical;min-height:90px}
.modulo input:focus,.modulo select:focus,.modulo textarea:focus{outline:2px solid var(--p);outline-offset:1px;border-color:transparent}
.modulo .btn{margin-top:24px}

/* ---------- piede ---------- */
.piede{background:var(--t);color:color-mix(in oklab, var(--s) 78%, var(--t));padding:0 0 48px;font-size:16px}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:28px;padding-top:40px;border-top:1px solid color-mix(in oklab, var(--s) 16%, transparent)}
.piede-nome{font-family:var(--f-titoli);font-size:26px;color:var(--s);line-height:1.15}
.piede a{text-decoration:none}
.piede a:hover{color:var(--s)}
.piede-legale{display:flex;gap:18px;align-items:flex-start}

/* ---------- tasto WhatsApp ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--p);color:var(--s);text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 18px 40px -18px color-mix(in oklab, var(--t) 70%, transparent);transition:opacity .5s var(--curva), transform .5s var(--curva)}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
html.js .fab{opacity:0;transform:translateY(16px);pointer-events:none}
html.js .fab.vista{opacity:1;transform:none;pointer-events:auto}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{gap:20px}
  .nav a{font-size:15px}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .testata-dentro{gap:12px}
  .annunci-griglia{grid-template-columns:repeat(2, 1fr)}
  .servizi h2{grid-column:1 / -1;margin-bottom:40px}
  .servizi-elenco{grid-column:1 / -1}
  .sala-testo{grid-column:1 / -1;grid-row:auto;padding:0 0 12px}
  .sala-griglia{grid-auto-rows:clamp(200px, 30vw, 320px)}
  .sala-a{grid-column:1 / 7;grid-row:2 / 4}
  .sala-b{grid-column:7 / 13;grid-row:2}
  .sala-c{grid-column:7 / 13;grid-row:3}
  .piede-griglia{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .fascia ul{grid-template-columns:1fr 1fr;row-gap:20px}
  .carta{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:0;gap:18px}
  .carta-foto{order:-1;aspect-ratio:16/8}
  .offerta{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .offerta-link{justify-self:start;margin-top:6px}
  .parole-griglia{grid-template-columns:1fr;gap:32px}
  .parola-grande,.parola:not(.parola-grande){grid-column:1 / -1;grid-row:auto;padding-right:0}
  .contatti-griglia{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--testata:64px;--r:14px}
  body{font-size:17px}
  .logo{font-size:19px}
  .logo-segno{width:26px;height:26px}
  .tel-testata{padding:0;width:48px;min-height:48px;justify-content:center;background:var(--p)}
  .tel-testata svg{background:none;width:34px;height:34px}
  .tel-testo{display:none}
  .hero-velo{background:linear-gradient(180deg, transparent 12%, color-mix(in oklab, var(--s) 60%, transparent) 36%, color-mix(in oklab, var(--s) 95%, transparent) 50%, var(--s) 60%)}
  .hero-sopra{font-size:13px;letter-spacing:.12em}
  .hero-azioni{flex-direction:column;align-items:stretch}
  .hero-azioni .btn{width:100%}
  .fascia li{padding-left:12px}
  .fascia strong{font-size:21px}
  .fascia span{font-size:15px}
  .testa-sezione{margin-bottom:36px}
  .testa-sezione p{font-size:17px}
  .carta{top:calc(var(--testata) + 14px + var(--i, 0) * 10px);padding:18px}
  .carta h3{font-size:27px}
  .carta p{font-size:16px}
  .carta-quando{font-size:13px}
  .servizi-elenco{grid-template-columns:1fr;gap:32px}
  .annunci-griglia{grid-template-columns:1fr}
  .sala-griglia{grid-auto-rows:auto;gap:12px}
  .sala-a{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/4.4}
  .sala-b,.sala-c{grid-row:auto;aspect-ratio:4/5}
  .sala-b{grid-column:1 / 7}
  .sala-c{grid-column:7 / 13}
  .parola-grande p{font-size:28px}
  .numero-grande{font-size:clamp(40px, 12vw, 56px)}
  .piede-griglia{grid-template-columns:1fr}
  .fab{right:14px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- apertura: una luce calma che si accende e si dissolve ---------- */
.apertura{background:var(--s);display:grid;place-items:center}
.ap-luce{position:absolute;left:50%;top:50%;width:max(140vw, 140vh);aspect-ratio:1;transform:translate(-50%, -50%);border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--a) 60%, var(--s)) 0%, color-mix(in oklab, var(--a) 22%, var(--s)) 45%, transparent 100%)}
.ap-centro{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 24px;text-align:center}
.ap-segno{width:44px;height:44px;fill:none;stroke:var(--p);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ap-nome{font-family:var(--f-titoli);font-size:clamp(28px, 4vw, 54px);line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--t);max-width:18em;text-wrap:balance}
.ap-riga{display:block;width:72px;height:1px;background:var(--p)}