/* ============================================================
   Miccone — stile CONDIVISO del sito (chrome comune a tutte le pagine)
   Header, menù, footer, bottoni, font del brand. Una sola fonte di verità.
   ============================================================ */
:root{
  --crosta:#7B4D35; --caffe:#3E2A1E; --dorata:#C98A3C; --cta:#D63A2B; --campagna:#6F7A45;
  --mollica:#F6F0E6; --panna:#FBF7F0; --inchiostro:#2B2723; --grigio:#8A8178; --linea:#E6DACA;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@font-face{font-family:'Miso';src:url('fonts/Miso-Regular.woff2') format('woff2'),url('fonts/Miso-Regular.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'Miso';src:url('fonts/Miso-Bold.woff2') format('woff2'),url('fonts/Miso-Bold.otf') format('opentype');font-weight:700;font-display:swap;}
body{font-family:'Miso','Inter',sans-serif;color:var(--inchiostro);background:var(--mollica);line-height:1.55;letter-spacing:.2px;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Miso','Inter',sans-serif;font-weight:700;color:var(--caffe);line-height:1.05;letter-spacing:.3px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

/* bottoni */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:40px;cursor:pointer;transition:.2s;border:1.5px solid transparent;}
.btn-gold{background:var(--cta);color:#fff;}
.btn-gold:hover{background:#b02e1f;transform:translateY(-1px);}
.btn-out{border-color:var(--crosta);color:var(--crosta);background:transparent;}
.btn-out:hover{background:var(--crosta);color:#fff;}
.eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--crosta);font-weight:600;}

/* header + menù */
header{position:sticky;top:0;z-index:50;background:rgba(246,240,230,.72);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;}
/* header intelligente: allo scroll lo sfondo diventa pieno e la barra si compatta un filo */
header.scrolled{background:rgba(246,240,230,.98);box-shadow:0 6px 22px rgba(62,42,30,.10);border-bottom-color:var(--linea);}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;transition:height .3s ease;}
header.scrolled .nav{height:62px;}
.nav .logo{height:38px;transition:height .3s ease;}
header.scrolled .nav .logo{height:32px;}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center;}
.nav ul a{font-size:16px;font-weight:700;letter-spacing:.4px;color:var(--caffe);transition:color .2s;position:relative;}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cta);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1);}
.nav ul a:hover{color:var(--crosta);}
.nav ul a:hover::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-right .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(214,58,43,.32);}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:26px;color:var(--caffe);transition:transform .2s;}
.burger:hover{transform:scale(1.12);}

/* footer */
footer{background:var(--caffe);color:#c9b79f;padding:56px 0 30px;margin-top:8px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
footer img.flogo{height:42px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.95;}
footer h4{color:#fff;font-family:'Miso','Inter',sans-serif;font-size:15px;font-weight:700;margin-bottom:14px;letter-spacing:.5px;}
footer ul{list-style:none;}
footer ul li{margin-bottom:9px;font-size:14px;}
footer ul a:hover{color:var(--dorata);}
footer .soc{display:flex;gap:16px;align-items:center;margin-top:10px;}
footer .soc a{color:#c9b79f;display:inline-flex;transition:color .2s,transform .2s;}
footer .soc a:hover{color:var(--dorata);transform:translateY(-2px);}
.foot-bot{border-top:1px solid #5a4130;margin-top:40px;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* quando si clicca un'ancora (es. Locali), lascia spazio per la barra fissa
   così il titolo della sezione non finisce nascosto sotto l'header */
section[id], [id].anchor-offset{scroll-margin-top:92px;}

/* menù mobile (panino) */
@media(max-width:900px){
  .nav ul{display:none;}
  .burger{display:block;}
  .nav ul.open{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--mollica);flex-direction:column;padding:18px 24px;gap:16px;border-bottom:1px solid var(--linea);z-index:60;}
}

/* ============================================================
   MOVIMENTO (aggiunto: reveal, marquee, hover, micro-zoom)
   Sobrio, veloce, rispetta prefers-reduced-motion.
   ============================================================ */

/* 1) Reveal on scroll — di default VISIBILE (se manca il JS o reduced-motion),
   nascosto solo quando <html> ha la classe .motion (aggiunta dal JS). */
.reveal{opacity:1;transform:none;}
html.motion .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
html.motion .reveal.in{opacity:1;transform:none;}

/* 3) Hover card: sollevamento leggero + ombra morbida */
.qa a,.panino,.tile,.loc,.rev,.award,.lg{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.qa a:hover,.panino:hover,.loc:hover,.rev:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(62,42,30,.10);}

/* 5) Micro-zoom sulle immagini dentro le card */
.tile,.panino .pic,.loc>img,.card .pic{overflow:hidden;}
.tile img,.panino .pic img{transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;}
.tile:hover img,.panino:hover .pic img{transform:scale(1.03);}

/* 2) Marquee — striscia a scorrimento continuo (CSS puro) */
.marquee{background:var(--caffe);color:var(--panna);overflow:hidden;white-space:nowrap;}
.marquee__track{display:inline-block;padding:14px 0;will-change:transform;animation:mic-marquee 30s linear infinite;}
.marquee__track span{margin:0 22px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:15px;vertical-align:middle;}
.marquee__track .dot{color:var(--dorata);}
@keyframes mic-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Rispetta chi preferisce meno movimento: tutto fermo e visibile */
@media (prefers-reduced-motion: reduce){
  html.motion .reveal{opacity:1 !important;transform:none !important;transition:none;}
  .marquee__track{animation:none;}
  html{scroll-behavior:auto;}
}