/* IRUÀ – La Barberia di Cernusco. Landing page, VARIANTE "wordmark moderno" (proposta 2 del logo).
   Nero e bianco caldo, rosso e blu del palo da barbiere come soli accenti; tutto in Archivo. */
@font-face{font-family:"Archivo Expanded";src:url("fonts/ArchivoExpanded-Black.ttf") format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url("fonts/ArchivoExpanded-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo-SemiBold.ttf") format("truetype");font-weight:600 700;font-display:swap}

:root{
  --nero:#141414; --grafite:#0B0B0B; --carta:#F3F0EA; --osso:#E2DDD3; --fumo:#5C5952;
  --rosso:#C8202F; --rosso-scuro:#A31826; --blu:#2341A0; --ottone:#E9E4DA;
  --titoli:"Archivo Expanded",system-ui,sans-serif; --testo:"Archivo",system-ui,sans-serif;
  --m:clamp(18px,5vw,64px); --sez:clamp(64px,9vw,128px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* "nascosto" vale anche per i pulsanti */
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--carta);color:var(--nero);font:clamp(1rem,.95rem + .25vw,1.125rem)/1.55 var(--testo);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
h1,h2,h3{font-family:var(--titoli);font-weight:900;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:clamp(1.7rem,1rem + 3vw,3.3rem);margin-bottom:.5em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dentro{max-width:1160px;margin:0 auto;padding:0 var(--m)}
.sez{padding:var(--sez) 0}
.occhiello{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rosso);margin-bottom:14px}
.apertura .occhiello,.prenota .occhiello{color:#F0A3AA}

/* il palo da barbiere: una sottile fascia a righe, unico dettaglio decorativo */
.palo{height:8px;background:repeating-linear-gradient(-45deg,var(--rosso) 0 14px,var(--carta) 14px 28px,var(--blu) 28px 42px,var(--carta) 42px 56px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:700 .95rem var(--titoli);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s}
.btn.primario{background:var(--rosso);color:#fff}
.btn.primario:hover{background:var(--rosso-scuro)}
.btn.secondario{border-color:currentColor}
.btn.secondario:hover{background:rgba(255,255,255,.1)}

/* barra in alto */
.barra{position:sticky;top:0;z-index:10;background:var(--nero);color:#fff}
.barra .dentro{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marchio{display:block;text-decoration:none}
.marchio img{height:30px;width:auto}
.barra nav{display:flex;align-items:center;gap:22px;font-size:.95rem}
.barra nav a{text-decoration:none}
.barra nav a:not(.btn):hover{text-decoration:underline}
.barra .btn{min-height:42px;padding:0 18px;font-size:.92rem}

/* apertura */
.apertura{background:var(--nero);color:#fff}
.apertura .dentro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,80px)}
.apertura h1.emblema img{width:clamp(260px,34vw,460px);height:auto}
.apertura .frase{max-width:30em;margin-top:20px;color:#DCD5C8}
.prenota-subito{margin-top:22px;padding-top:18px;border-top:1px solid rgba(244,237,224,.22)}
.prenota-subito .titoletto{font-family:var(--titoli);font-weight:900;text-transform:uppercase;font-size:clamp(1.1rem,.9rem + .8vw,1.5rem);margin-bottom:14px}
.apertura .azioni{display:flex;flex-wrap:wrap;gap:12px}
.prenota-subito .nota-app{margin-top:12px;font-size:.92rem;color:#C9C1B2;max-width:32em}
.prenota-subito .nota-app a{color:#fff}
.btn small{font-weight:400;font-size:.82em;opacity:.85;padding-left:8px;border-left:1px solid rgba(255,255,255,.4)}
.apertura .dove{margin-top:22px;font-size:.92rem;color:#B9B1A2}
.apertura figure{margin:0}
.apertura figure img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* lavori */
.griglia-lavori{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px);margin-top:28px}
.griglia-lavori figure{margin:0}
.griglia-lavori img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--osso)}
.griglia-lavori figcaption{font-size:.9rem;color:var(--fumo);margin-top:8px}
.altri-lavori{margin-top:24px}

/* servizi e prezzi */
.servizi{background:#fff}
.listino{list-style:none;max-width:760px;margin-top:24px;border-top:1px solid var(--osso)}
.listino li{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--osso)}
.listino .nome{font-family:var(--testo);font-weight:600;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.15}
.listino .prezzo{font-family:var(--titoli);font-weight:900;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);grid-row:1/3;grid-column:2;align-self:center;white-space:nowrap}
.listino .nota{color:var(--fumo);font-size:.95rem}

/* orari e indirizzo */
.info .dentro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.orari{width:100%;border-collapse:collapse;margin-top:8px}
.orari th,.orari td{text-align:left;padding:12px 0;border-bottom:1px solid var(--osso);font-weight:400}
.orari td{text-align:right;font-variant-numeric:tabular-nums}
.orari .chiuso td{color:var(--fumo)}
.indirizzo{font-family:var(--testo);font-weight:600;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.2;margin:8px 0 20px}
.telefono{margin:-8px 0 20px;line-height:1.8}
.telefono a{font-weight:700}
.azioni-info{display:flex;flex-wrap:wrap;gap:12px}
.info .btn.secondario{color:var(--nero)}
.info .btn.secondario:hover{background:var(--osso)}

/* prenota */
.prenota{background:var(--nero);color:#fff;text-align:center}
.prenota p{max-width:34em;margin:0 auto;color:#DCD5C8}
.prenota .azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.da-completare{display:inline-block;margin-top:18px;padding:8px 14px;border:1px dashed #E7B6BE;color:#F3C9D0;font-size:.9rem}

/* piè di pagina */
.piede{background:var(--grafite);color:#C9C1B2;font-size:.9rem;padding:36px 0 calc(36px + env(safe-area-inset-bottom,0px))}
.piede .dentro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px}
.piede a{color:#fff}

/* telefono: pulsante di prenotazione sempre a portata di pollice */
.fisso{display:none}
@media (max-width:760px){
  .barra nav a:not(.btn){display:none}
  .marchio img{height:32px}
  .apertura .dentro,.info .dentro{grid-template-columns:1fr}
  .apertura .dentro{padding-top:20px;padding-bottom:0;gap:28px}
  .apertura h1.emblema img{width:250px}
  .apertura .frase{font-size:.95rem;margin-top:14px}
  .prenota-subito{margin-top:16px;padding-top:14px}
  .prenota-subito .titoletto{margin-bottom:10px}
  .apertura .dove{margin-top:14px}
  .apertura figure{margin:0 calc(var(--m) * -1)}
  .apertura figure img{aspect-ratio:1/1}
  .griglia-lavori{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--m) * -1);padding-right:var(--m)}
  .griglia-lavori figure{scroll-snap-align:start}
  .fisso{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20}
  .fisso{gap:8px}
  .fisso .btn{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
  .fisso .btn.primario{flex:1}
  .fisso .btn.icona{background:var(--nero);color:#fff;width:52px;padding:0}
  .piede{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* dettagli di impaginazione: titoli bilanciati, recapiti mai spezzati */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
a[href^="mailto:"],a[href^="tel:"]{white-space:nowrap}
html,body{overflow-x:clip}
@media (max-width:360px){h2{font-size:1.5rem}}