/* salute-iride · "Iride" — ottico in citta', scuro e sartoriale, con negozio online.
   Archetipo H7 (lusso scuro con colonna d'immagine verticale). Firma: anteprima foto che segue il cursore
   sulle voci dell'elenco montature (solo desktop). Forme tutte a spigolo vivo. */

@font-face{font-family:'Gloock';src:url('../_font/gloock/gloock-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('../_font/jost/jost-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --p:#f0b9c8;   /* rosa cipria */
  --s:#17141a;   /* prugna quasi nera */
  --t:#f3eee9;   /* avorio */
  --a:#b9d7e8;   /* azzurro ghiaccio */
  --f-titoli:'Gloock', Georgia, serif;
  --f-testo:'Jost', system-ui, sans-serif;

  --t2:color-mix(in oklab, var(--t) 68%, var(--s));
  --riga:color-mix(in oklab, var(--t) 16%, var(--s));
  --su:color-mix(in oklab, var(--t) 5%, var(--s));
  --bordo:clamp(18px, 3.4vw, 52px);
  --max:1440px;
  --ease:cubic-bezier(.7,0,.2,1);
  --esce:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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:clamp(16px,.45vw + 13.5px,18.5px);font-weight:380;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titoli);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
figure{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--a);outline-offset:3px}
[hidden]{display:none!important}
.sentinella{position:absolute;top:0;left:0;width:1px;height:40px;pointer-events:none}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--t);color:var(--s);padding:10px 16px}
.salta:focus{top:12px}
section{padding-inline:var(--bordo)}
.titolo{font-size:clamp(2.4rem,1.3rem + 3.8vw,5.4rem)}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 28px;background:var(--p);color:var(--s);text-decoration:none;font-weight:500;font-size:1rem;letter-spacing:.02em;border:0;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--t);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleY(1)}
.btn:active{transform:translateY(1px)}
.btn--nav{min-height:44px;padding:8px 20px;font-size:.93rem}
.btn--pieno{width:100%}
.link{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% calc(100% - 8px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;padding:0 var(--bordo);transition:background .4s}
.nav.is-giu{background:color-mix(in oklab, var(--s) 92%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--riga)}
.nav__in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:26px;min-height:76px}
.logo{font-family:var(--f-titoli);font-size:1.6rem;text-decoration:none;margin-right:auto;line-height:1.05;min-width:0;overflow-wrap:anywhere}
.nav__voci{display:flex;gap:26px}
.nav__voci a{text-decoration:none;font-size:.95rem;color:var(--t2);transition:color .3s;padding:10px 0}
.nav__voci a:hover{color:var(--t)}
.lingue{display:flex;border:1px solid var(--riga)}
.lingue button{background:transparent;border:0;padding:0 10px;min-height:36px;min-width:40px;font-size:.85rem;font-weight:500;cursor:pointer;color:var(--t2)}
.lingue button[aria-pressed=true]{background:var(--t);color:var(--s)}
.carrello{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--riga)}
.carrello svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.carrello__n{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;background:var(--a);color:var(--s);font-size:.78rem;font-weight:600;display:grid;place-items:center}
.burger{display:none;width:48px;height:48px;border:1px solid var(--riga);background:transparent;cursor:pointer;position:relative;z-index:60}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--t);transition:transform .5s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
html.menu-aperto .burger span:first-child{transform:translateY(4px) rotate(45deg)}
html.menu-aperto .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
html.menu-aperto .nav{z-index:55;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu{position:fixed;inset:0;z-index:50;background:var(--su);padding:100px var(--bordo) 36px;display:flex;flex-direction:column;justify-content:space-between}
.menu__voci{display:flex;flex-direction:column;border-top:1px solid var(--riga)}
.menu__voci a{font-family:var(--f-titoli);font-size:clamp(2rem,9vw,3rem);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--riga);display:block;line-height:1.1}
.menu__piede{color:var(--t2)}
.menu__piede a{display:inline-block;padding:10px 0;color:var(--t)}

/* ---------- hero ---------- */
.hero{max-width:calc(var(--max) + 2 * var(--bordo));margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);min-height:min(calc(100svh - 76px), 900px);padding-bottom:clamp(20px,3vw,40px)}
.hero__testo{grid-column:1 / span 6;grid-row:1;align-self:end;padding-bottom:clamp(10px,3vw,50px);display:grid;gap:26px;position:relative;z-index:2}
.hero__occhiello{font-size:.95rem;color:var(--t2);letter-spacing:.04em;display:flex;align-items:center;gap:14px}
.hero__occhiello::before{content:"";width:44px;height:1px;background:var(--p)}
.hero h1{font-size:clamp(3rem,1rem + 5.6vw,7.6rem);line-height:.95;letter-spacing:-.02em;max-width:9.5ch}
.hero__colonna{grid-column:7 / span 3;grid-row:1;position:relative;overflow:hidden;align-self:stretch;min-height:520px}
.hero__colonna img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero__colonna::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--t) 12%, transparent)}
.hero__lato{grid-column:10 / span 3;grid-row:1;align-self:end;display:grid;gap:18px;justify-items:start;padding-bottom:clamp(10px,3vw,50px)}
.hero__lato p{color:var(--t2);font-size:1.05rem}
.hero__lato .btn{white-space:normal;text-align:left}

/* ---------- esame ---------- */
.esame{padding-top:clamp(90px,11vw,170px);padding-bottom:clamp(70px,9vw,140px)}
.esame__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(30px,6vw,110px);align-items:start}
.esame .titolo{max-width:11ch}
.esame__sotto{margin-top:24px;font-size:1.15rem;color:var(--t2);max-width:46ch}
.esame__passi{list-style:none;margin:clamp(40px,5vw,70px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--riga);counter-reset:passo}
.esame__passi li{padding:24px 22px 0 0;display:grid;gap:8px;counter-increment:passo}
.esame__passi li + li{padding-left:22px;border-left:1px solid var(--riga)}
.esame__passi li::before{content:counter(passo);font-family:var(--f-titoli);font-size:2.4rem;color:var(--p);line-height:1}
.esame__passi strong{font-weight:500;font-size:1.08rem}
.esame__passi span{color:var(--t2);font-size:.97rem}
.prenota{border:1px solid var(--riga);padding:clamp(22px,2.6vw,36px);display:grid;gap:22px;background:var(--su);position:relative}
.prenota::before{content:"";position:absolute;left:-1px;top:-1px;width:64px;height:3px;background:var(--p)}
.prenota h3{font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem)}
.prenota__gruppo{display:grid;gap:10px}
.prenota__etichetta{font-size:.9rem;color:var(--t2);letter-spacing:.03em}
.opzioni{display:flex;flex-wrap:wrap;gap:6px}
.opzioni button{background:transparent;border:1px solid var(--riga);padding:10px 14px;min-height:44px;cursor:pointer;font-size:.95rem;transition:all .35s var(--esce)}
.opzioni button:hover{border-color:var(--t2)}
.opzioni button[aria-pressed=true]{background:var(--t);color:var(--s);border-color:var(--t)}
.opzioni--giorni button{display:grid;justify-items:center;min-width:58px;font-family:var(--f-titoli);font-size:1.35rem;line-height:1.1;padding:8px 10px}
.opzioni--giorni small{font-family:var(--f-testo);font-size:.8rem;color:inherit;opacity:.75}
.campo{display:grid;gap:8px;font-size:.9rem;color:var(--t2)}
.campo input{font:inherit;font-size:1rem;color:var(--t);background:transparent;border:0;border-bottom:1px solid color-mix(in oklab, var(--t) 45%, var(--s));padding:12px 0;min-height:48px;width:100%;border-radius:0}
.campo input:focus{outline:none;border-bottom-color:var(--p)}
.prenota__nota{font-size:.9rem;color:var(--t2)}

/* ---------- montature ---------- */
.montature{padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(80px,10vw,160px);position:relative}
.montature__testa{max-width:var(--max);margin:0 auto clamp(30px,4vw,60px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:end}
.montature__testa p{color:var(--t2);font-size:1.1rem;max-width:42ch;justify-self:end}
.elenco{list-style:none;margin:0 auto;padding:0;max-width:var(--max);border-top:1px solid var(--riga)}
.voce{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--riga);position:relative;cursor:default}
.voce__nome{font-family:var(--f-titoli);font-size:clamp(2rem,1.2rem + 3vw,4.6rem);line-height:1;transition:transform .6s var(--esce), color .4s}
.voce__dett{color:var(--t2);font-size:1rem}
.voce__prezzo{font-size:1.05rem;font-weight:500;white-space:nowrap}
.voce__mini{display:none}
.voce:hover .voce__nome{transform:translateX(18px);color:var(--p)}
.cursore-foto{position:fixed;left:0;top:0;width:clamp(220px,19vw,300px);aspect-ratio:4/5;pointer-events:none;z-index:30;overflow:hidden;opacity:0;visibility:hidden}
.cursore-foto img{width:100%;height:100%;object-fit:cover}

/* ---------- negozio ---------- */
.negozio{padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(70px,9vw,140px)}
.negozio__testa{max-width:var(--max);margin:0 auto clamp(26px,3vw,48px);display:grid;gap:14px}
.negozio__testa p{color:var(--t2);max-width:60ch}
.prodotti{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.prodotto{display:grid;gap:8px;align-content:start}
.prodotto figure{aspect-ratio:1;overflow:hidden;background:#f3f1ee;margin-bottom:10px}
.prodotto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--esce)}
.prodotto:hover img{transform:scale(1.06)}
.prodotto__riga{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.prodotto h3{font-size:1.45rem}
.prodotto__prezzo{font-weight:500;font-size:1.05rem}
.prodotto__dett{color:var(--t2);font-size:.95rem}
.aggiungi{justify-self:start;margin-top:6px;background:transparent;border:1px solid var(--t);min-height:46px;padding:8px 22px;cursor:pointer;font-weight:500;transition:all .35s var(--esce)}
.aggiungi:hover,.aggiungi.is-fatto{background:var(--t);color:var(--s)}

/* ---------- lenti ---------- */
.lenti{padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(60px,8vw,120px);background:var(--su)}
.lenti__in{max-width:var(--max);margin:0 auto}
.listino{margin-top:clamp(30px,4vw,60px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,6vw,100px)}
.listino h3{font-size:1.7rem;margin-bottom:14px;color:var(--p)}
.listino dl{margin:0}
.listino dl div{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--riga)}
.listino dt{flex:none}
.listino dl div::after{content:"";order:2;flex:1;border-bottom:1px dotted color-mix(in oklab, var(--t) 30%, var(--s));transform:translateY(-4px)}
.listino dd{order:3;margin:0;font-weight:500;white-space:nowrap}
.lenti__nota{margin-top:30px;color:var(--t2);max-width:70ch}

/* ---------- persona ---------- */
.persona{max-width:calc(var(--max) + 2 * var(--bordo));margin:0 auto;padding-top:clamp(90px,11vw,170px);padding-bottom:clamp(60px,8vw,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:center}
.persona__foto{grid-column:1 / span 5;aspect-ratio:4/5;overflow:hidden}
.persona__foto img{width:100%;height:118%;object-fit:cover;margin-top:-9%}
.persona__testo{grid-column:7 / span 6;display:grid;gap:18px}
.persona__ruolo{color:var(--a);letter-spacing:.03em}
.persona__frase{font-family:var(--f-titoli);font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);line-height:1.25;margin-top:10px}
.persona__altri{color:var(--t2)}

/* ---------- visti da vicino ---------- */
.visti{max-width:calc(var(--max) + 2 * var(--bordo));margin:0 auto;padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(80px,10vw,150px)}
.visti .titolo{margin-bottom:clamp(26px,3vw,48px)}
.visti__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:end}
.visti figure{overflow:hidden}
.visti img{width:100%;height:100%;object-fit:cover}
.visti__a{grid-column:1 / span 5;aspect-ratio:4/5}
.visti__b{grid-column:6 / span 4;aspect-ratio:1}
.visti__c{grid-column:10 / span 3;aspect-ratio:4/5;align-self:start}

/* ---------- recensioni ---------- */
.recensioni{padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(60px,8vw,120px);border-top:1px solid var(--riga);border-bottom:1px solid var(--riga)}
.recensioni__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6vw,100px);align-items:center}
.recensioni__cifra{font-family:var(--f-titoli);font-size:clamp(5rem,3rem + 7vw,11rem);line-height:.85;color:var(--p)}
.recensioni__voto h2{font-family:var(--f-testo);font-size:1.05rem;font-weight:400;color:var(--t2);letter-spacing:0;margin-top:14px}
.giostra{display:grid;min-height:260px;align-content:start}
.giostra__voce{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .7s var(--esce),visibility .7s,transform .7s var(--esce);transform:translateY(16px)}
.giostra__voce.is-attiva{opacity:1;visibility:visible;transform:none}
.giostra__voce p{font-family:var(--f-titoli);font-size:clamp(1.6rem,1rem + 1.8vw,2.8rem);line-height:1.2}
.giostra__voce footer{margin-top:20px;color:var(--t2)}
.giostra__comandi{grid-area:2 / 1;display:flex;align-items:center;gap:16px;margin-top:30px}
.giostra__btn{width:48px;height:48px;border:1px solid var(--riga);background:transparent;cursor:pointer;display:grid;place-items:center;transition:border-color .3s}
.giostra__btn:hover{border-color:var(--t)}
.giostra__btn svg{width:20px;height:20px;fill:none;stroke:var(--t);stroke-width:1.6}
.giostra__conta{color:var(--t2);font-size:.95rem;min-width:44px;text-align:center}

/* ---------- contatti ---------- */
.contatti{padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(60px,8vw,110px)}
.contatti__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.contatti__indirizzo{grid-column:1 / span 7;display:grid;gap:20px}
.contatti__indirizzo .titolo{max-width:12ch}
.contatti__indirizzo > p{color:var(--t2);max-width:50ch}
.contatti__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.orari{grid-column:9 / span 4;align-self:end}
.orari h3{font-size:1.6rem;margin-bottom:12px}
.orari dl{margin:0}
.orari dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--riga)}
.orari dt{color:var(--t2)}
.orari dd{margin:0;text-align:right}
.contatti__mappa{grid-column:1 / -1;height:clamp(220px,26vw,340px);border:1px solid var(--riga);position:relative;overflow:hidden;margin-top:clamp(10px,2vw,30px)}
.contatti__mappa svg{position:absolute;inset:0;width:100%;height:100%}
.m-griglia path{fill:none;stroke:var(--riga);stroke-width:1}
.m-via{fill:none;stroke:color-mix(in oklab, var(--t) 40%, var(--s));stroke-width:2}
.m-piazza{fill:none;stroke:var(--t2);stroke-width:1;stroke-dasharray:4 4}
.m-testo{font:500 11px var(--f-testo);letter-spacing:.18em;fill:var(--t2)}
.m-alone{fill:color-mix(in oklab, var(--p) 25%, transparent)}
.m-punto{fill:var(--p)}

/* ---------- piede ---------- */
.piede{padding:clamp(40px,6vw,90px) var(--bordo) 30px}
.piede__nome{font-family:var(--f-titoli);font-size:clamp(3rem,1rem + 9vw,11rem);line-height:.9;max-width:var(--max);margin:0 auto;overflow-wrap:anywhere;color:color-mix(in oklab, var(--t) 90%, var(--p))}
.piede__righe{max-width:var(--max);margin:clamp(24px,3vw,48px) auto 0;padding-top:20px;border-top:1px solid var(--riga);display:flex;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;font-size:.9rem;color:var(--t2)}
.piede a{text-decoration:none;display:inline-block;padding:10px 0}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;align-items:center;gap:10px;background:var(--t);color:var(--s);text-decoration:none;padding:8px 18px 8px 8px;font-weight:500;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transition:transform .45s var(--esce)}
.wa svg{width:40px;height:40px;padding:8px;background:#25d366;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.wa .wa__cornetta{fill:#fff;stroke:none}
.wa:hover{transform:translateY(-3px)}

/* ---------- stati iniziali solo con JS ---------- */
@keyframes sew-mostra{to{visibility:visible}}
.js .hero [data-h]{visibility:hidden;animation:sew-mostra 0s 3s forwards}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav__voci{gap:18px}
  .nav__voci a[href="#lenti"]{display:none}
  .hero__testo{grid-column:1 / span 7}
  .hero__colonna{grid-column:8 / span 5;grid-row:1 / span 2}
  .hero__lato{grid-column:1 / span 6;grid-row:2;padding-bottom:10px}
  .hero{grid-template-rows:auto auto}
}
@media (max-width:900px){
  .nav__voci,.btn--nav{display:none}
  .burger{display:block}
  .nav__in{gap:12px;min-height:68px}
  .hero{grid-template-columns:repeat(6,minmax(0,1fr));min-height:0;row-gap:24px;padding-top:28px}
  .hero__testo{grid-column:1 / -1;grid-row:1;padding-bottom:0}
  .hero__colonna{grid-column:1 / span 4;grid-row:2;min-height:0;aspect-ratio:3/4}
  .hero__lato{grid-column:1 / -1;grid-row:3}
  .esame__in{grid-template-columns:1fr}
  .montature__testa{grid-template-columns:1fr}
  .montature__testa p{justify-self:start}
  .voce{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"nome mini" "dett mini" "prezzo mini";gap:4px 16px}
  .voce__nome{grid-area:nome}
  .voce__dett{grid-area:dett}
  .voce__prezzo{grid-area:prezzo}
  .voce__mini{display:block;grid-area:mini;width:84px;height:105px;object-fit:cover}
  .cursore-foto{display:none}
  .prodotti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listino{grid-template-columns:1fr}
  .persona__foto{grid-column:1 / span 12}
  .persona__testo{grid-column:1 / span 12}
  .recensioni__in{grid-template-columns:1fr}
  .contatti__indirizzo,.orari{grid-column:1 / -1}
}
@media (max-width:560px){
  .lingue{display:none}
  .hero__colonna{grid-column:1 / -1;aspect-ratio:4/5}
  .hero h1{font-size:clamp(2.7rem,12.4vw,3.6rem)}
  .hero__lato .btn{width:100%;justify-content:center;text-align:center}
  .esame__passi{grid-template-columns:1fr}
  .esame__passi li + li{padding-left:0;border-left:0;border-top:1px solid var(--riga)}
  .esame__passi li{padding:18px 0}
  .prodotti{gap:22px 12px}
  .prodotto h3{font-size:1.2rem}
  .prodotto__riga{flex-direction:column;gap:2px}
  .aggiungi{width:100%}
  .visti__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visti__a{grid-column:1 / -1}
  .visti__b,.visti__c{grid-column:auto;align-self:stretch;aspect-ratio:4/5}
  .listino dl div{flex-wrap:wrap}
  .wa span{display:none}
  .wa{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .js .hero [data-h]{visibility:visible}
}
@media (max-width:560px){
  .hero__colonna{aspect-ratio:5/4}
  .hero__colonna img{object-position:50% 30%}
  .opzioni--giorni{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .opzioni--giorni button{min-width:0}
}

/* WhatsApp: nascosto nella prima schermata, compare appena si scorre (solo con JS) */
.wa{transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s 0s}
html.js:not(.scorso) .wa{transform:translateY(170%);visibility:hidden;transition:transform .4s ease,visibility 0s .4s}
.piede{padding-bottom:clamp(90px,8vw,110px)}
/* hero: la colonna di sinistra si apre in alto con la montatura del mese */
.hero__testo{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding-top:clamp(16px,3vh,40px)}
.hero__mese{margin:0 0 auto;display:flex;align-items:center;gap:16px;max-width:320px}
.hero__mese img{width:clamp(84px,7vw,112px);aspect-ratio:1;object-fit:cover;flex:none}
.hero__mese figcaption{font-size:.95rem;line-height:1.4;color:var(--t2)}
.hero__mese figcaption span{display:block;color:var(--p);font-size:.85rem;letter-spacing:.04em;margin-bottom:2px}
.hero h1{font-size:clamp(3rem,min(1rem + 5.6vw,10.5svh),7.6rem)}
@media (max-width:1180px){.hero__mese{display:none}}

/* ---------- apertura: messa a fuoco attraverso una lente, poi l'iride si chiude sul sito ---------- */
.apertura{background:var(--s);display:grid;place-items:center;align-content:center;gap:clamp(16px,3vh,28px);clip-path:circle(150% at 50% 50%)}
.ap-lente{position:relative;width:min(52vmin,320px);aspect-ratio:1}
.ap-lente img{position:absolute;inset:6%;width:88%;height:88%;border-radius:50%;object-fit:cover;object-position:50% 30%}
.ap-ghiera{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ap-ghiera circle{fill:none;stroke:var(--p);stroke-width:1.5}
.ap-ghiera line{stroke:var(--t);stroke-width:1.2;opacity:.55}
.ap-nome{font-family:var(--f-titoli);font-size:clamp(1.6rem,1rem + 2.4vw,3rem);color:var(--t);text-align:center;padding:0 24px;line-height:1}