/* PANETTA — sito vetrina · tradizione, grafica "toon" ordinata */

:root{
  --bg:#FFF9D6;
  --surface:#F7E6B5;
  --ink:#5A2923;
  --fg:#3A211C;
  --muted:#7B574B;
  --accent:#904B4B;
  --accent-2:#E8B07F;
  --cream:#FFF9D6;
  --line:rgba(90,41,35,.28);

  --f-display:"Ultra","Rockwell Extra Bold",Georgia,serif;
  --f-ui:"Bree Serif",Georgia,serif;
  --f-body:"Merriweather",Georgia,"Times New Roman",serif;

  --bw:2.5px;
  --sh:5px 5px 0 var(--ink);
  --r:18px;
  --wrap:1160px;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.12;margin:0;color:var(--accent);text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.35rem)}
p{margin:0;max-width:58ch}
.lead{font-size:clamp(1.02rem,1.4vw,1.15rem)}
.label{font-family:var(--f-ui);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-lg{display:flex;flex-direction:column;gap:1.6rem}

/* ---------- barra sezioni ---------- */
.sezioni{background:var(--ink);color:var(--cream);font-family:var(--f-ui);font-size:.92rem}
.sezioni .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sezioni nav{display:flex;gap:.3rem}
.sezioni a{text-decoration:none;padding:.55rem .9rem;opacity:.75}
.sezioni a[aria-current="true"]{opacity:1;background:var(--accent);box-shadow:inset 0 -3px 0 var(--accent-2)}
.sezioni .tel{opacity:1;padding-inline:0}

/* ---------- header ---------- */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:var(--bw) solid var(--ink)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.75rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo i{
  width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--cream);font-style:normal;font-family:var(--f-display);font-size:1.5rem;
  border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.logo span{display:flex;flex-direction:column;line-height:1.1}
.logo b{font-family:var(--f-display);font-weight:400;font-size:1.45rem;color:var(--accent)}
.logo small{font-family:var(--f-ui);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logo img{height:50px;width:auto}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{font-family:var(--f-ui);text-decoration:none;font-size:1rem;padding:.4rem .85rem;border-radius:999px;border:2px solid transparent}
.nav a:hover{border-color:var(--ink)}
.nav a[aria-current="page"]{background:var(--surface);border-color:var(--ink)}
.nav .btn{margin-left:.5rem}
.burger{display:none}
.burger summary{list-style:none;cursor:pointer}
.burger summary::-webkit-details-marker{display:none}
.burger nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:var(--bw) solid var(--ink);display:flex;flex-direction:column;padding:.4rem var(--gutter) 1.2rem}
.burger nav a{text-decoration:none;font-family:var(--f-display);color:var(--accent);font-size:1.35rem;padding:.6rem 0;border-bottom:1.5px dashed var(--line)}
@media (max-width:900px){.nav{display:none}.burger{display:block}}

/* fascia decorativa sotto l'header */
.fregio{
  height:16px;background-color:var(--accent);border-bottom:var(--bw) solid var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Ccircle cx='14' cy='8' r='3' fill='%23FFF9D6'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;
}

/* ---------- bottoni ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:.95rem;letter-spacing:.02em;text-decoration:none;line-height:1.2;
  padding:.8rem 1.35rem;border-radius:999px;background:var(--accent);color:var(--cream);
  border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--line{background:var(--cream);color:var(--ink)}
.btn--sm{padding:.5rem 1rem;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)}

/* bottone tondo (dal sito originale) */
.tondo{
  width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center;text-align:center;
  font-family:var(--f-display);font-size:.95rem;line-height:1.15;text-decoration:none;
  background:var(--cream);color:var(--accent);border:var(--bw) solid var(--ink);box-shadow:var(--sh);
  transition:transform .6s ease;
}
.tondo:hover{transform:rotate(360deg)}

/* ---------- foto ---------- */
.foto{
  margin:0;aspect-ratio:var(--ar,4/5);max-width:100%;overflow:hidden;
  border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  background:
    radial-gradient(circle,rgba(144,75,75,.16) 1.6px,transparent 2px) 0 0/16px 16px,
    var(--surface);
}
.foto img{width:100%;height:100%;object-fit:cover}
.sez--tinta .foto{background:radial-gradient(circle,rgba(144,75,75,.2) 1.6px,transparent 2px) 0 0/16px 16px,#EFD9A0}

/* ---------- sezioni ---------- */
.sez{padding-block:clamp(3.5rem,8vw,6rem)}
.sez--tinta{background:var(--surface);position:relative}
.sez--tinta::before,.sez--tinta::after{
  content:"";position:absolute;left:0;right:0;height:14px;pointer-events:none;
  background-repeat:repeat-x;background-size:28px 14px;
}
.sez--tinta::before{top:0;background-image:radial-gradient(circle at 14px 0,var(--bg) 12px,transparent 12.5px)}
.sez--tinta::after{bottom:0;background-image:radial-gradient(circle at 14px 14px,var(--bg) 12px,transparent 12.5px)}

.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,7vw,5.5rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}}

.due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.due--centro{align-items:center}
@media (max-width:860px){.due{grid-template-columns:1fr}}

.galleria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.galleria .foto{--ar:1/1}
.galleria .foto:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
@media (max-width:640px){.galleria{grid-template-columns:1fr 1fr}.galleria .foto:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3;height:auto}}

.elenco{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}
.elenco li{font-family:var(--f-ui);font-size:1.05rem;padding:.45rem 1.05rem;border-radius:999px;background:var(--cream);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}

.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.8rem)}
.tre div{display:grid;place-items:center;text-align:center;padding:2rem 1rem;background:var(--cream);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
@media (max-width:720px){.tre{grid-template-columns:1fr}}

.fascia{display:flex;justify-content:space-between;align-items:center;gap:1.5rem 3rem;flex-wrap:wrap}

.info{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.5rem;padding:1.2rem 1.4rem;background:var(--cream);border:2px solid var(--ink);border-radius:var(--r)}
.info dt{font-family:var(--f-ui);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:.15rem}
.info dd{margin:0}
.info a{text-decoration-color:var(--accent-2);text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------- menu ---------- */
.menu-top{padding-block:clamp(2.5rem,6vw,4rem) 1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.menu-top h1{font-size:clamp(3rem,9vw,5.5rem)}
.menu-top p{margin-inline:auto}
.menu-nav .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;padding-block:.5rem 1rem}
.menu-nav a{font-family:var(--f-ui);text-decoration:none;font-size:.95rem;padding:.35rem .9rem;border-radius:999px;border:2px solid var(--ink);background:var(--cream)}
.menu-nav a:hover{background:var(--accent);color:var(--cream)}
.menu-corpo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,4.5rem);padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,5rem)}
@media (max-width:860px){.menu-corpo{grid-template-columns:1fr}}
.cat{display:flex;flex-direction:column;gap:.9rem;scroll-margin-top:110px}
.cat h2{
  font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--cream);background:var(--accent);text-align:center;
  padding:.55rem 1rem;border-radius:999px;border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);
}
.cat h2::before,.cat h2::after{content:"•";margin-inline:.7rem;color:var(--accent-2)}
.sub{font-family:var(--f-ui);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-align:center;margin-top:.6rem;display:flex;align-items:center;gap:.8rem}
.sub::before,.sub::after{content:"";flex:1;border-top:2px solid var(--ink)}
.listino{list-style:none;margin:0;padding:0}
.listino li{display:flex;align-items:baseline;gap:.6rem;padding:.42rem 0}
.listino li::after{content:"";order:1;flex:1 1 1rem;border-bottom:2px dotted var(--line)}
.listino li > span:first-child{order:0}
.listino .prezzo{order:2}
.listino .nota{display:block;font-size:.82rem;font-style:italic;color:var(--muted)}
.listino .prezzo{white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--f-ui);color:var(--accent);font-size:1.05rem}
.listino .unita{color:var(--muted);font-size:.85rem}
.nota-cat{font-size:.92rem;padding:.9rem 1.1rem;border:2px dashed var(--accent);border-radius:12px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#F6E7C2;padding-block:clamp(3.5rem,6vw,4.5rem) 2rem;font-size:.95rem;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:radial-gradient(circle at 14px 0,var(--bg) 12px,transparent 12.5px) repeat-x;background-size:28px 14px}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem}
.footer h3{color:var(--accent-2);font-size:1.6rem}
.footer .label{color:var(--accent-2)}
.footer address{font-style:normal}
.footer a{text-decoration-color:var(--accent-2);text-underline-offset:3px}
.footer__base{margin-top:3rem;padding-top:1.2rem;border-top:1.5px dashed rgba(246,231,194,.35);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.footer__base nav{display:flex;gap:1.2rem;flex-wrap:wrap}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr}}

/* ---------- animazioni ---------- */
@keyframes scorri{to{background-position-x:28px}}
@keyframes scorri-inv{to{background-position-x:-28px}}
@keyframes pois{to{background-position:16px 16px,0 0}}
@keyframes dondola{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

.fregio{animation:scorri 1.6s linear infinite}
.sez--tinta::before{animation:scorri 2.4s linear infinite}
.sez--tinta::after{animation:scorri-inv 2.4s linear infinite}
.footer::before{animation:scorri 2.4s linear infinite}
.foto{animation:pois 6s linear infinite}
.elenco li:hover,.menu-nav a:hover{animation:dondola .45s ease-in-out}
.logo:hover i{animation:dondola .45s ease-in-out}

/* ---------- loghi ---------- */
.header .wrap{padding-block:.55rem}
.logo img{height:66px;width:auto;display:block}
.logo img.logo--logo-panificio{height:58px}
.logo-hero{width:min(100%,440px);height:auto;margin-inline:auto}
.logo-hero--panificio{width:min(100%,520px)}
.footer__loghi{display:flex;align-items:center;gap:1.4rem}
.footer__loghi img{height:84px;width:auto}
@media (max-width:860px){.logo-hero{width:min(80%,340px)}}

/* =========================================================
   v4 — nastri, chi siamo in griglia, tessere, scroll
   ========================================================= */

/* nastro di testo che scorre */
.nastro{overflow:hidden;background:var(--accent);border-block:var(--bw) solid var(--ink);padding-block:.9rem;position:relative;z-index:1}
.nastro__track{display:flex;width:max-content;align-items:center;gap:1.6rem;animation:nastro 38s linear infinite;padding-right:1.6rem}
.nastro span{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--cream);white-space:nowrap;line-height:1}
.nastro i{font-style:normal;color:var(--accent-2);font-size:1.2rem}
@keyframes nastro{to{transform:translateX(-50%)}}
.nastro--vuoto{background:var(--bg);border-color:var(--ink)}
.nastro--vuoto .nastro__track{animation-direction:reverse;animation-duration:30s}
.nastro--vuoto span{color:transparent;-webkit-text-stroke:1.5px var(--accent);font-size:clamp(2rem,5vw,3.6rem)}
.nastro--vuoto i{color:var(--accent)}

/* chi siamo: griglia con testo giustificato */
.chi{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:clamp(1.2rem,3vw,2.5rem) clamp(1.5rem,4vw,3.5rem);align-items:start}
.chi__titolo{grid-column:1 / span 6;grid-row:1;display:flex;flex-direction:column;gap:1rem;padding-top:1rem}
.chi__titolo h2{font-size:clamp(1.9rem,4vw,3rem)}
.chi__testo{grid-column:1 / span 6;grid-row:2;display:flex;flex-direction:column;gap:1.8rem;padding-top:1.4rem;border-top:var(--bw) solid var(--ink)}
.chi__foto{grid-column:8 / span 5;grid-row:1 / span 2}
.giustificato{text-align:justify;hyphens:auto;-webkit-hyphens:auto;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.85;max-width:none}
.capolettera::first-letter{
  float:left;font-family:var(--f-display);color:var(--cream);background:var(--accent);
  font-size:3.3em;line-height:1;padding:.12em .16em .08em;margin:.08em .16em 0 0;
  border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);
}
@media (max-width:860px){
  .chi{grid-template-columns:1fr}
  .chi__titolo,.chi__testo,.chi__foto{grid-column:1;grid-row:auto}
  .chi__foto{--ar:4/3!important}
}

/* testata sezione */
.testata{display:flex;flex-direction:column;gap:.9rem;max-width:40rem}

/* tessere-pulsante */
.tessere{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.8vw,1.2rem)}
.tessere--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tessere{grid-template-columns:repeat(2,1fr)}.tessere--3{grid-template-columns:1fr}}
.tessera{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;min-height:120px;
  padding:1.1rem 1.2rem;text-decoration:none;background:var(--cream);color:var(--accent);
  border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .15s ease;
}
.tessere--3 .tessera{min-height:150px}
.tessera__t{font-family:var(--f-display);font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.15;text-wrap:balance}
.tessera__go{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;
  border:2px solid var(--ink);background:var(--surface);color:var(--ink);transition:transform .25s ease
}
.tessera:hover{background:var(--accent);color:var(--cream);transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.tessera:hover .tessera__go{transform:rotate(-45deg);background:var(--accent-2)}

/* galleria con parallasse: margine per l'ombra */
.galleria{padding-bottom:10px}
.foto[data-par]{will-change:transform}

/* comparsa allo scroll (attivata solo via JS) */
.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv--off{opacity:0;transform:translateY(34px)}
.foto.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),background-position 0s}
.foto[data-par].rv:not(.rv--off){transition:opacity .8s ease}
@media (prefers-reduced-motion:reduce){.rv--off{opacity:1;transform:none}.nastro__track{animation:none}}

/* galleria: griglia rigida allineata alle tessere */
.tessere,.galleria{gap:clamp(1rem,2vw,1.5rem)}
.galleria{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;align-items:stretch}
.galleria .foto{aspect-ratio:1/1;height:auto}
.galleria .foto:first-child{grid-row:1 / span 2;aspect-ratio:auto;height:100%}
.foto img{transition:transform .6s ease}
.foto:hover img{transform:scale(1.04)}
@media (max-width:640px){.galleria{grid-template-columns:1fr 1fr}.galleria .foto:first-child{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3;height:auto}}

/* nav: voce attiva marrone con scritta crema + animazione */
.nav a:not(.btn){
  background:linear-gradient(var(--ink),var(--ink)) no-repeat 50% 100% / 100% 0%;
  border-color:transparent;
  transition:background-size .35s cubic-bezier(.3,1.5,.5,1),color .2s ease,transform .2s ease,border-color .2s ease;
}
.nav a:not(.btn):hover{background-size:100% 100%;color:var(--cream);border-color:var(--ink);transform:translateY(-2px) rotate(-2deg)}
.nav a[aria-current="page"]{
  background-size:100% 100%;background-color:var(--ink);color:var(--cream);border-color:var(--ink);
  box-shadow:3px 3px 0 var(--accent-2);animation:timbra .55s cubic-bezier(.3,1.6,.5,1) both;
}
.nav a[aria-current="page"]:hover{transform:rotate(-2deg)}
@keyframes timbra{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.1) rotate(2deg);opacity:1}100%{transform:none}}

/* ---------- catering (solo grafica) ---------- */
.sez--scura{background:var(--ink);color:#F6E7C2;position:relative}
.sez--scura::before,.sez--scura::after{content:"";position:absolute;left:0;right:0;height:14px;pointer-events:none;background-repeat:repeat-x;background-size:28px 14px}
.sez--scura::before{top:0;background-image:radial-gradient(circle at 14px 0,var(--bg) 12px,transparent 12.5px);animation:scorri 2.4s linear infinite}
.sez--scura::after{bottom:0;background-image:radial-gradient(circle at 14px 14px,var(--bg) 12px,transparent 12.5px);animation:scorri-inv 2.4s linear infinite}
.sez--scura .label{color:var(--accent-2)}
.sez--scura .lead{color:#F6E7C2}
.catering{overflow:hidden;padding-block:clamp(4.5rem,9vw,7rem)}
.catering__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.catering__arte{display:grid;place-items:center}
.catering__badge{width:min(100%,460px);height:auto;overflow:visible}
.catering__raggi{transform-origin:250px 250px;animation:gira 40s linear infinite}
.catering__punti{transform-origin:250px 250px;animation:gira 60s linear infinite reverse}
.catering__badge:hover .catering__raggi{animation-duration:8s}
@keyframes gira{to{transform:rotate(360deg)}}
.catering__titolo{font-size:clamp(3rem,8vw,6rem);color:transparent;-webkit-text-stroke:2px var(--cream);line-height:1;transition:color .3s ease}
.catering__titolo:hover{color:var(--cream)}
.btn--crema{background:var(--cream);color:var(--ink);border-color:var(--cream);box-shadow:4px 4px 0 var(--accent-2)}
.btn--crema:hover{box-shadow:6px 6px 0 var(--accent-2)}
.sez--scura .btn--line{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:4px 4px 0 var(--accent-2)}
@media (max-width:860px){.catering__grid{grid-template-columns:1fr}.catering__badge{width:min(80%,340px)}}
@media (prefers-reduced-motion:reduce){.catering__raggi,.catering__punti{animation:none}}
.tessere{grid-template-columns:repeat(4,minmax(0,1fr))}
.tessere--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.tessere{grid-template-columns:repeat(2,minmax(0,1fr))}.tessere--3{grid-template-columns:1fr}}
.tessera__t{hyphens:auto;overflow-wrap:break-word;min-width:0}
@media (max-width:480px){.tessera{min-height:100px;padding:.9rem}.tessera__t{font-size:1rem}.tessera__go{width:32px;height:32px;font-size:1rem}}
.catering__testo{max-width:34rem}