/* Anderson Luxury NCC — stile condiviso da tutte le pagine (generate da strumenti/genera.py) */
:root{
  --nero:#000; --pece:#0b0906; --filo:rgba(217,174,92,.24);
  --oro:#d9ae5c; --oro-chiaro:#f8dc94; --oro-scuro:#9a6f24;
  --avorio:#f1e9d8; --sabbia:#a89d86;
  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --testo:"Hanken Grotesk",system-ui,sans-serif;
  --lato:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nero);color:var(--avorio);font-family:var(--testo);font-weight:300;font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.012em}
.oro{background:linear-gradient(100deg,var(--oro-scuro),var(--oro-chiaro) 42%,var(--oro) 68%,var(--oro-scuro));-webkit-background-clip:text;background-clip:text;color:transparent}
.nota{color:var(--sabbia);font-size:.95rem}

/* barra in alto */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--lato);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(0,0,0,.74);backdrop-filter:blur(14px);border-color:var(--filo)}
.nav .brand{font-family:var(--display);font-weight:500;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;margin-right:auto}
.nav .voce{font-size:.92rem;color:var(--sabbia);transition:color .25s}
.nav .voce:hover{color:var(--oro-chiaro)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9em 1.7em;border:1px solid var(--oro);color:var(--oro-chiaro);font:400 .95rem var(--testo);letter-spacing:.02em;transition:background .3s,color .3s;cursor:pointer;background:transparent;border-radius:0}
.btn:hover,.btn.pieno{background:linear-gradient(100deg,var(--oro-scuro),var(--oro-chiaro) 50%,var(--oro));color:#140e03;font-weight:500}
.btn.pieno:hover{filter:brightness(1.08)}
.nav .btn{padding:.55em 1.1em;font-size:.88rem}

.scendi{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:.85rem;color:var(--sabbia);display:flex;flex-direction:column;align-items:center;gap:10px}
.scendi i{width:1px;height:38px;background:linear-gradient(var(--oro),transparent);animation:goccia 2s infinite}
@keyframes goccia{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* scena legata allo scroll */
.stage{height:600vh;position:relative}
.stage .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--nero)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .velo{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 50%,transparent 42%,rgba(0,0,0,.72) 100%);pointer-events:none}
.cap{position:absolute;left:0;right:0;padding:0 var(--lato);text-align:center;opacity:0;will-change:opacity,transform;pointer-events:none}
.cap.su{top:13vh}.cap.giu{bottom:11vh}
.cap h2{font-size:clamp(2.1rem,6.4vw,4.8rem);font-style:italic;text-shadow:0 2px 30px #000}
.cap p{margin-top:10px;text-shadow:0 1px 14px #000,0 0 30px #000}
.cap .prima{margin:0 0 10px;color:var(--oro-chiaro);font-size:.98rem}
.lampo{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#fff3cf,#e9bd66 45%,#7a5417 100%);opacity:0;pointer-events:none}
.corsa{position:absolute;left:var(--lato);right:var(--lato);bottom:22px;height:1px;background:var(--filo)}
.corsa b{display:block;height:100%;background:var(--oro-chiaro);transform-origin:left;transform:scaleX(0)}

/* sezioni */
.blocco{padding:clamp(84px,13vw,168px) var(--lato);position:relative}
.dentro-largo{width:min(1240px,100%);margin:0 auto}
.testa{display:grid;grid-template-columns:1.25fr 1fr;gap:24px clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(36px,6vw,70px)}
.testa h2{font-size:clamp(2.5rem,7vw,5.4rem)}
.testa p{color:var(--sabbia);max-width:40ch;padding-bottom:.5em}

/* servizi: un tabellone di tratte */
.tratte{list-style:none;border-top:1px solid var(--filo)}
.tratte button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:10px 40px;align-items:baseline;width:100%;padding:26px 0;border-bottom:1px solid var(--filo);cursor:pointer;position:relative}
.tratte button::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--oro-chiaro);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tratte button:hover::after,.tratte button:focus-visible::after{transform:scaleX(1)}
.tratte h3{font-size:clamp(1.7rem,3.6vw,2.9rem);transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
.tratte button:hover h3,.tratte button:focus-visible h3{transform:translateX(14px);color:var(--oro-chiaro)}
.tratte p{color:var(--sabbia)}
.tratte .vai{color:var(--oro);font-size:.95rem;opacity:0;transition:opacity .3s;white-space:nowrap}
.tratte button:hover .vai,.tratte button:focus-visible .vai{opacity:1}

/* auto: giro trascinabile */
.auto{background:linear-gradient(180deg,var(--nero),var(--pece) 45%,var(--nero))}
.auto h2{font-size:clamp(2.5rem,7vw,5.4rem)}
.auto h2 em{font-style:italic}
.viste{display:flex;gap:30px;margin-top:clamp(20px,3vw,34px)}
.vista{all:unset;box-sizing:border-box;cursor:pointer;color:var(--sabbia);font-size:.98rem;padding:10px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.vista:hover{color:var(--oro-chiaro)}
.vista.attiva{color:var(--oro-chiaro);border-bottom-color:var(--oro)}
.vista:focus-visible{outline:1px solid var(--oro);outline-offset:4px}
.giro{position:relative;margin:clamp(26px,4vw,48px) calc(var(--lato) * -1) 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.giro.preso{cursor:grabbing}
.giro img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:68svh;object-fit:cover;object-position:50% 62%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.guida{display:flex;align-items:center;gap:18px;margin-top:6px}
.guida span{color:var(--sabbia);font-size:.92rem;white-space:nowrap}
#giro-lato{min-width:8.4em}
.guida input{flex:1;-webkit-appearance:none;appearance:none;height:28px;background:transparent;border:0;padding:0;cursor:pointer}
.guida input::-webkit-slider-runnable-track{height:1px;background:var(--filo)}
.guida input::-moz-range-track{height:1px;background:var(--filo)}
.guida input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:1px solid var(--oro-chiaro);background:#000 radial-gradient(circle,var(--oro-chiaro) 0 3px,transparent 4px)}
.guida input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:1px solid var(--oro-chiaro);background:#000 radial-gradient(circle,var(--oro-chiaro) 0 3px,transparent 4px)}
.scheda{display:grid;grid-template-columns:1fr 1.1fr;gap:30px clamp(30px,6vw,90px);margin-top:clamp(40px,6vw,76px)}
.scheda .intro{color:var(--sabbia);max-width:44ch}
.dati{border-top:1px solid var(--filo)}
.dati div{display:grid;grid-template-columns:8.5em 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--filo)}
.dati dt{color:var(--sabbia)}

/* prenotazione */
.prenota .colonne{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,90px)}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
form .tutta{grid-column:1/-1}
label{display:block;font-size:.9rem;color:var(--sabbia);margin-bottom:4px}
input:not([type=range]),select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--filo);color:var(--avorio);font:300 1.05rem var(--testo);padding:9px 0;outline:none;transition:border-color .3s;color-scheme:dark;border-radius:0}
input:not([type=range]):focus,select:focus{border-color:var(--oro-chiaro)}
select option{background:#111}
.contatti a{display:block;padding:22px 0;border-bottom:1px solid var(--filo);transition:padding .3s}
.contatti a:first-child{border-top:1px solid var(--filo)}
.contatti a:hover{padding-left:12px}
.contatti small{display:block;font-size:.9rem;color:var(--sabbia)}
.contatti span{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.2rem);overflow-wrap:anywhere;color:var(--oro-chiaro)}

footer{border-top:1px solid var(--filo);padding:46px var(--lato) 96px;text-align:center;color:var(--sabbia);font-size:.92rem}
footer img{width:86px;height:auto;mix-blend-mode:lighten;margin-bottom:12px}
footer p+p{margin-top:6px}
.tricolore{width:90px;height:2px;margin:18px auto;background:linear-gradient(90deg,#1e8a45 33%,#f3f0e8 33% 66%,#c8202c 66%)}

.wa{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--oro-chiaro),var(--oro-scuro));box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .3s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:#140e03}

@media (max-width:820px){
  .nav .voce{display:none}
  .nav .brand{font-size:.95rem;letter-spacing:.14em}
  .testa,.scheda,.prenota .colonne{grid-template-columns:1fr}
  .tratte button{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .tratte .vai{opacity:1}
  .giro img{aspect-ratio:4/3}
  form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scendi i{animation:none}
  .tratte h3,.tratte button::after{transition:none}
}

/* aggiunte dopo la revisione */
.salta{position:absolute;left:-9999px}
.salta:focus{left:var(--lato);top:70px;z-index:70;background:var(--nero);color:var(--oro-chiaro);padding:.7em 1.1em;border:1px solid var(--oro)}
.nav .lingua{font-size:.92rem;color:var(--avorio);border-bottom:1px solid var(--filo);padding:6px 0;transition:color .25s,border-color .25s}
.nav .lingua:hover{color:var(--oro-chiaro);border-color:var(--oro)}
.wa{transition:transform .3s,opacity .3s}
.wa.nascosto{opacity:0;pointer-events:none}
form .nota{grid-column:1/-1}
::placeholder{color:#8d836f;opacity:1}
@media (max-width:820px){.nav{gap:16px}.guida span{font-size:.85rem}}
/* fondo scuro sfumato dietro i testi in basso, perché restino leggibili sulle immagini chiare */
.cap.giu{bottom:0;padding-top:90px;padding-bottom:11vh;background:linear-gradient(transparent,rgba(0,0,0,.78) 55%)}
.nav .brand{white-space:nowrap}
@media (max-width:820px){.nav .brand{font-size:.84rem;letter-spacing:.09em}.nav .lingua,.nav .btn{white-space:nowrap}}

/* ---------- caratteri: copiati nel sito, non caricati da Google ---------- */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/bodoni-moda-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(assets/fonts/bodoni-moda-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/hanken-grotesk-normal.woff2) format("woff2")}

/* ---------- pagine di servizio, tariffe e nuove sezioni della pagina principale ---------- */
.dentro-stretto{width:min(820px,100%);margin:0 auto}
.azioni{display:flex;gap:18px 26px;align-items:center;flex-wrap:wrap}
.azioni .tel,.filo{border-bottom:1px solid var(--filo);padding-bottom:2px;transition:border-color .25s,color .25s}
.azioni .tel:hover,.filo:hover{color:var(--oro-chiaro);border-color:var(--oro)}
.nav .voce[aria-current]{color:var(--oro-chiaro)}
@media (max-width:1180px){.nav .voce.tel{display:none}}
@media (max-width:1040px){.nav{gap:18px}.nav .voce{font-size:.86rem}}


/* elenco dei servizi: ogni riga è un link alla sua pagina */
.tratte a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:10px 40px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--filo);position:relative}
.tratte a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--oro-chiaro);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tratte a:hover::after,.tratte a:focus-visible::after{transform:scaleX(1)}
.tratte a:hover h3,.tratte a:focus-visible h3{transform:translateX(14px);color:var(--oro-chiaro)}
.tratte a:hover .vai,.tratte a:focus-visible .vai{opacity:1}
.sotto{margin-top:28px}

/* «cinque cose»: righe con titolo e spiegazione */
.cose{list-style:none;border-top:1px solid var(--filo)}
.cose li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px 40px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--filo)}
.cose h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.cose p{color:var(--sabbia)}

/* blocchi di testo a due colonne: titolo a sinistra, testo a destra */
.due{display:grid;grid-template-columns:1fr 1.1fr;gap:24px clamp(30px,6vw,90px);align-items:start}
.due h2{font-size:clamp(2.2rem,5.4vw,4rem)}
.prosa p{color:var(--sabbia);max-width:62ch}
.prosa p+p{margin-top:1em}
.prosa a{color:var(--avorio);border-bottom:1px solid var(--oro);transition:color .25s}
.prosa a:hover{color:var(--oro-chiaro)}
.prosa strong{color:var(--avorio);font-weight:500}

/* testata delle pagine interne */
.testata{padding:clamp(120px,17vw,190px) var(--lato) clamp(40px,6vw,70px);position:relative}
.testata::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 0%,rgba(217,174,92,.13),transparent 70%);pointer-events:none}
.testata>*{position:relative}
.testata h1{font-size:clamp(2.1rem,5.2vw,3.8rem);line-height:1.06;padding-bottom:.08em}
.attacco{color:var(--sabbia);max-width:60ch;margin:22px 0 30px;font-size:1.1rem}
.briciole{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--sabbia);margin-bottom:26px}
.briciole a{border-bottom:1px solid var(--filo)}
.briciole a:hover{color:var(--oro-chiaro)}
.non-trovata{min-height:100svh;display:grid;align-items:center}

/* corpo delle pagine interne */
.corpo{padding:0 var(--lato) clamp(50px,8vw,100px)}
.corpo h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:clamp(44px,6vw,70px) 0 18px;padding-top:clamp(26px,4vw,40px);border-top:1px solid var(--filo);color:var(--oro-chiaro)}
.punti,.passi{list-style:none;margin:0 0 1.2em}
.punti li,.passi li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--filo);color:var(--sabbia)}
.punti li::before{content:"";position:absolute;left:4px;top:1.45em;width:14px;height:1px;background:var(--oro)}
.passi{counter-reset:passo}
.passi li{counter-increment:passo}
.passi li::before{content:counter(passo);position:absolute;left:0;top:10px;font:500 1.25rem var(--display);color:var(--oro)}
.prezzi{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.prezzi th,.prezzi td{padding:15px 0;border-bottom:1px solid var(--filo);text-align:left;font-weight:300;vertical-align:baseline}
.prezzi thead th{color:var(--sabbia);font-size:.9rem;border-top:1px solid var(--filo)}
.prezzi td,.prezzi thead th:last-child{text-align:right;white-space:nowrap;padding-left:20px}
.prezzi td{font:500 1.35rem var(--display);color:var(--oro-chiaro)}
.prezzi a{border-bottom:1px solid var(--oro)}
.prezzi a:hover{color:var(--oro-chiaro)}

/* domande frequenti */
.domande{padding-top:clamp(50px,8vw,100px);padding-bottom:clamp(50px,8vw,100px)}
.domande>.dentro-largo{width:min(820px,100%)}
.domande h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:26px}
.elenco{border-top:1px solid var(--filo)}
.elenco details{border-bottom:1px solid var(--filo)}
.elenco summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;font-weight:400}
.elenco summary::-webkit-details-marker{display:none}
.elenco summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 1.5rem var(--display);color:var(--oro);transition:transform .25s}
.elenco details[open] summary::after{transform:rotate(45deg)}
.elenco summary:hover{color:var(--oro-chiaro)}
.elenco details p{color:var(--sabbia);padding:0 34px 22px 0;max-width:62ch}
.elenco details a{color:var(--avorio);border-bottom:1px solid var(--oro)}

/* collegamenti alle altre pagine */
.altre{padding:0 var(--lato) clamp(30px,5vw,60px)}
.altre h2{font:400 .95rem var(--testo);letter-spacing:0;color:var(--sabbia);margin-bottom:14px}
.altre nav{display:flex;flex-wrap:wrap;gap:10px 12px}
.altre a{border:1px solid var(--filo);padding:.6em 1.1em;font-size:.95rem;transition:border-color .25s,color .25s}
.altre a:hover{border-color:var(--oro);color:var(--oro-chiaro)}
.piede-voci{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:16px}
.piede-voci a:hover,footer p a:hover{color:var(--oro-chiaro)}

/* dato ancora da confermare: visibile in locale, blocca la pubblicazione (strumenti/genera.py --pubblica) */
@media (max-height:860px){.scendi{display:none}}

/* menu su telefono: pulsante con tre righe, le voci scendono in un pannello sotto la barra */
.menu-btn{display:none;width:44px;height:44px;margin:-8px -6px -8px 0;background:transparent;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn i{display:block;width:22px;height:1px;background:var(--oro-chiaro);transition:transform .25s,opacity .25s}
.nav.aperto .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.aperto .menu-btn i:nth-child(2){opacity:0}
.nav.aperto .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:820px){
  .menu-btn{display:flex;order:5}
  .nav{flex-wrap:wrap;gap:0 9px}
  .nav .btn{padding:.5em .8em}
  .nav .brand{letter-spacing:.06em}
  .menu-btn{width:38px;margin-right:-8px}
  .nav.aperto{background:rgba(0,0,0,.94);backdrop-filter:blur(14px);border-color:var(--filo)}
  .nav.aperto .voce{display:block;order:10;flex-basis:100%;padding:15px 0;border-top:1px solid var(--filo);font-size:1.05rem;color:var(--avorio)}
  .nav.aperto .voce:first-of-type{margin-top:14px}
  .nav.aperto .voce.tel{color:var(--oro-chiaro)}
  /* pulsante WhatsApp più piccolo e più in basso, per coprire meno testo */
  .wa{width:46px;height:46px;right:10px;bottom:10px}
  .wa svg{width:23px;height:23px}
}
.guida input{min-width:0}
@media (max-width:370px){.nav{padding-left:14px;padding-right:14px;gap:0 6px}.nav .brand{font-size:.74rem;letter-spacing:.02em}.nav .btn{padding:.5em .6em}}
@media (prefers-reduced-motion:reduce){.menu-btn i{transition:none}}

mark.dc{background:rgba(200,32,44,.22);color:#ffd9d9;padding:0 .35em;font-size:.86em;font-weight:400;border:1px dashed #c8202c}

@media (max-width:820px){
  .tratte a{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .cose li,.due{grid-template-columns:1fr}
  .attacco{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){.tratte a::after,.elenco summary::after{transition:none}}

/* ---------- scorrimento morbido (Lenis): regole richieste dalla libreria ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- riflesso dorato che scorre sui prezzi ---------- */
.prezzi td{background:linear-gradient(100deg,var(--oro-chiaro) 0 42%,#fffaf0 50%,var(--oro-chiaro) 58% 100%) 100% 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:riflesso 7s linear infinite}
@keyframes riflesso{0%,35%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- alone di luce che segue il mouse sulle righe dei servizi ---------- */
@media (hover:hover){
  .tratte a::before{content:"";position:absolute;inset:0 calc(var(--lato) * -.5);background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(217,174,92,.14),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
  .tratte a:hover::before{opacity:1}
}
@media (prefers-reduced-motion:reduce){.prezzi td{animation:none}}

/* ---------- apertura: titolo e prezzi sopra il primo fotogramma della scena ---------- */
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.apertura{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:0 var(--lato) clamp(64px,11vh,120px);will-change:opacity,transform}
.apertura::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.4) 36%,transparent 58%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 42%);pointer-events:none}
.apertura .dentro{position:relative;max-width:min(580px,38vw)}
.apertura .motto{font:italic 400 clamp(2.2rem,4.1vw,4.2rem)/1.02 var(--display);letter-spacing:-.012em;padding-bottom:.1em;text-wrap:balance}
.apertura h1{font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.22;max-width:27ch;margin-top:16px;color:var(--avorio);text-wrap:balance}
.apertura .attacco-breve{color:#c9bfa9;max-width:40ch;margin:12px 0 26px;text-wrap:pretty}
.apertura .scendi{bottom:40px}
/* all'apertura della pagina l'auto emerge dal buio e il testo sale in sequenza */
.stage canvas{animation:accendi 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes accendi{from{opacity:0;filter:brightness(.25)}55%{opacity:1}to{opacity:1;filter:brightness(1)}}
.apertura .dentro>*{animation:sali 1s cubic-bezier(.2,.7,.2,1) both}
.apertura .dentro>:nth-child(1){animation-delay:.5s}
.apertura .dentro>:nth-child(2){animation-delay:.68s}
.apertura .dentro>:nth-child(3){animation-delay:.82s}
.apertura .dentro>:nth-child(4){animation-delay:.96s}
@keyframes sali{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (max-width:820px),(orientation:portrait){
  .apertura{padding-bottom:26px}
  .apertura::before{background:linear-gradient(0deg,#000 32%,rgba(0,0,0,.3) 46%,transparent 58%)}
  .apertura .dentro{max-width:none}
  .apertura .motto{font-size:clamp(1.9rem,8.4vw,2.7rem)}
  .apertura h1{font-size:1.08rem;margin-top:10px}
  .apertura .attacco-breve{font-size:.96rem;margin:8px 0 18px}
  .apertura .azioni{gap:12px 20px}
  .apertura .scendi{display:none}
}
@media (prefers-reduced-motion:reduce){.stage canvas,.apertura .dentro>*{animation:none}}

/* ---------- tabellone delle tratte: il prezzo grande a destra di ogni riga ---------- */
.tratte a{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 9.5em 1.4em;align-items:center}
.tratte .prezzo{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1}
.tratte .prezzo b{font:500 clamp(2.1rem,4.6vw,3.8rem)/1 var(--display);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;background:linear-gradient(100deg,var(--oro-scuro),var(--oro-chiaro) 45%,var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.tratte .prezzo small{color:var(--sabbia);font-size:.92rem;margin-top:6px;white-space:nowrap}
.tratte .prezzo b+small{margin-top:2px}
.tratte .vai{opacity:.45;font-size:1.3rem;text-align:right;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.tratte a:hover .vai,.tratte a:focus-visible .vai{opacity:1;transform:translateX(6px)}
@media (max-width:820px){
  .tratte a{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start}
  .tratte a h3{grid-column:1}
  .tratte a p{grid-column:1;grid-row:2}
  .tratte .prezzo{grid-column:2;grid-row:1 / span 2}
  .tratte .prezzo b{font-size:clamp(1.9rem,9vw,2.6rem)}
  .tratte .vai{display:none}
}

/* ---------- modulo: servizio a tocchi e prezzo subito ---------- */
fieldset{border:0;min-width:0}
legend{font-size:.9rem;color:var(--sabbia);margin-bottom:10px;padding:0}
.pillole{display:flex;flex-wrap:wrap;gap:10px}
.pillole label{margin:0;position:relative;cursor:pointer}
.pillole input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;border:0;padding:0}
.pillole span{display:block;padding:.62em 1.05em;border:1px solid var(--filo);color:var(--avorio);font-size:.98rem;transition:border-color .25s,color .25s,background .25s,transform .15s}
.pillole label:hover span{border-color:var(--oro)}
.pillole label:active span{transform:scale(.97)}
.pillole input:checked+span{border-color:var(--oro-chiaro);color:var(--oro-chiaro);background:rgba(217,174,92,.1)}
.pillole input:focus-visible+span{outline:2px solid var(--oro-chiaro);outline-offset:3px}
.pillole.tonde span{min-width:2.9em;text-align:center}
.cifra{border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);padding:18px 0 16px}
.cifra small{display:block;font-size:.9rem;color:var(--sabbia)}
.cifra .numero{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:2px 0 8px}
.cifra b{font:500 clamp(2.8rem,7vw,4.6rem)/1.05 var(--display);font-variant-numeric:tabular-nums lining-nums;background:linear-gradient(100deg,var(--oro-scuro),var(--oro-chiaro) 45%,var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.cifra .numero span{color:var(--avorio)}
.tragitto{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:end}
.inverti{width:44px;height:44px;border:1px solid var(--filo);background:transparent;color:var(--oro-chiaro);cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:border-color .25s,transform .4s cubic-bezier(.2,.7,.2,1)}
.inverti:hover{border-color:var(--oro)}
.inverti:active{transform:rotate(180deg)}
.inverti svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.btn:active{transform:scale(.98)}
.btn{transition:background .3s,color .3s,transform .15s}
@media (max-width:820px){
  .tragitto{grid-template-columns:1fr 44px;gap:16px 12px}
  .tragitto>div{grid-column:1}
  .tragitto .inverti{grid-column:2;grid-row:1 / span 2;align-self:center}
  .inverti svg{transform:none}
}
@media (prefers-reduced-motion:reduce){.pillole span,.inverti,.btn{transition:none}}

/* ---------- mappa delle tratte (sezione «In tutta Roma e nel Lazio») ---------- */
.zona{align-items:center}
.zona h2{margin-bottom:clamp(20px,3vw,34px)}
.mappa{margin:0}
.mappa svg{display:block;width:100%;height:auto;overflow:visible}
/* i bordi del disegno sfumano nel fondo, così la mappa non sembra un riquadro */
.mappa .mare,.mappa .costa{-webkit-mask-image:radial-gradient(62% 62% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(62% 62% at 50% 46%,#000 62%,transparent 100%)}
.mappa .mare{fill:rgba(217,174,92,.045)}
.mappa .costa{fill:none;stroke:var(--filo);stroke-width:1.5}
.mappa .raccordo{fill:rgba(217,174,92,.05);stroke:var(--filo);stroke-width:1.5}
.mappa .lontana{fill:none;stroke:var(--sabbia);stroke-width:1.2;stroke-dasharray:3 9;opacity:.6}
.mappa .tratta{fill:none;stroke:var(--oro-chiaro);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.mappa .punto{fill:var(--oro-chiaro)}
.mappa .punto.piccolo{fill:var(--sabbia)}
.mappa .alone{fill:none;stroke:var(--oro-chiaro);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:alone 3.2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes alone{from{transform:scale(1);opacity:.9}to{transform:scale(4.4);opacity:0}}
.mappa text{font-family:var(--testo);font-weight:300}
.mappa .nome{font-size:25px;fill:var(--avorio)}
.mappa .nome.primo{font-size:27px;font-weight:400}
.mappa .nome.secondo{font-size:21px;fill:var(--sabbia)}
.mappa .mare-nome{font:italic 400 24px var(--display);fill:var(--sabbia);opacity:.55;letter-spacing:.04em}
.mappa figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:14px;color:var(--sabbia);font-size:.9rem}
.chiave{display:inline-flex;align-items:center;gap:10px}
.chiave::before{content:"";width:34px;height:0;border-top:2px solid var(--oro-chiaro)}
.chiave.tratteggiata::before{border-top:1px dashed var(--sabbia)}
/* le tratte si disegnano quando la mappa entra nello schermo (classi messe da script.js) */
.mappa.entra .tratta{stroke-dashoffset:1}
.mappa.entra.visto .tratta{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.6,.2,1) .25s}
.mappa.entra.visto .tratta:nth-of-type(2n){transition-delay:.5s}
@media (max-width:820px){
  .mappa{margin-top:10px}
  .mappa .nome{font-size:38px}
  .mappa .nome.primo{font-size:40px}
  .mappa .nome.secondo,.mappa .mare-nome{display:none}
  .mappa .tratta{stroke-width:4}
  .mappa .punto{r:11px}
}
@media (prefers-reduced-motion:reduce){.mappa .alone{animation:none;opacity:0}}

/* ---------- finiture ---------- */
/* fondo: nero caldo al posto del nero puro (la scena resta su nero pieno, come i bordi dei fotogrammi) */
:root{--fondo:#080706}
body{background:var(--fondo)}
.auto{background:linear-gradient(180deg,var(--fondo),#0d0b08 45%,var(--fondo))}
/* grana leggera su tutta la pagina, ferma mentre si scorre */
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* l'oro sfumato resta sui titoli principali; i titoli di servizio sono in avorio */
.domande h2.oro,.zona h2.oro,.blocco.testo h2.oro{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--avorio)}
/* titoli e paragrafi vanno a capo in modo equilibrato */
h1,h2,h3{text-wrap:balance}
.testa p,.prosa p,.tratte p,.cose p,.attacco{text-wrap:pretty}
.prezzi td{font-variant-numeric:tabular-nums lining-nums}
/* risposta alla pressione */
.vista:active,.contatti a:active,.altre a:active{transform:scale(.98)}
.wa:active{transform:scale(.94)}
/* comparsa leggera delle sezioni: le classi le mette script.js, quindi senza script tutto resta visibile */
.entra{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--ritardo,0s)}
.entra.visto{opacity:1;transform:none}

/* ---------- ritocchi tipografici (studio dei caratteri, materiali/studio-caratteri.md) ---------- */
/* Titoli piccoli in Bodoni: sotto i 26 px i tratti sottili si perdono, quindi peso 500 e nessuna spaziatura negativa. */
.apertura h1,.cose h3,.elenco summary,.altre h2{letter-spacing:0}
.apertura h1,.cose h3{font-weight:500}
@media (max-width:820px){.corpo h2,.tratte h3{font-weight:500;letter-spacing:0}}
/* Testi piccoli in Hanken: sotto i 16 px il peso leggero è al limite, quindi peso 400. */
label,legend,.nota,.briciole,.guida span,.contatti small,.cifra small,.tratte .prezzo small,.prezzi thead th,.scendi,.mappa figcaption,footer,.nav .voce,.altre a,.tratte .vai{font-weight:400}
/* Cifre allineate ovunque compaia un prezzo. */
.punti strong,.passi strong,.tratte p,.cose p,.elenco p{font-variant-numeric:lining-nums tabular-nums}

/* ---------- firma di Craftale nel piè di pagina ----------
   A riposo è in oro come il resto del sito, con un riflesso lento. Al passaggio del mouse (o al tocco) le lettere
   si allargano e prendono i colori di Craftale, una riga colorata scorre sotto e la freccia parte in diagonale. */
.firma{--viola:#6720ff;--rosa:#ff4e8c;--azzurro:#3ab1e5;display:inline-flex;align-items:center;gap:16px;margin-top:38px;padding:15px 22px 15px 24px;position:relative;border:1px solid var(--filo);color:var(--sabbia);font-size:.8rem;font-weight:400;letter-spacing:.04em;overflow:hidden;isolation:isolate;transition:border-color .5s,color .5s}
.firma::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 160% at 0% 100%,rgba(103,32,255,.28),transparent 55%),radial-gradient(120% 160% at 100% 0%,rgba(58,177,229,.22),transparent 55%);opacity:0;transition:opacity .6s}
.firma::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--viola),var(--rosa),var(--azzurro));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.firma-nome{font:500 1.05rem/1 var(--display);letter-spacing:.42em;margin-right:-.42em;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,var(--oro-scuro) 0,var(--oro-chiaro) 18%,#fffaf0 25%,var(--oro-chiaro) 32%,var(--oro) 50%,var(--viola) 58%,var(--rosa) 78%,var(--azzurro) 100%);
  background-size:300% 100%;background-position:0 0;animation:firma-riflesso 6s ease-in-out infinite;transition:letter-spacing .6s cubic-bezier(.2,.7,.2,1),margin-right .6s cubic-bezier(.2,.7,.2,1),background-position .8s cubic-bezier(.2,.7,.2,1)}
@keyframes firma-riflesso{0%,55%{background-position:0 0}100%{background-position:26% 0}}
.firma-freccia{color:var(--oro);font-size:1rem;line-height:1;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .5s}
.firma:hover,.firma:focus-visible{border-color:rgba(255,78,140,.45);color:var(--avorio)}
.firma:hover::before,.firma:focus-visible::before{opacity:1}
.firma:hover::after,.firma:focus-visible::after{transform:scaleX(1)}
.firma:hover .firma-nome,.firma:focus-visible .firma-nome{letter-spacing:.62em;margin-right:-.62em;background-position:100% 0;animation:none}
.firma:hover .firma-freccia,.firma:focus-visible .firma-freccia{transform:translate(4px,-4px);color:var(--azzurro)}
@media (max-width:420px){.firma{gap:12px;padding:14px 16px 14px 18px}.firma-nome{font-size:.98rem}}
@media (prefers-reduced-motion:reduce){.firma-nome{animation:none;transition:background-position .3s}.firma::after,.firma-freccia{transition:none}}