/* ============================================================
   BCE CARNI — style.css
   Macelleria all'ingrosso — Acerra (NA)
   ============================================================ */

:root{
  --ink:        #17110d;
  --ink-soft:   #2b211b;
  --paper:      #f6efe5;
  --paper-2:    #efe4d3;
  --white:      #fffdf9;
  --wine:       #7e1d24;
  --wine-deep:  #55111a;
  --gold:       #b8863b;
  --gold-soft:  #d8ab5e;
  --sage:       #6f7d5c;
  --line:       rgba(23,17,13,.14);
  --shadow:     0 18px 40px -18px rgba(23,17,13,.35);
  --radius:     14px;
  --serif:      Georgia, "Times New Roman", serif;
  --sans:       "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--wine); text-decoration:none; }
a:hover{ color:var(--wine-deep); }
ul{ list-style:none; }

.wrap{ width:min(1140px, 92%); margin:0 auto; }

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink);
  color:#e9ddcb;
  font-size:.82rem;
  letter-spacing:.02em;
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.45rem 0; flex-wrap:wrap;
}
.topbar a{ color:#e9ddcb; }
.topbar a:hover{ color:var(--gold-soft); }
.topbar .tb-left{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.topbar .tb-right{ display:flex; gap:.5rem; align-items:center; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); display:inline-block; margin-right:.4rem; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(246,239,229,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.8rem 0;
}
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand svg{ width:52px; height:52px; flex:none; }
.brand .name{
  font-family:var(--serif); font-size:1.45rem; font-weight:700;
  letter-spacing:.04em; color:var(--ink); line-height:1.05;
}
.brand .name em{ font-style:normal; color:var(--wine); }
.brand .tag{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-top:.15rem;
}
.nav ul{ display:flex; gap:.2rem; }
.nav ul a{
  display:block; padding:.55rem .85rem; border-radius:9px;
  font-weight:600; font-size:.95rem; color:var(--ink-soft);
}
.nav ul a:hover{ background:var(--paper-2); color:var(--ink); }
.nav ul a.active{ color:var(--wine); background:rgba(126,29,36,.08); }
.nav ul a.active:hover{ background:rgba(126,29,36,.12); }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.35rem; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  background:var(--wine); color:#fff !important;
  box-shadow:0 10px 22px -10px rgba(126,29,36,.7);
  transition:transform .15s ease, background .15s ease;
  border:none; cursor:pointer;
}
.btn:hover{ background:var(--wine-deep); transform:translateY(-2px); }
.btn.ghost{
  background:transparent; color:var(--ink) !important;
  border:2px solid var(--ink); box-shadow:none;
}
.btn.ghost:hover{ background:var(--ink); color:#fff !important; }
.btn.gold{ background:var(--gold); box-shadow:0 10px 22px -10px rgba(184,134,59,.7); }
.btn.gold:hover{ background:#9a6f2c; }
.btn.lg{ padding:.95rem 1.9rem; font-size:1.02rem; }
.btn.sm{ padding:.5rem 1rem; font-size:.85rem; }

.burger{ display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.burger span{ display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(184,134,59,.28), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(126,29,36,.25), transparent 60%),
    linear-gradient(160deg, #1d1510 0%, #17110d 55%, #221419 100%);
  color:var(--paper);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
  padding:4.5rem 0 5rem;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:1.2rem;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--gold); display:inline-block; }
.hero h1{
  font-family:var(--serif); font-size:clamp(2.4rem, 5vw, 3.9rem);
  line-height:1.08; font-weight:700; letter-spacing:.01em;
}
.hero h1 em{ font-style:italic; color:var(--gold-soft); }
.hero .lead{
  margin-top:1.3rem; font-size:1.08rem; color:#d8cbb6; max-width:34rem;
}
.hero .cta-row{ display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap; }
.hero .cta-row .btn{ font-size:1rem; }

.hero-card{
  background:rgba(255,253,249,.05);
  border:1px solid rgba(216,171,94,.35);
  border-radius:var(--radius);
  padding:1.8rem;
  backdrop-filter:blur(4px);
}
.hero-card .hc-title{
  font-family:var(--serif); font-size:1.25rem; color:var(--gold-soft);
  margin-bottom:1.1rem; display:flex; align-items:center; gap:.6rem;
}
.hero-card ul li{
  display:flex; gap:.7rem; padding:.55rem 0;
  border-bottom:1px dashed rgba(216,171,94,.25);
  font-size:.97rem; color:#e6d9c4;
}
.hero-card ul li:last-child{ border-bottom:none; }
.hero-card ul li svg{ width:20px; height:20px; flex:none; margin-top:.15rem; }

.hero-stats{
  position:relative; z-index:2;
  border-top:1px solid rgba(216,171,94,.25);
}
.hero-stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  padding:1.6rem 0;
}
.stat{ text-align:center; }
.stat .num{
  font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--gold-soft);
  line-height:1.1;
}
.stat .lbl{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#cbbda4; margin-top:.3rem; }

/* ---------- sections ---------- */
section.block{ padding:4.5rem 0; }
section.block.alt{ background:var(--paper-2); }
section.block.dark{
  background:linear-gradient(160deg, #1d1510, #221419);
  color:var(--paper);
}
.sec-head{ max-width:46rem; margin-bottom:2.8rem; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{
  font-family:var(--serif); font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  line-height:1.15; margin-top:.7rem;
}
section.dark .sec-head h2{ color:var(--paper); }
.sec-head p{ margin-top:.8rem; color:var(--ink-soft); }
section.dark .sec-head p{ color:#cbbda4; }

/* ---------- cards generiche ---------- */
.grid{ display:grid; gap:1.4rem; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card .ico{
  width:52px; height:52px; border-radius:12px;
  background:rgba(126,29,36,.1); color:var(--wine);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.card .ico svg{ width:28px; height:28px; }
.card h3{ font-family:var(--serif); font-size:1.25rem; margin-bottom:.5rem; }
.card p{ font-size:.95rem; color:var(--ink-soft); }
section.dark .card{
  background:rgba(255,253,249,.04);
  border-color:rgba(216,171,94,.3);
  color:var(--paper);
}
section.dark .card p{ color:#cbbda4; }
section.dark .card .ico{ background:rgba(216,171,94,.14); color:var(--gold-soft); }

/* ---------- assortimento ---------- */
.prod{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.prod:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.prod .ph{
  height:150px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.prod .ph svg{ width:86px; height:86px; }
.prod .pb{ padding:1.2rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.prod .cat{
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.4rem;
}
.prod h3{ font-family:var(--serif); font-size:1.18rem; margin-bottom:.45rem; }
.prod p{ font-size:.9rem; color:var(--ink-soft); flex:1; }
.ph.beef   { background:linear-gradient(135deg,#8a2430,#5e1620); }
.ph.lamb   { background:linear-gradient(135deg,#a04a3c,#6b2a22); }
.ph.pork   { background:linear-gradient(135deg,#c07a5a,#8a4a34); }
.ph.poultry{ background:linear-gradient(135deg,#c9a35c,#9a7236); }
.ph.butch  { background:linear-gradient(135deg,#4c4437,#2c261d); }
.ph.salumi { background:linear-gradient(135deg,#7e1d24,#451015); }

/* ---------- salumi spotlight ---------- */
.salumi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.salume{
  display:flex; gap:1rem; align-items:flex-start;
  background:rgba(255,253,249,.05);
  border:1px solid rgba(216,171,94,.28);
  border-radius:var(--radius);
  padding:1.3rem 1.4rem;
}
.salume svg{ width:44px; height:44px; flex:none; color:var(--gold-soft); }
.salume h4{ font-family:var(--serif); font-size:1.08rem; color:var(--paper); }
.salume p{ font-size:.88rem; color:#cbbda4; margin-top:.25rem; }

/* ---------- servizi list ---------- */
.svc{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
}
.svc:last-child{ border-bottom:none; }
.svc .n{
  font-family:var(--serif); font-size:1.5rem; font-weight:700;
  color:var(--gold); line-height:1.2; min-width:2.4rem;
}
.svc h3{ font-size:1.12rem; margin-bottom:.25rem; }
.svc p{ font-size:.95rem; color:var(--ink-soft); }

/* ---------- cta band ---------- */
.cta-band{
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(184,134,59,.3), transparent 60%),
    linear-gradient(150deg, var(--wine) 0%, var(--wine-deep) 100%);
  color:#fff; border-radius:calc(var(--radius) + 6px);
  padding:3rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.cta-band h2{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.15; max-width:34rem; }
.cta-band p{ margin-top:.6rem; color:#f0d9c2; max-width:34rem; }

/* ---------- contatti ---------- */
.cont-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:start; }
.cont-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem;
}
.cont-item{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px dashed var(--line); }
.cont-item:last-child{ border-bottom:none; }
.cont-item .ico{
  width:46px; height:46px; flex:none; border-radius:11px;
  background:rgba(126,29,36,.1); color:var(--wine);
  display:flex; align-items:center; justify-content:center;
}
.cont-item .ico svg{ width:24px; height:24px; }
.cont-item .k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.cont-item .v{ font-size:1.05rem; font-weight:600; margin-top:.15rem; }
.cont-item .v a{ color:var(--ink); }
.cont-item .v a:hover{ color:var(--wine); }

form.quote{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem;
}
form.quote h3{ font-family:var(--serif); font-size:1.4rem; margin-bottom:.4rem; }
form.quote .hint{ font-size:.9rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f-field{ margin-bottom:1rem; }
.f-field label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem; color:var(--ink-soft); }
.f-field input, .f-field select, .f-field textarea{
  width:100%; padding:.8rem .95rem;
  border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font-family:inherit; font-size:.98rem; color:var(--ink);
}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  outline:2px solid rgba(126,29,36,.35); border-color:var(--wine);
}
.f-field textarea{ min-height:120px; resize:vertical; }
.f-status{ margin-top:.9rem; font-weight:600; font-size:.95rem; min-height:1.4em; }
.f-status.ok{ color:#3c6e3c; }
.f-status.err{ color:var(--wine); }

/* ---------- orari ---------- */
.hours{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.2rem; }
.h-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--paper-2); border-radius:10px; padding:.85rem 1.1rem;
  border:1px solid var(--line);
}
.h-row .d{ font-weight:700; }
.h-row .h{ font-weight:600; color:var(--wine); }
.h-row.closed .h{ color:#8a7a66; }

/* ---------- footer ---------- */
footer.site{
  background:var(--ink); color:#cbbda4;
  padding:3.2rem 0 1.6rem; margin-top:0;
}
.f-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12); }
.f-grid h4{
  font-family:var(--serif); color:var(--paper); font-size:1.05rem;
  margin-bottom:.9rem; letter-spacing:.02em;
}
.f-grid p, .f-grid li{ font-size:.92rem; }
.f-grid li{ margin-bottom:.55rem; }
.f-grid a{ color:#cbbda4; }
.f-grid a:hover{ color:var(--gold-soft); }
.f-brand .name{ font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--paper); }
.f-brand .name em{ font-style:normal; color:var(--gold-soft); }
.f-brand p{ margin-top:.6rem; max-width:20rem; }
.f-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.4rem; font-size:.82rem; color:#9c8c76;
}

/* ---------- page hero (pagine interne) ---------- */
.page-hero{
  background:
    radial-gradient(800px 320px at 90% -20%, rgba(184,134,59,.3), transparent 60%),
    linear-gradient(160deg, #1d1510, #221419);
  color:var(--paper);
  padding:3.6rem 0 3rem;
}
.page-hero .crumb{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1rem; }
.page-hero .crumb a{ color:var(--gold-soft); }
.page-hero h1{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); line-height:1.1; }
.page-hero p{ margin-top:.8rem; max-width:44rem; color:#cbbda4; }

/* ---------- table prodotti dettaglio ---------- */
.tbl{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.tbl th{
  text-align:left; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--gold-soft); padding:.9rem 1.1rem;
}
.tbl td{ padding:.95rem 1.1rem; border-bottom:1px solid var(--line); font-size:.96rem; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr:hover td{ background:var(--paper-2); }
.tbl .ok{ color:#3c6e3c; font-weight:700; }

/* ---------- faq ---------- */
.faq details{
  background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:.8rem;
}
.faq summary{
  cursor:pointer; font-weight:700; font-size:1.02rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--wine); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top:.8rem; font-size:.95rem; color:var(--ink-soft); }

/* ---------- reveal anim ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .hero .wrap{ grid-template-columns:1fr; padding:3.5rem 0 3.8rem; }
  .hero-stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .grid.c3, .grid.c4{ grid-template-columns:repeat(2,1fr); }
  .salumi-row{ grid-template-columns:1fr; }
  .cont-grid{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 720px){
  .nav ul{
    position:fixed; inset:64px 0 auto 0;
    background:var(--paper); flex-direction:column; gap:0;
    padding:1rem 5%;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateY(-130%); transition:transform .25s ease;
  }
  .nav ul.open{ transform:none; }
  .nav ul a{ padding:.9rem .6rem; }
  .burger{ display:block; }
  .nav .btn.desk{ display:none; }
  .grid.c2, .grid.c3, .grid.c4{ grid-template-columns:1fr; }
  .hours{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr; }
  .topbar .tb-left{ gap:.8rem; }
}