/* Stile di Debora Ditella: foglio comune alle quattro pagine.
   Rosa antico scelto dal salone (27/10); foto pulite ad angoli morbidi (le cornici dorate bocciate il 14/10). */
@font-face{font-family:'Gilda Display';src:url(fonts/gilda-display-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-latin.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  color-scheme:only light; /* niente scurimento automatico dei browser Android in tema scuro */
  /* rosa antico: il #f1dcdc a tinta 0 gradi il detector lo legge crema, spostato a 350 */
  --fondo:#f1dade;--fondo-2:#e6c7c8;--parete:#dcb3b5;
  --inchiostro:#3b2224;--tenue:#5a3a3d;--bottone:#6e3539;--oro:#b48a3c;--oro-testo:#7a5a1f;
  /* la zona relax: luci calde, pelle, legno */
  --notte:#2a1a18;--notte-testo:#f6e6e0;--notte-tenue:#dcc5bd;
  /* cinque corpi di testo, poi i titoli */
  --t-piccolo:.875rem;--t-corpo:1.0625rem;--t-lead:1.25rem;--t-h3:1.625rem;
  --t-frase:clamp(1.25rem,1.1rem + .6vw,1.5rem);--t-h2:clamp(2rem,1.45rem + 2.2vw,3rem);--t-h1:clamp(2.5rem,1.7rem + 3.6vw,4.5rem);
  --raggio:14px;--curva:cubic-bezier(.23,1,.32,1);
  /* lo spazio fra il contenitore e il bordo dello schermo: marchio e mappa ci escono dentro */
  --fuori:max(1.25rem,(100vw - 1160px) / 2);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable} /* col visore aperto la barra sparisce: senza, la pagina dietro salta di lato */
body{margin:0;background:var(--fondo);color:var(--inchiostro);font:400 var(--t-corpo)/1.65 'Manrope',system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance;font-family:'Gilda Display',Georgia,serif;font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
p{margin:0 0 1em;max-width:62ch}
figure{margin:0}
.contenitore{width:min(1160px,100% - 2.5rem);margin-inline:auto}
main{overflow-x:clip} /* 100vw conta anche la barra di scorrimento: senza, chi esce al bordo fa scorrere la pagina di lato */
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--tenue)}

.nastro{background:var(--inchiostro);color:var(--fondo);font-size:var(--t-piccolo);text-align:center;padding:.5rem 1rem;line-height:1.4}
.nastro a{color:var(--fondo);padding-block:.6rem}

/* Testata e menu delle quattro pagine */
.testata{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.25rem 0;flex-wrap:wrap}
.marchio{display:block;text-decoration:none;line-height:1}
/* le lettere vere del logo (EPS del grafico, 03/11): la S scende sopra e sotto TILE, per questo è alta */
.marchio .logo{display:block;height:3.25rem;aspect-ratio:1.321}
.marchio small{display:block;font-size:var(--t-piccolo);letter-spacing:.04em;color:var(--tenue);margin-top:.35rem}
.menu{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.menu a{display:block;white-space:nowrap;text-decoration:none;padding:.6rem 0;border-bottom:2px solid transparent;transition:border-color .2s ease}
.menu a[aria-current="page"]{border-color:var(--bottone);font-weight:600}
@media (hover:hover) and (pointer:fine){.menu a:hover{border-color:var(--oro)}}

/* Bottoni */
.azioni{display:flex;flex-wrap:wrap;gap:.75rem}
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--bottone);color:#fff;text-decoration:none;
  padding:.85rem 1.35rem;border-radius:999px;font-weight:600;line-height:1.2;transition:transform .14s var(--curva)}
.bottone svg{width:18px;height:18px;flex:none}
.bottone:active{transform:scale(.97)}
.bottone.secondo{background:transparent;color:var(--inchiostro);box-shadow:inset 0 0 0 1.5px currentColor}
.bottone.chiaro{background:var(--notte-testo);color:var(--notte)}

/* Il pulsante sempre visibile (N.10): chiamata e WhatsApp */
.fissa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1000;display:flex;gap:.4rem;padding:.4rem;background:#fff;border-radius:999px;box-shadow:0 8px 28px rgba(59,34,36,.2)}
.fissa .bottone{padding:.7rem 1.1rem}

/* Le foto */
.scatto{border-radius:var(--raggio);overflow:hidden;background:var(--fondo-2)}
.scatto img{width:100%}

section{padding:clamp(3.5rem,8vw,6.5rem) 0}

/* I lavori di un servizio: una striscia alla stessa altezza, ogni foto col suo formato (--r = larghezza/altezza),
   si scorre di lato (frecce sul computer, dito sul telefono) */
.striscia{--h:420px;display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:12px;margin:-12px;scroll-padding-inline:12px} /* respiro uguale ai lati: angoli e contorno del fuoco non si tagliano */
.striscia::-webkit-scrollbar{display:none}
.striscia:focus-visible{outline:2px solid var(--bottone);outline-offset:4px}
.striscia figure{flex:none;height:var(--h);aspect-ratio:var(--r);scroll-snap-align:start;border-radius:12px;overflow:hidden;background:var(--fondo-2)}
.striscia img{width:100%;height:100%;object-fit:cover}
.frecce{display:flex;gap:.5rem}
.frecce[hidden]{display:none}
.servizio-testa .frecce{grid-column:-2;grid-row:1}
.freccia{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--inchiostro);box-shadow:inset 0 0 0 1.5px currentColor;cursor:pointer;transition:transform .14s var(--curva),opacity .2s ease}
.freccia svg{width:18px;height:18px}
.freccia:active{transform:scale(.94)}
.freccia:disabled{opacity:.3;cursor:default}

/* Le foto delle strisce si aprono in grande (Riccardo 30/10). Il bottone lo mette lo script attorno all'img */
.striscia .apri{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.striscia .apri:focus-visible{outline:3px solid transparent}
/* anello a due toni sopra la foto: il solo rosa spariva sulle foto chiare (QA 30/10) */
.striscia .apri:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--bottone),inset 0 0 0 6px #fff}
.striscia .apri img{transition:transform .25s var(--curva)}
.striscia .apri:active img{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.striscia .apri:hover img{transform:scale(1.03)}}
.visore{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#201413;color:var(--notte-testo);overscroll-behavior:contain}
.visore[open]{display:grid;grid-template:auto 1fr auto / 4.5rem 1fr 4.5rem;align-items:center;justify-items:center;animation:visore-entra .2s ease-out}
.visore::backdrop{background:transparent}
.visore img{grid-area:2 / 2;width:auto;height:auto;max-width:min(100%,1100px);max-height:calc(100dvh - 9rem);border-radius:12px;touch-action:pan-y pinch-zoom;animation:visore-foto .25s var(--curva)}
.visore button{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(246,230,224,.1);color:inherit;cursor:pointer;transition:background-color .15s ease,transform .14s var(--curva)}
.visore button svg{width:20px;height:20px}
.visore button:active{transform:scale(.94)}
.visore button:focus-visible{outline:2px solid var(--notte-testo);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.visore button:hover{background:rgba(246,230,224,.2)}}
.visore .chiudi{grid-area:1 / 3;margin-top:.75rem}
.visore .prima{grid-area:2 / 1}
.visore .dopo{grid-area:2 / 3}
.visore .conta{grid-area:3 / 2;margin:0 0 1.25rem;font-size:var(--t-piccolo);color:var(--notte-tenue);text-align:center;font-variant-numeric:tabular-nums;text-wrap:balance}
html:has(.visore[open]){overflow:hidden;background:#201413} /* lo spazio tenuto per la barra resta scuro come il visore, non rosa */
@keyframes visore-entra{from{opacity:0}}
@keyframes visore-foto{from{opacity:0;transform:scale(.96)}}
/* sul telefono le frecce scendono accanto al contatore, dove arriva il pollice */
@media (max-width:640px){
  .visore[open]{grid-template:auto 1fr auto / minmax(4rem,1fr) auto minmax(4rem,1fr)}
  .visore img{grid-area:2 / 1 / 3 / -1;max-width:calc(100% - 1.5rem);max-height:calc(100dvh - 10rem)}
  .visore .chiudi{grid-area:1 / 3;justify-self:end;margin:.75rem .75rem 0 0}
  .visore .prima,.visore .dopo,.visore .conta{grid-row:3;margin-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .visore .prima{grid-column:1;justify-self:end}
  .visore .conta{grid-column:2;padding:0 1rem}
  .visore .dopo{grid-column:3;justify-self:start}
}
@media (max-width:339px){.visore .conta{font-size:.8125rem}}
/* telefono in orizzontale: le righe dei comandi rubavano l'altezza e la foto restava di 242 px (QA 30/10) */
@media (max-height:520px){
  .visore[open]{grid-template:1fr auto / 4.5rem 1fr 4.5rem}
  .visore img{grid-area:1 / 2;max-width:min(100%,1100px);max-height:calc(100dvh - 3.25rem)}
  .visore .chiudi{position:absolute;top:.75rem;right:.75rem;margin:0}
  .visore .prima,.visore .dopo{grid-row:1;margin:0;justify-self:center}
  .visore .prima{grid-column:1}
  .visore .dopo{grid-column:3}
  .visore .conta{grid-area:2 / 2;margin:.25rem 0 .75rem;padding:0}
}

/* Piede (N.9): in fondo a ogni pagina */
.piede{background:var(--inchiostro);color:var(--notte-testo);padding:clamp(3rem,6vw,4.5rem) 0 6.5rem} /* in fondo spazio per il pulsante fisso */
.piede a{color:var(--notte-testo);padding-block:.7rem}
.unito{white-space:nowrap}
.ap{margin-right:.07em}
.piede-griglia{display:grid;grid-template-columns:.8fr 1fr 1.6fr 1fr;gap:2rem}
.piede .marchio small{color:var(--notte-tenue)}
.piede-titolo{font-weight:700;margin:0 0 .5rem;color:var(--notte-testo)}
.piede p{color:var(--notte-tenue)}
.orari{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem}
.orari div{display:contents}
.orari dt{font-weight:600}
.orari dd{margin:0}
.piede .orari{color:var(--notte-tenue)}
.piede .orari dt{color:var(--notte-testo)}
.nota{margin:3.5rem 0 0;max-width:62ch}

/* ---------- Home ---------- */
/* apertura: il marchio senza riquadro, preso nel rosa (luminosity = luci e ombre sue, colore del fondo)
   e sciolto ai bordi (prova 30/10: il riquadro beige sul rosa sembrava incollato) */
.apertura{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);align-items:center;padding:0 0 clamp(2.5rem,5vw,4.5rem)}
.apertura > div{position:relative;z-index:1}
.apertura .lead{margin:1.5rem 0 2rem;max-width:34ch}
/* l'entrata sta sull'img: sul figure isolerebbe il blend (lo fonde col vuoto, non col rosa).
   Grande e fino al bordo destro (Riccardo 30/10: "troppo centrato"). brightness(1.08) porta il fondo del
   marchio alla luminosità del rosa: il riquadro sparisce e resta la figura, senza l'alone tondo.
   1.08 è per l'immagine in alta del grafico (03/11, fondo più chiaro della 576 px di prima, che voleva 1.15) */
.apertura-foto{justify-self:end;width:min(100% + var(--fuori),100vh - 170px,860px);margin-right:calc(-1 * var(--fuori));pointer-events:none}
.apertura-foto img{width:100%;mix-blend-mode:luminosity;filter:brightness(1.08);animation:entra .6s var(--curva) both .1s;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* storia: la foto dell'ingresso al vivo, dal bordo dello schermo e alta quanto la fascia (prova 30/10) */
.storia{background:var(--fondo-2);padding:0}
.storia-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.storia-foto{align-self:stretch;min-height:clamp(560px,52vw,760px)}
.storia-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* il testo finisce dove finisce il contenitore delle altre fasce */
.storia-testo{padding:clamp(3.5rem,7vw,6rem) max(1.25rem,calc((100vw - 1160px) / 2)) clamp(3.5rem,7vw,6rem) clamp(2rem,6vw,6rem)}
.storia h2{margin-bottom:1.5rem}
.frase{font-family:'Gilda Display',Georgia,serif;font-size:clamp(1.3125rem,1.1rem + .6vw,1.625rem);line-height:1.38;margin:2.5rem 0 0;max-width:36ch;color:var(--bottone)}

.indice-griglia{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.indice-griglia h2{margin-bottom:2rem}
.indice{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.indice a{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:baseline;padding:.9rem 0;text-decoration:none}
.indice .nome{font-family:'Gilda Display',Georgia,serif;font-size:var(--t-h3);line-height:1.2}
.indice .riga{grid-column:1;color:var(--tenue);max-width:46ch}
.indice svg{grid-row:1;grid-column:2;width:20px;height:20px;align-self:center;transition:transform .2s var(--curva)}
@media (hover:hover) and (pointer:fine){.indice a:hover svg{transform:translateX(4px)}}
.indice .mini{display:none}
.indice-foto{position:sticky;top:2rem;aspect-ratio:4/5}
.indice-foto img{width:100%;height:100%;object-fit:cover}

/* foto sciolta nel fondo come in apertura della Zona relax (Borghe, 29/10); regole in .sfuma */
.invito{position:relative;overflow:hidden;background:var(--notte);color:var(--notte-testo);min-height:min(80vh,680px);display:grid;align-content:center}
.invito-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.invito-griglia > div{position:relative;z-index:1}
.invito .lead{color:var(--notte-tenue);margin:1.5rem 0 2rem;max-width:30ch}
.invito .sfuma{animation:none}

/* ---------- Servizi ---------- */
.pagina-testa{padding:clamp(1.5rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem)}
.pagina-testa .lead{margin:1.25rem 0 2rem}
.salti{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.salti a{display:block;padding:.65rem 1.05rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(59,34,36,.35);text-decoration:none;font-weight:600;line-height:1.3;transition:background-color .2s ease}
@media (hover:hover) and (pointer:fine){.salti a:hover{background:var(--fondo-2)}}

.servizio{padding:clamp(3rem,6vw,5rem) 0}
.servizio:nth-of-type(even){background:var(--fondo-2)}
.servizio:nth-of-type(even) .striscia figure{background:var(--parete)}
.servizio-testa{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1.5rem;align-items:center;margin-bottom:2rem}
.servizio-testa p{margin:0;color:var(--tenue);max-width:44ch}

/* Spose, l'ultimo e il più grande: la loro grande passione */
.servizio.spose{background:var(--parete)}
.spose .striscia{--h:500px}
.spose .striscia figure{background:var(--fondo-2)}
.spose .servizio-testa p{color:var(--inchiostro)}
.spose .servizio-testa .bottone{grid-column:2;grid-row:2;justify-self:start;margin-top:.5rem}

/* ---------- Zona relax ---------- */
/* la foto non sta in un riquadro: si scioglie nel fondo scuro (Borghe, 29/10) */
.relax-apertura{position:relative;overflow:hidden;background:var(--notte);color:var(--notte-testo);padding:clamp(2.5rem,6vw,5rem) 0;min-height:min(86vh,760px);display:grid;align-content:center}
.relax-apertura-griglia{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.relax-apertura-griglia > div{position:relative;z-index:1}
.relax-apertura .lead{color:var(--notte-tenue);margin:1.5rem 0 0;max-width:30ch}
.sfuma{position:absolute;top:0;right:0;bottom:0;width:60%;margin:0;animation:entra .6s var(--curva) both .1s}
.sfuma img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 55%),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 55%),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect}

.capitolo-griglia{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.capitolo-griglia.inverso .capitolo-testo{order:2}
.capitolo-testo p{font-size:var(--t-lead);line-height:1.6}
/* il testo resta fermo mentre passano le foto: prima galleggiava a metà di una colonna vuota (prova 30/10) */
@media (min-width:981px){
  .capitolo-griglia{align-items:start}
  .capitolo-testo{position:sticky;top:clamp(2rem,14vh,8rem)}
}
.capitolo-testo h2{margin-bottom:1.5rem}
/* due colonne di foto, la seconda scesa un po' */
.coppia{--sfalsa:clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,2vw,1.25rem);align-items:start;padding-bottom:var(--sfalsa)}
.coppia > :nth-child(even){transform:translateY(var(--sfalsa))}
.relax-bevande{background:var(--fondo-2)}

.chiusa{text-align:center}
.chiusa p{font-family:'Gilda Display',Georgia,serif;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1.32;max-width:30ch;margin:0 auto clamp(2.5rem,5vw,4rem);text-wrap:balance}
.chiusa .coppia{max-width:820px;margin-inline:auto}

.dedica{background:var(--notte);color:var(--notte-testo)}
.dedica figure{max-width:560px;margin-inline:auto}
.dedica .scatto{background:#3a2522}
.dedica figcaption{font-family:'Gilda Display',Georgia,serif;font-size:var(--t-frase);line-height:1.35;text-align:center;margin-top:1.75rem;text-wrap:balance}

/* ---------- Contatti ---------- */
.contatti-griglia{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(1.5rem,4vw,3rem) 0 clamp(3.5rem,7vw,6rem)}
.indirizzo{font-size:var(--t-lead);line-height:1.5;margin:1.5rem 0 2rem}
/* orari e social accanto alla foto delle postazioni (Noemi, 03/11): stessa fascia della storia in Home */
.contatti-salone h2{font-size:var(--t-h3);margin:2.75rem 0 1rem}
.contatti-salone h2:first-child{margin-top:0}
.contatti-salone .orari{max-width:26rem}
/* foto verticale: assoluta, sennò comanda lei l'altezza della fascia (1210 px a 1920) */
.contatti-salone .storia-foto{position:relative}
.contatti-salone .storia-foto img{position:absolute;inset:0;object-position:50% 60%}
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  .contatti-salone .storia-griglia{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .contatti-salone .storia-foto{height:auto}
  .contatti-salone .orari{grid-template-columns:1fr;gap:0}
  .contatti-salone .orari dd{margin-bottom:.5rem}
}
.social{display:flex;width:fit-content;align-items:center;gap:.6rem;font-weight:600;padding-block:.6rem}
.social svg{width:20px;height:20px}
/* la mappa riempie la colonna fino in fondo e al bordo destro, coi bordi sciolti nel fondo (Riccardo 30/10) */
#mappa{--sfuma:clamp(48px,8vw,110px);position:relative;align-self:stretch;min-height:520px;margin-right:calc(-1 * var(--fuori));background:var(--fondo);isolation:isolate}
/* tinta: le luci delle tile stirate (campi a luminosità .78, sotto il fondo .88; strade .97), poi un velo in
   modalità colore ci mette il rosa antico. Separata dal fondo, ma non rosa confetto */
#mappa .leaflet-tile-pane{filter:brightness(.527) contrast(3) brightness(1.67)}
#mappa::after{content:"";position:absolute;inset:0;z-index:450;pointer-events:none;background:#b48089;mix-blend-mode:color}
#mappa:not(.leaflet-container)::after{display:none} /* senza JavaScript il velo tingeva il fondo vuoto di un rosa acceso */
/* bordi sfumati: il fondo della pagina che sale dai quattro lati, sopra il velo e sotto i comandi */
#mappa::before{content:"";position:absolute;inset:0;z-index:460;pointer-events:none;background:
  linear-gradient(to right,var(--fondo),rgb(241 218 222/.55) calc(var(--sfuma) * .35),rgb(241 218 222/.18) calc(var(--sfuma) * .7),transparent var(--sfuma),transparent calc(100% - var(--sfuma)),rgb(241 218 222/.18) calc(100% - var(--sfuma) * .7),rgb(241 218 222/.55) calc(100% - var(--sfuma) * .35),var(--fondo)),
  linear-gradient(to bottom,var(--fondo),rgb(241 218 222/.55) calc(var(--sfuma) * .35),rgb(241 218 222/.18) calc(var(--sfuma) * .7),transparent var(--sfuma),transparent calc(100% - var(--sfuma)),rgb(241 218 222/.18) calc(100% - var(--sfuma) * .7),rgb(241 218 222/.55) calc(100% - var(--sfuma) * .35),var(--fondo))}
#mappa .leaflet-top{top:calc(var(--sfuma) * .55)}
#mappa .leaflet-left{left:calc(var(--sfuma) * .55)}
#mappa .leaflet-bottom{bottom:calc(var(--sfuma) * .55)}
#mappa .leaflet-right{right:calc(var(--sfuma) * .55)}
.pin{width:26px;height:26px;border-radius:50%;background:var(--bottone);border:3px solid #fff;box-shadow:0 0 0 6px rgba(110,53,57,.25)}
#mappa.leaflet-container{font-family:'Manrope',sans-serif;font-size:var(--t-corpo)}
#mappa .leaflet-popup-content{font-size:var(--t-corpo);line-height:1.5}
#mappa .leaflet-control-attribution{margin:0 0 10px 10px;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.92);font-size:var(--t-piccolo)}
#mappa .leaflet-control-attribution a{color:var(--bottone)}
#mappa .leaflet-bar a{color:var(--inchiostro)}
#mappa .leaflet-tile{outline:1px solid transparent}
@media (pointer:coarse){#mappa .leaflet-bar a{width:44px;height:44px;line-height:44px}}
.mappa-riposo{display:grid;place-items:center;height:100%;color:var(--tenue);text-align:center;padding:1rem}

/* ---------- Schermi stretti ---------- */
@media (max-width:980px){
  .apertura,.storia-griglia,.indice-griglia,.invito-griglia,.relax-apertura-griglia,.capitolo-griglia,.contatti-griglia{grid-template-columns:1fr}
  /* sul telefono il marchio viene prima: sotto i bottoni lo copriva la barra fissa */
  .apertura-foto{order:-1;margin:-1.5rem auto;max-width:420px;width:100%}
  .relax-apertura,.invito{min-height:0;display:block;padding-bottom:0}
  .invito .lead{max-width:none}
  .sfuma{position:relative;width:auto;margin:0 calc(50% - 50vw)}
  .sfuma img{height:clamp(380px,115vw,680px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent)}
  .storia-foto{min-height:0;height:clamp(300px,min(125vw,85vh),620px)}
  .storia-testo{padding:clamp(2.5rem,8vw,3.5rem) 1.25rem clamp(3.5rem,10vw,4.5rem)}
  .indice-foto{display:none}
  /* senza la foto grande che cambia al passaggio, ogni servizio porta la sua (prova 30/10) */
  .indice a{grid-template-columns:auto 1fr auto;column-gap:1rem;align-items:center}
  .indice .mini{display:block;grid-row:1 / span 2;width:64px;height:80px;object-fit:cover;border-radius:10px;background:var(--fondo-2)}
  .indice .nome,.indice .riga{grid-column:2}
  .indice svg{grid-column:3}
  .indice .riga{font-size:var(--t-piccolo);line-height:1.45}
  .indice a:not(:has(.riga)) .nome,.indice a:not(:has(.riga)) svg{grid-row:1 / span 2}
  .storia-foto img{object-position:50% 25%}
  .capitolo-griglia.inverso .capitolo-testo{order:0}
  .piede-griglia{grid-template-columns:1fr 1fr}
  .servizio-testa{grid-template-columns:1fr auto}
  .servizio-testa p{grid-column:1 / -1;grid-row:2}
  .spose .servizio-testa .bottone{grid-column:1 / -1;grid-row:3}
  #mappa{min-height:0;height:440px;margin-inline:calc(-1 * var(--fuori))}
}
/* telefono in orizzontale: il marchio sopra il titolo riempiva lo schermo (QA 30/10) */
@media (max-width:980px) and (orientation:landscape) and (max-height:520px){
  .apertura{grid-template-columns:1fr 1fr}
  .apertura-foto{order:0;margin:0 0 0 auto;max-width:min(100%,62vh)}
  #mappa{height:min(440px,85vh)}
}
@media (max-width:640px){
  .testata{flex-direction:column;align-items:flex-start;padding-bottom:.5rem}
  .menu{gap:1.25rem}
  .striscia{--h:300px;gap:.5rem}
  .spose .striscia{--h:340px}
  .frecce,.frecce[hidden]{display:none}
  .orari{grid-template-columns:fit-content(8.5rem) 1fr}
  .piede-griglia{grid-template-columns:1fr}
  #mappa{height:380px}
  /* sulla mappa stretta il fumetto col nome tocca lo zoom in alto: lo zoom scende in basso a destra */
  #mappa .leaflet-top.leaflet-left{top:auto;left:auto;bottom:calc(var(--sfuma) * .55);right:calc(var(--sfuma) * .55)}
  .fissa{left:0;right:0;bottom:0;border-radius:0;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;box-shadow:0 -6px 20px rgba(59,34,36,.14)}
  .fissa .bottone{flex:1}
}
.menu a:active,.salti a:active,.indice a:active,.social:active,.piede a:active{opacity:.7}
@media (max-width:359px){.menu{gap:1rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apertura-foto,.sfuma{animation:none}
  .bottone,.indice svg,.freccia,.striscia .apri img,.visore button{transition:none}
  .bottone:active,.freccia:active,.visore button:active,.striscia .apri:hover img,.striscia .apri:active img{transform:none}
  .visore[open],.visore img{animation:none}
}