/* Guida ospiti Erre Apartments: stesso vetro liquido del gestionale (docs/stile.md del gestionale).
   Colori del marchio: sabbia #C6AA95, marrone #625551, crema #F1ECE6. */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,video{max-width:100%}
/* Layout: app a una colonna (max 520px) con il vetro liquido del gestionale: sfondo a sfumature calde fermo,
   pannelli di vetro sfocati, pulsanti a capsula. In alto le chiavi e la prossima cosa da fare; il resto "spento" finché non serve. */
:root{
  --sfondo-pagina:
    radial-gradient(900px 600px at 0% 0%,#f6dcc8 0%,transparent 60%),
    radial-gradient(700px 520px at 100% 10%,#e9dbf2 0%,transparent 60%),
    radial-gradient(800px 700px at 80% 100%,#d9e8f2 0%,transparent 60%),
    radial-gradient(700px 600px at 10% 90%,#efe2c9 0%,transparent 60%),#f4efe9;
  --fondo:#f4efe9; --superficie:#fbf8f5;
  --testo:#625551; --tenue:#8a7d77; --sabbia-scura:#7A5F4C; --linea:rgb(98 85 81/.14);
  --vetro:rgb(255 255 255/.52); --vetro-testa:rgb(244 239 233/.62); --vetro-tenue:rgb(255 255 255/.5);
  --vetro-bordo:rgb(255 255 255/.75); --vetro-luce:rgb(255 255 255/.9);
  --vetro-ombra:0 1px 0 var(--vetro-luce) inset,0 0 0 1px rgb(98 85 81/.07),0 10px 30px rgb(98 85 81/.12),0 2px 6px rgb(98 85 81/.06);
  --sfoca:blur(22px) saturate(180%);
  --capsula:linear-gradient(180deg,#74655f,#574b47); --su-capsula:#fff;
  --capsula-ombra:0 1px 0 rgb(255 255 255/.3) inset,0 6px 16px rgb(87 75 71/.28);
  --ok:#2f6b3a; --ok-bg:rgb(227 241 229/.8); --avviso:#9a5b00; --avviso-bg:rgb(253 240 217/.85);
  --demo:#2d3a4a; --demo-bg:#e6ecf3;
  --serif:"EB Garamond",Garamond,serif;
  --sans:-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,sans-serif;
  --raggio:22px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sfondo-pagina:
    radial-gradient(900px 600px at 0% 0%,#3a2b22 0%,transparent 60%),
    radial-gradient(700px 520px at 100% 10%,#2e2538 0%,transparent 60%),
    radial-gradient(800px 700px at 80% 100%,#1f2c36 0%,transparent 60%),
    radial-gradient(700px 600px at 10% 90%,#33291b 0%,transparent 60%),#1a1716;
  --fondo:#1a1716; --superficie:#2a2422; --testo:#EDE3DA; --tenue:#a99a90; --sabbia-scura:#D9BBA3; --linea:rgb(255 255 255/.1);
  --vetro:rgb(58 50 47/.5); --vetro-testa:rgb(31 27 26/.62); --vetro-tenue:rgb(255 255 255/.06);
  --vetro-bordo:rgb(255 255 255/.1); --vetro-luce:rgb(255 255 255/.12);
  --vetro-ombra:0 1px 0 var(--vetro-luce) inset,0 0 0 1px rgb(0 0 0/.25),0 10px 30px rgb(0 0 0/.35);
  --capsula:linear-gradient(180deg,#d6bfad,#b59782); --su-capsula:#2a201b;
  --capsula-ombra:0 1px 0 rgb(255 255 255/.35) inset,0 6px 16px rgb(0 0 0/.35);
  --ok:#8fd19e; --ok-bg:rgb(31 51 36/.8); --avviso:#f0c070; --avviso-bg:rgb(58 45 22/.85);
  --demo:#cfdcea; --demo-bg:#1f2833; color-scheme:dark}}
:root[data-theme="dark"]{
  --sfondo-pagina:
    radial-gradient(900px 600px at 0% 0%,#3a2b22 0%,transparent 60%),
    radial-gradient(700px 520px at 100% 10%,#2e2538 0%,transparent 60%),
    radial-gradient(800px 700px at 80% 100%,#1f2c36 0%,transparent 60%),
    radial-gradient(700px 600px at 10% 90%,#33291b 0%,transparent 60%),#1a1716;
  --fondo:#1a1716; --superficie:#2a2422; --testo:#EDE3DA; --tenue:#a99a90; --sabbia-scura:#D9BBA3; --linea:rgb(255 255 255/.1);
  --vetro:rgb(58 50 47/.5); --vetro-testa:rgb(31 27 26/.62); --vetro-tenue:rgb(255 255 255/.06);
  --vetro-bordo:rgb(255 255 255/.1); --vetro-luce:rgb(255 255 255/.12);
  --vetro-ombra:0 1px 0 var(--vetro-luce) inset,0 0 0 1px rgb(0 0 0/.25),0 10px 30px rgb(0 0 0/.35);
  --capsula:linear-gradient(180deg,#d6bfad,#b59782); --su-capsula:#2a201b;
  --capsula-ombra:0 1px 0 rgb(255 255 255/.35) inset,0 6px 16px rgb(0 0 0/.35);
  --ok:#8fd19e; --ok-bg:rgb(31 51 36/.8); --avviso:#f0c070; --avviso-bg:rgb(58 45 22/.85);
  --demo:#cfdcea; --demo-bg:#1f2833; color-scheme:dark}
@media (prefers-reduced-transparency:reduce){:root{--vetro:var(--superficie);--vetro-testa:var(--superficie)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--vetro:var(--superficie);--vetro-testa:var(--superficie)}}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--fondo);color:var(--testo);font-family:var(--sans);font-size:16px;line-height:1.45;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
.sfondo{position:fixed;inset:0;z-index:-1;background:var(--sfondo-pagina);pointer-events:none}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--vetro-testa);-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca)}
h1,h2,h3{margin:0;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;letter-spacing:inherit}
:focus-visible{outline:3px solid var(--sabbia-scura);outline-offset:2px;border-radius:10px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.vetro{background:var(--vetro);-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);border:1px solid var(--vetro-bordo);border-radius:var(--raggio);box-shadow:var(--vetro-ombra)}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--vetro-testa);-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);border-bottom:1px solid var(--vetro-bordo);
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding-block:8px;min-height:56px}
.top .titolo{text-align:center;font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marchio{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.marchio span{color:var(--sabbia-scura)}
.marchio svg{width:24px;height:24px}
.tondo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea)}
.azioni{display:flex;gap:6px;align-items:center}
.lingua{font-size:.8rem;font-weight:700}
.prova{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--demo-bg);color:var(--demo);border-radius:999px;padding:7px 10px}

.anim{display:flex;flex-direction:column;gap:16px;padding-block:16px 8px}
@media (prefers-reduced-motion:no-preference){.anim.entra{animation:entra .3s cubic-bezier(.2,.8,.2,1) both}.anim.esce{animation:esce .3s cubic-bezier(.2,.8,.2,1) both}
 @keyframes entra{from{transform:translateX(22px);opacity:.4}to{transform:none;opacity:1}}@keyframes esce{from{transform:translateX(-22px);opacity:.4}to{transform:none;opacity:1}}}
.testa h1{font-size:1.9rem;font-weight:800;line-height:1.08}
.testa p{color:var(--tenue);margin-top:6px}
.eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sabbia-scura);font-weight:700}

.hero{position:relative;border-radius:28px;overflow:hidden;min-height:200px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--vetro-ombra)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:saturate(.8) brightness(.9)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,30,25,.22) 0%,rgba(40,30,25,.38) 45%,rgba(30,22,18,.8) 100%)}
.hero h1,.hero p{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero .dentro{position:relative;z-index:1;padding:18px;display:flex;flex-direction:column;gap:2px}
.hero .eyebrow{color:#F0DECF}
.hero h1{font-family:var(--serif);font-weight:500;font-size:2.3rem;line-height:1.02;letter-spacing:0}
.hero p{opacity:.92;font-size:.92rem}

.chiavi{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.chiavi .eyebrow{grid-column:1/-1}
.capsula{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra);padding:13px 18px;font-weight:700;text-decoration:none;min-height:50px}
.capsula.chiara{background:var(--vetro-tenue);color:var(--testo);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea)}
.capsula.piena{width:100%}
.chiavi .portone{flex-direction:column;border-radius:18px;min-height:96px;gap:6px}
.chiavi .portone svg.i{width:28px;height:28px}
.codicebox{border-radius:18px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px;text-align:center}
.codicebox small{font-size:.75rem;color:var(--tenue);font-weight:600}
.codice{font-size:2rem;font-weight:800;letter-spacing:.1em;font-variant-numeric:tabular-nums;line-height:1.1}

.prossima{padding:16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-decoration:none}
.prossima .eyebrow{grid-column:1/-1}
.prossima h2{font-size:1.3rem;font-weight:800}
.prossima p{color:var(--tenue);font-size:.9rem}
.freccia{width:42px;height:42px;border-radius:50%;background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra);display:grid;place-items:center;grid-row:2/4;grid-column:2}

.tessere{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tessera{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:14px;min-height:124px;text-decoration:none;position:relative;transition:opacity .2s}
.tessera .ic{width:42px;height:42px;border-radius:13px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:grid;place-items:center;color:var(--sabbia-scura)}
.tessera strong{display:block;font-weight:800;font-size:1.08rem}
.tessera small{display:block;color:var(--tenue);font-size:.8rem;margin-top:1px}
.tessera.largo{grid-column:1/-1;min-height:96px}
.tessera.acceso{outline:2px solid var(--sabbia-scura);outline-offset:-2px}
.tessera.acceso .ic{background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra)}
.spento{opacity:.45;filter:saturate(.2)}
.spento:hover,.spento:focus-visible{opacity:.7}
.bollino{position:absolute;top:12px;right:12px;font-size:.68rem;font-weight:700;border-radius:999px;padding:3px 8px;background:var(--vetro-tenue);box-shadow:0 0 0 1px var(--linea)}
.bollino.ok{background:var(--ok-bg);color:var(--ok);box-shadow:none}

.righe{overflow:hidden}
.riga{display:flex;align-items:center;gap:14px;padding:13px 14px;text-decoration:none;border-top:1px solid var(--linea);width:100%;text-align:left}
.riga:first-child{border-top:0}
.riga .ic{width:36px;height:36px;border-radius:11px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:grid;place-items:center;color:var(--sabbia-scura);flex:none;font-weight:700}
.riga .tx{flex:1;min-width:0}
.riga .tx strong{display:block;font-weight:600}
.riga .tx small{color:var(--tenue);font-size:.85rem}
.riga .chev{color:var(--tenue)}

.blocco{padding:16px;display:flex;flex-direction:column;gap:10px}
.fila{display:flex;gap:8px}.fila>*{flex:1}
.nota{font-size:.85rem;color:var(--tenue)}
.stato{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700;white-space:nowrap}
.stato.ok{background:var(--ok-bg);color:var(--ok)}.stato.no{background:var(--avviso-bg);color:var(--avviso)}
.esempio{font-size:.66rem;border:1px dashed currentColor;opacity:.7;border-radius:6px;padding:0 5px;font-weight:500;letter-spacing:0;text-transform:none;vertical-align:middle}
.manca{background:var(--avviso-bg);color:var(--avviso);border-radius:16px;padding:12px 14px;font-size:.88rem}
.foto2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.foto2 img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;display:block;background:var(--linea)}

.puntini{display:flex;gap:6px}.puntini i{height:5px;flex:1;border-radius:3px;background:var(--linea)}.puntini i.on{background:var(--sabbia-scura)}
.wifi{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.wifi small{color:var(--tenue)}.wifi strong{font-weight:700;overflow-wrap:anywhere}
.spunte{list-style:none;margin:0;padding:0}
.spunte label{display:flex;gap:14px;align-items:center;padding:14px;border-top:1px solid var(--linea);cursor:pointer}
.spunte li:first-child label{border-top:0}
.spunte input{width:24px;height:24px;accent-color:var(--sabbia-scura);flex:none;margin:0}
.spunte input:checked+span{text-decoration:line-through;color:var(--tenue)}
.ospite{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--linea)}
.ospite:first-child{border-top:0}.ospite span{flex:1;min-width:0}
.carica{position:relative;overflow:hidden;font-size:.85rem;padding:8px 14px;min-height:36px;white-space:nowrap}
.carica input{position:absolute;inset:0;opacity:0;cursor:pointer}

.tappe{list-style:none;margin:0;padding:0}
.tappe li{display:grid;grid-template-columns:30px 1fr auto;gap:2px 12px;padding:13px 14px;border-top:1px solid var(--linea);align-items:start}
.tappe li:first-child{border-top:0}
.tappe .n{width:28px;height:28px;border-radius:50%;background:var(--capsula);color:var(--su-capsula);font-size:.78rem;font-weight:700;display:grid;place-items:center;grid-row:1/3}
.tappe strong{font-weight:700}
.tappe small{grid-column:2;color:var(--tenue);font-size:.85rem}
.tappe a{grid-row:1/3;grid-column:3;align-self:center;font-size:.8rem;font-weight:700;border-radius:999px;padding:7px 11px;text-decoration:none;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea)}
.segmenti{display:flex;gap:4px;padding:4px;border-radius:999px}
.segmenti button{flex:1;border-radius:999px;padding:8px;font-size:.88rem;font-weight:600}
.segmenti button[aria-pressed="true"]{background:var(--superficie);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.sos{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.sos div{padding:14px 4px;border-left:1px solid var(--linea)}.sos div:first-child{border-left:0}
.sos strong{display:block;font-size:1.8rem;font-weight:800;line-height:1}.sos small{font-size:.78rem;color:var(--tenue)}
.faq details{border-top:1px solid var(--linea)}.faq details:first-child{border-top:0}
.faq summary{list-style:none;padding:14px;font-weight:600;display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--sabbia-scura);font-weight:400}
.faq details[open] summary::after{content:"–"}.faq details p{padding:0 14px 14px}
.dett-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:var(--sabbia-scura)}

.foglio{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center}
.foglio .dentro{background:var(--demo-bg);color:var(--demo);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;font-size:.88rem;max-height:88vh;overflow:auto}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid currentColor;border-radius:999px;padding:6px 12px;font-size:.84rem;opacity:.75}
.seg button[aria-pressed="true"]{background:var(--demo);color:var(--demo-bg);opacity:1}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra);padding:11px 18px;border-radius:999px;font-size:.9rem;font-weight:600;z-index:30;max-width:calc(100% - 32px);text-align:center}
/* linea del soggiorno */
.viaggio{list-style:none;margin:0;padding:6px 0}
.viaggio li{position:relative}
.viaggio a{display:grid;grid-template-columns:36px 1fr auto;gap:2px 12px;align-items:center;padding:10px 14px;text-decoration:none}
.viaggio li:not(:last-child)::after{content:"";position:absolute;left:31px;top:48px;bottom:-10px;border-left:2px solid var(--linea)}
.viaggio .pallino{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);color:var(--sabbia-scura);grid-row:1/3}
.viaggio .ora .pallino{background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra)}
.viaggio strong{font-weight:700}.viaggio small{grid-column:2;color:var(--tenue);font-size:.85rem}
.viaggio .chev{grid-row:1/3;grid-column:3;color:var(--tenue)}
.viaggio li.ora a{grid-template-rows:auto auto auto;padding-block:14px;margin:4px 6px;border-radius:18px;background:var(--superficie);box-shadow:0 0 0 1.5px var(--sabbia-scura);position:relative;z-index:1}
.viaggio li.ora .pallino{grid-row:1/4;width:40px;height:40px}
.viaggio li.ora .eyebrow{grid-column:2}
.viaggio li.ora strong{font-size:1.2rem;font-weight:800;grid-column:2}
.viaggio li.ora .freccia{grid-row:1/4;grid-column:3}
.viaggio li.ora::after{top:66px}
.viaggio .pallino.ok{color:var(--testo);background:var(--superficie);box-shadow:0 0 0 2px var(--testo)}
.viaggio .pallino.ok svg.i{stroke-width:3.2;width:20px;height:20px}
.viaggio li.fatto strong,.viaggio li.fatto small,.viaggio li.fatto .chev{opacity:.5}
.contratto{max-height:46vh;overflow:auto;padding:16px;font-size:.86rem;line-height:1.5;display:flex;flex-direction:column;gap:8px}
.contratto h3{font-size:.95rem;font-weight:800;letter-spacing:0}
.contratto b{font-weight:700;background:var(--vetro-tenue);box-shadow:0 0 0 1px var(--linea);border-radius:5px;padding:0 4px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.campi label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--tenue);font-weight:600;min-width:0}
.campi label.largo{grid-column:1/-1}
.campi input{font:inherit;font-size:.95rem;color:var(--testo);background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:10px;min-width:0;width:100%}
.campi input[readonly]{background:transparent;border-style:dashed}
.accetto{display:flex;gap:12px;align-items:flex-start;padding:14px;border-top:1px solid var(--linea);cursor:pointer}
.accetto:first-child{border-top:0}
.accetto input{width:22px;height:22px;accent-color:var(--sabbia-scura);flex:none;margin:1px 0 0}
.firma{position:relative;border-radius:18px;background:var(--superficie);border:1.5px dashed var(--sabbia-scura);height:170px;touch-action:none}
.firma canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:18px;cursor:crosshair}
.firma span{position:absolute;left:16px;right:16px;bottom:34px;border-bottom:1px solid var(--linea);pointer-events:none}
.firma small{position:absolute;left:16px;bottom:10px;font-size:.75rem;color:var(--tenue);pointer-events:none}
.capsula:disabled{opacity:.4;cursor:not-allowed}
.video{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:9/12;max-height:60vh;background:linear-gradient(160deg,#8c7262,#4a3d38);display:grid;place-items:center;color:#fff;box-shadow:var(--vetro-ombra)}
.video .play{width:68px;height:68px;border-radius:50%;background:rgb(255 255 255/.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;border:1px solid rgb(255 255 255/.5)}
.video .play svg.i{width:30px;height:30px;fill:#fff;stroke:none}
.video small{position:absolute;left:14px;bottom:12px;font-size:.78rem;font-weight:600;opacity:.9}
.filmato{width:100%;aspect-ratio:16/9;border-radius:20px;background:#2a221e;box-shadow:var(--vetro-ombra);display:block;object-fit:cover}
.foto1{width:100%;border-radius:20px;display:block;box-shadow:var(--vetro-ombra)}
.didascalia{font-size:.8rem;color:var(--tenue);margin-top:-8px}
.mappa{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none}
.mappa svg{width:40px;height:40px;flex:none}
.mappa strong{display:block;font-size:1.25rem;font-weight:800}
.mappa small{color:var(--tenue);font-size:.85rem}
.mappa .chev{margin-left:auto;color:var(--tenue)}
.chiama{background:var(--avviso-bg);color:var(--avviso);border-radius:var(--raggio);padding:16px;display:flex;flex-direction:column;gap:10px}
.chiama strong{font-size:1.15rem;font-weight:800}
.chiama .capsula{background:var(--avviso);color:#fff;box-shadow:none}
.numero{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.opzione{display:flex;flex-direction:column;gap:10px}
.opzione h2{font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:10px}
.opzione h2 .ic{width:34px;height:34px;border-radius:10px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:grid;place-items:center;color:var(--sabbia-scura)}
.alternativa{overflow:hidden}
.alternativa .alt-testa{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--linea)}
.alternativa .alt-testa h2{font-size:1.2rem;font-weight:800;flex:1}
.alternativa .alt-testa .ic{width:40px;height:40px;border-radius:12px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:grid;place-items:center;color:var(--sabbia-scura);flex:none}
.alternativa.consigliata{box-shadow:var(--vetro-ombra),0 0 0 2px var(--sabbia-scura)}
.alternativa.consigliata .alt-testa .ic{background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra)}
.alternativa .testo{padding:14px 16px 4px;display:flex;flex-direction:column;gap:8px}
.alternativa .righe .riga:first-child{border-top:1px solid var(--linea)}
.badge{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 9px;background:var(--capsula);color:var(--su-capsula)}
.oppure{display:flex;align-items:center;gap:12px;color:var(--tenue);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.oppure::before,.oppure::after{content:"";flex:1;border-top:1px solid var(--linea)}
.mappa-mini{font-size:.8rem;font-weight:700;border-radius:999px;padding:7px 11px;text-decoration:none;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);white-space:nowrap}
.app-taxi{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:center;padding:13px 16px;border-top:1px solid var(--linea)}
.app-taxi .icona{width:52px;height:52px;border-radius:13px;overflow:hidden;display:grid;place-items:center;grid-row:1/3;box-shadow:0 0 0 1px var(--linea),0 2px 6px rgb(0 0 0/.12);text-decoration:none}
.app-taxi .icona img{width:100%;height:100%;display:block}
.app-taxi .icona.uber{background:#000;color:#fff;font-weight:600;font-size:.82rem;letter-spacing:-.02em}
.app-taxi .icona.anmgo{background:#0d2f6b;color:#fff;font-weight:800;font-size:.72rem;line-height:1;text-align:center}
.app-taxi .icona.ittaxi{background:#fff;color:#0a4d8c;font-weight:800;font-size:.95rem;letter-spacing:-.04em}
.app-taxi strong{font-weight:700}
.app-taxi .tasti{display:flex;gap:8px;flex-wrap:wrap}
.tasto{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:700;text-decoration:none;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea)}
.tasto.pieno{background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra)}
.tasto svg.i{width:16px;height:16px}
.luoghi{list-style:none;margin:0;padding:0}
.luoghi li{display:grid;grid-template-columns:76px 1fr;gap:4px 14px;padding:12px 14px;border-top:1px solid var(--linea);align-items:center}
.luoghi li:first-child{border-top:0}
.luoghi img{width:76px;height:76px;border-radius:14px;object-fit:cover;grid-row:1/3;box-shadow:0 0 0 1px var(--linea)}
.luoghi strong{font-weight:700;line-height:1.2}
.luoghi small{color:var(--tenue);font-size:.8rem}
.luoghi .tasti{grid-column:2;display:flex;gap:8px;align-items:center;margin-top:4px}
.gm{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--superficie);box-shadow:0 0 0 1px var(--linea)}
.gm svg{width:20px;height:20px}
.copertina-luogo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;display:block;box-shadow:var(--vetro-ombra)}
.punti{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.wa{width:36px;height:36px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}
.wa svg{width:22px;height:22px}
.dest{display:block;font-weight:700;color:var(--testo);margin-top:3px;font-size:.88rem}
.luoghi .ph{width:76px;height:76px;border-radius:14px;grid-row:1/3;display:grid;place-items:center;background:linear-gradient(150deg,#b39a88,#6f5d55);color:#fff}
.luoghi .ph svg.i{width:30px;height:30px}
.gruppo{display:flex;flex-direction:column;gap:8px}
.gruppo>strong{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:10px}
.gruppo>strong .ic{width:32px;height:32px;border-radius:10px;background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea);display:grid;place-items:center;color:var(--sabbia-scura)}
.tondo-portone{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px auto 0;font-weight:700;font-size:.9rem}
.tondo-portone .cerchio{width:92px;height:92px;border-radius:50%;background:var(--capsula);color:var(--su-capsula);box-shadow:var(--capsula-ombra),0 0 0 6px var(--vetro-tenue);display:grid;place-items:center}
.tondo-portone .cerchio svg.i{width:34px;height:34px}
.tondo-portone:active .cerchio{transform:scale(.96)}
.evento{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:14px;border-top:1px solid var(--linea)}
.evento:first-child{border-top:0}
.evento .ic{width:36px;height:36px;border-radius:11px;background:var(--capsula);color:var(--su-capsula);display:grid;place-items:center}
.evento .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.evento .quando{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sabbia-scura);font-weight:700}
.evento strong{font-weight:700;font-size:1.02rem}
.evento small{color:var(--tenue);font-size:.84rem}
.evento p{font-size:.9rem;margin-top:2px}
.evento .tasti{display:flex;gap:8px;align-items:center;margin-top:6px}
textarea{width:100%;min-height:110px;border-radius:16px;border:1px solid var(--linea);background:var(--superficie);color:var(--testo);font:inherit;padding:12px;resize:vertical}

/* barra in basso a capsula, con il cerchio delle chiavi al centro */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:0 max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));pointer-events:none}
.barra nav{pointer-events:auto;max-width:496px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 84px 1fr 1fr;align-items:center;border-radius:999px;padding:6px;
  background:var(--vetro-testa);-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);border:1px solid var(--vetro-bordo);box-shadow:var(--vetro-ombra)}
.barra a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:999px;font-size:.68rem;font-weight:600;text-decoration:none;color:var(--tenue)}
.barra a[aria-current="page"]{color:var(--testo);background:var(--vetro-tenue);box-shadow:0 1px 0 var(--vetro-luce) inset,0 0 0 1px var(--linea)}
.barra .centro{justify-self:center;width:70px;height:70px;margin-top:-30px;border-radius:50%;background:var(--capsula);color:var(--su-capsula);
  box-shadow:var(--capsula-ombra),0 0 0 5px var(--fondo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:.66rem;font-weight:700}
.barra .centro svg.i{width:26px;height:26px}
.barra .centro.chiuso{background:var(--superficie);color:var(--tenue);box-shadow:0 0 0 1px var(--linea),0 0 0 5px var(--fondo)}

/* pannello delle chiavi */
.pannello{position:fixed;inset:0;z-index:15;background:rgba(20,14,12,.38);display:flex;align-items:flex-end;justify-content:center}
.pannello .dentro{width:100%;max-width:520px;border-radius:28px 28px 0 0;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--vetro-testa);-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);border-top:1px solid var(--vetro-bordo);display:flex;flex-direction:column;gap:14px}
.maniglia{width:40px;height:5px;border-radius:3px;background:var(--linea);align-self:center}
.pannello .portone{min-height:76px;font-size:1.1rem}
.pannello .codicebox{padding:16px}
.pannello .codice{font-size:2.8rem}
@media (prefers-reduced-motion:no-preference){.pannello .dentro{animation:sale .28s cubic-bezier(.2,.8,.2,1) both}@keyframes sale{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}}
.prova-fab{position:fixed;z-index:7;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--demo-bg);color:var(--demo);border-radius:999px;padding:7px 10px;box-shadow:0 2px 8px rgb(0 0 0/.15)}
.toast{bottom:calc(110px + env(safe-area-inset-bottom,0px))!important}
.tondo[aria-current="page"]{background:var(--capsula);color:var(--su-capsula)}
@media (max-width:360px){.tessere{gap:8px}.tessera{padding:12px}.codice{font-size:1.6rem}}