/* ============================================================
   Ristorazione Più — www.ristorazionepiu.it
   Sito statico. Nessuna dipendenza esterna, font self-hosted.
   Palette: arancio brand, zafferano, oliva, crema, seppia.
   ============================================================ */

/* ---------- Font self-hosted ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fraunces-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/figtree-latin-700-normal.woff2') format('woff2')}

/* ---------- Token ---------- */
:root{
  --arancio:#E8630A;
  --arancio-scuro:#B54A00;
  --zafferano:#F5B301;
  --oliva:#3F6B35;
  --crema:#FFF9F2;
  --crema-scura:#F7EDE0;
  --seppia:#2B2118;
  --seppia-70:rgba(43,33,24,.72);
  --bianco:#FFFFFF;
  --radius:14px;
  --maxw:1120px;
  --display:'Fraunces',Georgia,serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--body);color:var(--seppia);background:var(--crema);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--arancio-scuro)}
:focus-visible{outline:3px solid var(--zafferano);outline-offset:2px;border-radius:3px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.topbar{background:var(--seppia);color:var(--crema);font-size:.85rem;padding:6px 0}
.topbar .container{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap}
.topbar a{color:var(--crema);text-decoration:none}
.topbar a:hover{color:var(--zafferano)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,249,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--crema-scura)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.logo{font-family:var(--display);font-weight:700;font-size:1.45rem;color:var(--seppia);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.logo .piu{color:var(--arancio);font-size:1.2em}
.logo small{display:block;font-family:var(--body);font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seppia-70)}
nav.main ul{display:flex;gap:26px;list-style:none;align-items:center}
nav.main a{text-decoration:none;color:var(--seppia);font-weight:500;font-size:.97rem;padding:6px 2px;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{border-bottom-color:var(--arancio);color:var(--arancio-scuro)}
.nav-cta{background:var(--arancio);color:#fff!important;padding:10px 20px!important;border-radius:999px;border-bottom:none!important;font-weight:600}
.nav-cta:hover{background:var(--arancio-scuro)}
.burger{display:none;background:none;border:2px solid var(--seppia);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--seppia)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--arancio) 0%,#D3540A 55%,var(--arancio-scuro) 100%);color:var(--crema);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 80% 20%,rgba(245,179,1,.28),transparent 65%);pointer-events:none}
.hero .container{position:relative;z-index:1;padding-top:84px;padding-bottom:96px;max-width:880px;text-align:center}
.steam{height:46px;margin-bottom:10px}
.steam path{stroke:rgba(255,249,242,.75);stroke-width:3;fill:none;stroke-linecap:round}
@keyframes rise{0%{transform:translateY(6px);opacity:0}25%{opacity:.9}100%{transform:translateY(-8px);opacity:0}}
.steam path{animation:rise 3.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1s}
.steam path:nth-child(3){animation-delay:2s}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1.04;letter-spacing:-.02em}
.hero h1 .punto{color:var(--zafferano)}
.hero p.lead{margin:26px auto 0;max-width:620px;font-size:clamp(1.05rem,2vw,1.25rem);color:rgba(255,249,242,.92)}
.hero-actions{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:999px;padding:14px 30px;font-size:1rem;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--seppia);color:var(--crema)}
.btn-primary:hover{background:#1d1610}
.btn-ghost{background:rgba(255,249,242,.14);color:var(--crema);border:2px solid rgba(255,249,242,.65)}
.btn-ghost:hover{background:rgba(255,249,242,.24)}
.btn-arancio{background:var(--arancio);color:#fff}
.btn-arancio:hover{background:var(--arancio-scuro)}
.hero-badges{margin-top:44px;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;font-size:.88rem;color:rgba(255,249,242,.85)}
.hero-badges span::before{content:"◆";color:var(--zafferano);margin-right:8px;font-size:.7em;vertical-align:1px}

/* ---------- Sezioni ---------- */
section{padding:88px 0}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--arancio-scuro)}
h2.sec{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:10px 0 18px;line-height:1.12}
.sec-intro{max-width:640px;color:var(--seppia-70)}

/* Il menù dei servizi — elemento firma */
.menu-servizi{margin-top:56px;display:grid;gap:0;border-top:2px solid var(--seppia)}
.voce{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:18px 48px;padding:44px 0;border-bottom:1px dashed rgba(43,33,24,.35);align-items:start}
.voce-titolo h3{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.01em}
.voce-titolo .leader{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.voce-titolo .leader::after{content:"";flex:1;border-bottom:2px dotted var(--arancio);transform:translateY(-4px)}
.voce-titolo .tag{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva)}
.voce-testo p+p{margin-top:14px}
.voce-testo{color:var(--seppia);max-width:60ch}

/* Come lo facciamo — processo */
.come{background:var(--seppia);color:var(--crema)}
.come .eyebrow{color:var(--zafferano)}
.come h2.sec{color:var(--crema)}
.come .sec-intro{color:rgba(255,249,242,.75)}
.passi{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.passo{border-top:3px solid var(--arancio);padding-top:22px}
.passo .num{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--zafferano)}
.passo h3{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:8px 0 10px}
.passo p{color:rgba(255,249,242,.82);font-size:.98rem}

/* Impegno ambiente */
.ambiente{background:var(--crema-scura)}
.ambiente .card-oliva{background:var(--oliva);color:var(--crema);border-radius:var(--radius);padding:44px 48px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.ambiente .foglia{font-size:2.6rem;line-height:1}
.ambiente h3{font-family:var(--display);font-size:1.5rem;margin-bottom:8px}
.ambiente p{color:rgba(255,249,242,.9)}

/* CTA finale */
.cta-finale{text-align:center}
.cta-finale .box{background:var(--arancio);border-radius:calc(var(--radius) + 6px);color:var(--crema);padding:68px 32px;position:relative;overflow:hidden}
.cta-finale .box::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 15% 100%,rgba(245,179,1,.35),transparent 60%)}
.cta-finale h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);position:relative;z-index:1}
.cta-finale p{margin:14px auto 30px;max-width:520px;position:relative;z-index:1;color:rgba(255,249,242,.92)}
.cta-finale .hero-actions{margin-top:0;position:relative;z-index:1}

/* ---------- Pagine interne ---------- */
.pagina-testata{background:var(--seppia);color:var(--crema);padding:64px 0 56px}
.pagina-testata h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.015em}
.pagina-testata .briciole{font-size:.85rem;color:rgba(255,249,242,.65);margin-bottom:14px}
.pagina-testata .briciole a{color:var(--zafferano);text-decoration:none}
.pagina-corpo{padding:64px 0 88px}
.prosa{max-width:74ch}
.prosa h2{font-family:var(--display);font-size:1.5rem;margin:36px 0 12px}
.prosa h3{font-family:var(--display);font-size:1.2rem;margin:28px 0 10px}
.prosa p{margin:14px 0}
.prosa ul,.prosa ol{margin:14px 0 14px 24px}
.prosa li{margin:8px 0}
.prosa strong{font-weight:700}
.nota-legale{font-size:.98rem}
.firma{margin-top:36px;padding-top:18px;border-top:1px dashed rgba(43,33,24,.35);font-size:.95rem;color:var(--seppia-70)}

/* Contatti */
.grid-contatti{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.scheda{background:#fff;border:1px solid var(--crema-scura);border-radius:var(--radius);padding:32px;margin-bottom:22px}
.scheda h3{font-family:var(--display);font-size:1.25rem;margin-bottom:12px}
.scheda p{margin:6px 0}
.scheda .grande{font-size:1.25rem;font-weight:600}
.scheda a{text-decoration:none}
.orari{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-size:.98rem}
.orari dt{font-weight:600}
.azioni-contatto{display:grid;gap:14px}
.azione{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--crema-scura);border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--seppia);font-weight:600;transition:transform .15s ease,border-color .15s ease}
.azione:hover{transform:translateY(-2px);border-color:var(--arancio)}
.azione .icona{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0;color:#fff}
.icona.wa{background:#25D366}
.icona.tel{background:var(--arancio)}
.icona.mail{background:var(--seppia)}
.icona.mappa{background:var(--oliva)}
.azione small{display:block;font-weight:400;color:var(--seppia-70);font-size:.85rem}

/* FNC */
.fnc-box{background:#fff;border:1px solid var(--crema-scura);border-left:6px solid var(--zafferano);border-radius:var(--radius);padding:36px 40px;max-width:76ch}
.fnc-box p+p{margin-top:14px}

/* ---------- Footer ---------- */
footer.site{background:var(--seppia);color:var(--crema);padding:64px 0 28px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot-logo{font-family:var(--display);font-weight:700;font-size:1.5rem}
.foot-logo .piu{color:var(--arancio)}
.foot-grid h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zafferano);margin-bottom:14px;font-weight:700}
.foot-grid p,.foot-grid li{font-size:.95rem;color:rgba(255,249,242,.82)}
.foot-grid ul{list-style:none}
.foot-grid li{margin:8px 0}
.foot-grid a{color:rgba(255,249,242,.82);text-decoration:none}
.foot-grid a:hover{color:var(--zafferano)}
.claim{margin-top:10px;font-size:.92rem;color:rgba(255,249,242,.6)}
.colofone{border-top:1px solid rgba(255,249,242,.15);margin-top:44px;padding-top:22px;font-size:.85rem;color:rgba(255,249,242,.55);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* WhatsApp flottante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa-float:hover{transform:scale(1.06)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .passi{grid-template-columns:1fr}
  .grid-contatti{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .voce{grid-template-columns:1fr;gap:10px}
  .ambiente .card-oliva{grid-template-columns:1fr;padding:34px 30px}
}
@media(max-width:760px){
  nav.main{position:absolute;top:100%;left:0;right:0;background:var(--crema);border-bottom:1px solid var(--crema-scura);display:none;padding:12px 24px 20px}
  nav.main.aperto{display:block}
  nav.main ul{flex-direction:column;align-items:flex-start;gap:4px}
  nav.main a{display:block;padding:10px 0;font-size:1.05rem}
  .burger{display:block}
  section{padding:64px 0}
  .topbar .container{justify-content:center}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .hero .container{padding-top:60px;padding-bottom:70px}
}

/* ============ Integrazione immagini ============ */

/* Scenografia hero: ingredienti fluttuanti + padella */
.hero .container{padding-bottom:30px}
.hero-scena{position:relative;z-index:1;max-width:760px;margin:44px auto -6px}
.hero-scena .padella{width:min(620px,82%);margin:0 auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.30))}
.fluttua{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.fl-pomodoro{width:78px;left:2%;top:-46px;transform:rotate(-8deg)}
.fl-broccolo{width:96px;right:3%;top:-58px;transform:rotate(10deg)}
.fl-cipolla{width:110px;left:-4%;bottom:22%;opacity:.95}
.fl-erba{width:60px;right:-2%;bottom:30%;transform:rotate(-14deg)}
@keyframes galleggia{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
.fluttua{animation:galleggia 5s ease-in-out infinite}
.fl-broccolo{--rot:10deg;animation-delay:.8s}
.fl-pomodoro{--rot:-8deg}
.fl-cipolla{animation-delay:1.6s}
.fl-erba{--rot:-14deg;animation-delay:2.4s}
/* Colate d'olio ai lati dell'hero, solo su schermi larghi */
.hero-olio{position:absolute;top:0;height:100%;width:auto;opacity:.5;pointer-events:none;z-index:0}
.hero-olio.sx{left:2vw}
.hero-olio.dx{right:2vw;transform:scaleX(-1)}
@media(max-width:1100px){.hero-olio{display:none}}
@media(max-width:640px){.fl-cipolla,.fl-erba{display:none}.fl-pomodoro{width:56px}.fl-broccolo{width:68px}}

/* Immagini nelle voci del menù servizi */
.voce{grid-template-columns:minmax(170px,280px) 1fr 230px}
.voce-foto{align-self:center}
.voce-foto img{border-radius:14px;width:100%;max-width:230px;margin-left:auto}
.voce-foto.trasparente img{border-radius:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.15))}
@media(max-width:900px){.voce{grid-template-columns:1fr}.voce-foto img{margin:6px 0 0;max-width:260px}}

/* Cascata di spezie a lato della sezione "come" */
.come{position:relative;overflow:hidden}
.come .spezie{position:absolute;right:3%;top:8%;width:90px;opacity:.55;pointer-events:none}
@media(max-width:900px){.come .spezie{display:none}}

/* CTA finale su lavagna */
.cta-finale .box{background:#1d2733 url('../img/lavagna-menu.webp') center/cover no-repeat}
.cta-finale .box::after{background:linear-gradient(90deg,rgba(20,28,38,.68) 0%,rgba(20,28,38,.35) 45%,rgba(20,28,38,.15) 100%)}

/* Evidenziatore giallo sotto parola chiave */
.evidenzia{position:relative;white-space:nowrap}
.evidenzia::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:12px;background:url('../img/tratto-giallo.webp') center/100% 100% no-repeat;z-index:-1}

/* Logo immagine nel footer */
.foot-logo-img{width:230px;height:auto;margin-bottom:8px}