:root{
    --vermell:#c03927;
    --vermell-fosc:#781614;
    --negre:#000000;
    --gris:#3a3a3a;
    --gris-clar:#eaeaea;
    --blanc:#ffffff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Oswald',sans-serif;color:var(--gris);background:var(--blanc);line-height:1.7;font-weight:400;font-size:1.05rem}
  img{max-width:100%;display:block}
  a{color:var(--vermell);text-decoration:none}
  h1,h2,h3{color:var(--vermell);text-transform:uppercase;line-height:1.2;font-weight:600}
  strong{font-weight:500;color:var(--negre)}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
  section{padding:60px 0}
  h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:20px;text-align:center}

  /* HEADER */
  nav{position:sticky;top:0;z-index:50;background:var(--blanc);box-shadow:0 1px 6px rgba(0,0,0,.08)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1200px;margin:0 auto}
  .nav-logo img{height:58px;width:auto}
  .nav-links{display:flex;gap:24px;align-items:center;font-weight:400;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
  .nav-links a{color:var(--negre)}
  .nav-links a:hover{color:var(--vermell)}
  .nav-tel{color:var(--vermell)!important;font-weight:600}
  .burger{display:none;background:none;border:none;font-size:1.8rem;color:var(--negre);cursor:pointer}

  /* HERO amb botons */
  header.hero{position:relative;background:url('/assets/web/cabecera.jpg') center/cover no-repeat;padding:76px 24px}
  header.hero::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.5)}
  .hero-botons{position:relative;max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:30px 40px}
  .boto-margui{flex:0 1 300px;display:flex;align-items:center;justify-content:center;border:3px dashed var(--vermell);padding:22px 10px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;text-transform:uppercase;color:var(--vermell);letter-spacing:.02em;text-align:center;transition:background .15s ease,transform .15s ease}
  .boto-margui:hover{background:rgba(255,255,255,.55);transform:scale(1.03)}

  /* FRANJA INFO */
  .franja{background:var(--vermell);color:var(--blanc);text-align:center;padding:12px 18px;font-size:1.02rem;font-weight:400;letter-spacing:.02em}
  .franja a{color:var(--blanc);font-weight:600}
  .franja .sep{opacity:.6;margin:0 10px}

  /* INTRO */
  .intro{text-align:center}
  .intro h1{font-size:clamp(1.7rem,3.8vw,2.4rem);margin-bottom:22px}
  .intro p{max-width:820px;margin:0 auto}

  /* GALERIA estil feed */
  .feed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .feed-grid img{aspect-ratio:1/1;object-fit:cover}
  .feed-lema{display:flex;align-items:center;justify-content:flex-start;aspect-ratio:1/1;padding:8%;background:var(--blanc)}
  .feed-lema div{font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:400;line-height:1.35;color:var(--vermell)}
  .feed-lema em{font-style:italic;font-weight:700}
  .feed-lema span{color:var(--gris)}
  .feed-seguiu{text-align:center;margin-top:22px;font-size:1.05rem;text-transform:uppercase}
  .feed-seguiu a{font-weight:600}

  /* MENU DEL DIA */
  .menu-dia{background:var(--vermell);color:var(--blanc);text-align:center}
  .menu-dia h2{color:var(--blanc)}
  .menu-dia .preu{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;margin:6px 0 4px}
  .menu-dia .inclou{font-size:1.05rem;margin-bottom:30px}
  .boto-avui{display:block;max-width:560px;margin:0 auto 26px;background:var(--blanc);color:var(--vermell);border:3px dashed var(--blanc);padding:20px 16px;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;text-transform:uppercase;transition:transform .15s ease}
  .boto-avui:hover{transform:scale(1.03)}
  .boto-avui span{display:block;font-size:.85rem;font-weight:400;letter-spacing:.08em;margin-top:2px}
  .menu-dia-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:640px;margin:0 auto}
  .boto-blanc{display:block;border:3px dashed var(--blanc);padding:18px 12px;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:700;text-transform:uppercase;color:var(--blanc);transition:background .15s ease}
  .boto-blanc:hover{background:rgba(255,255,255,.15)}
  .boto-blanc-petit{display:block;border:2px dashed rgba(255,255,255,.6);padding:10px 12px;font-size:.95rem;font-weight:500;text-transform:uppercase;color:var(--blanc);opacity:.9;transition:background .15s ease}
  .boto-blanc-petit:hover{background:rgba(255,255,255,.15)}
  .nota-menu{margin-top:24px;font-size:.95rem;opacity:.9;max-width:640px;margin-left:auto;margin-right:auto}

  /* CARTA */
  .carta{text-align:center}
  .carta-botons{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:10px}
  .boto-petit{display:inline-block;border:3px dashed var(--vermell);padding:14px 38px;font-size:1.2rem;font-weight:700;text-transform:uppercase;color:var(--vermell);transition:background .15s ease}
  .boto-petit:hover{background:#fdf2f0}

  /* GRUPS */
  .grups{background:#f9f7f5}
  .grups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto}
  .grup-card img{border:1px solid var(--gris-clar);background:var(--blanc)}
  .grup-card figcaption{text-align:center;padding:12px 6px;font-weight:600;text-transform:uppercase;color:var(--vermell);font-size:1.05rem}

  /* VERMUTS */
  .vermuts{text-align:center}
  .vermuts img{max-width:640px;margin:0 auto;border:1px solid var(--gris-clar)}

  /* KARAOKE */
  .karaoke{background:var(--vermell-fosc);color:var(--blanc)}
  .karaoke h2{color:var(--blanc);text-align:left}
  .karaoke-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  .karaoke p{margin-bottom:14px}
  .karaoke-ig{position:relative;display:block;max-width:400px;margin:0 auto;overflow:hidden}
  .karaoke-ig img{aspect-ratio:4/5;object-fit:cover;transition:transform .2s ease}
  .karaoke-ig:hover img{transform:scale(1.04)}
  .karaoke-ig-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;text-align:center}
  .karaoke-ig-overlay .etiqueta{color:#fff;font-size:1.05rem;font-weight:400;line-height:1.4}
  .karaoke-ig-overlay .handle{color:#fff;font-size:1.6rem;font-weight:700;margin-top:6px;text-transform:lowercase}
  .banner-karaoke{display:none;background:var(--vermell-fosc);color:var(--blanc);text-align:center;padding:14px 18px;font-size:1.1rem;font-weight:500;letter-spacing:.02em}
  .banner-karaoke strong{font-weight:700;text-decoration:underline;color:var(--blanc)}
  .banner-karaoke.visible{display:block}
  .karaoke .boto-blanc{display:inline-block;margin-top:10px}
  .karaoke-condicions{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .condicio{border:2px dashed rgba(255,255,255,.55);padding:16px 18px;font-size:.95rem}
  .condicio strong{display:block;color:var(--blanc);text-transform:uppercase;font-weight:600;margin-bottom:4px}

  /* HISTORIA */
  .historia-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:10px}
  .historia h2{text-align:left}
  .historia p{margin-bottom:14px}
  .historia .recepta{color:var(--vermell);font-weight:600;text-transform:uppercase;font-size:1.15rem;margin-top:8px}

  /* RESSENYES */
  .ressenyes{background:#f9f7f5}
  .ressenyes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto}
  .ressenya{background:var(--blanc);border:1px solid var(--gris-clar);padding:24px}
  .estrelles{color:#e8a33d;letter-spacing:2px;margin-bottom:8px}
  .ressenya .qui{font-weight:600;color:var(--negre);margin-top:12px;text-transform:uppercase;font-size:.9rem}

  /* CONTACTE — editorial minimal */
  .contacte{padding:120px 0}
  .contacte-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:stretch}
  .c-kicker{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--vermell);font-weight:500;margin-bottom:64px}
  .c-bloc{margin-bottom:56px}
  .c-titol{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:#a49d97;font-weight:500;margin-bottom:18px}
  .horari-llista div{display:flex;justify-content:space-between;max-width:300px;padding:3px 0;font-weight:300;color:var(--gris)}
  .horari-llista span:last-child{font-weight:400;color:var(--negre)}
  .c-text{font-weight:300;color:var(--gris);line-height:1.75;max-width:420px}
  .c-text + .c-text{margin-top:14px}
  .c-secundari{font-size:.95rem;color:#8b847e}
  .c-enllac{color:var(--negre);font-weight:500;border-bottom:1px solid #d8d2cc;padding-bottom:1px;transition:color .15s ease,border-color .15s ease}
  .c-enllac:hover{color:var(--vermell);border-bottom-color:var(--vermell)}
  .c-xarxes{display:flex;gap:14px;align-items:center;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
  .c-xarxes a{color:var(--negre);font-weight:400;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s ease}
  .c-xarxes a:hover{color:var(--vermell)}
  .c-xarxes .punt{color:#c8c2bc}
  .mapa{min-height:600px}
  .mapa iframe{width:100%;height:100%;min-height:600px;border:0;border-radius:14px}
  /* FOOTER */
  .footer-main{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 24px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
  .footer-reserva{background:var(--vermell);color:var(--blanc);padding:18px 34px;font-weight:600;text-transform:uppercase;font-size:1.15rem}
  .footer-icons{display:flex;gap:22px;align-items:center;font-size:1.05rem;text-transform:uppercase}
  .footer-icons a{color:var(--negre);font-weight:500}
  .footer-eu{display:flex;gap:18px;align-items:center}
  .footer-eu img{height:34px;width:auto}
  .footer-copy{background:var(--vermell);color:var(--blanc);text-align:center;padding:16px 24px;font-size:.95rem}

  /* BARRA FIXA MOBIL */
  .barra-mobil{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;grid-template-columns:1fr;box-shadow:0 -2px 10px rgba(0,0,0,.15)}
  .barra-mobil a{padding:15px 10px;text-align:center;font-weight:600;text-transform:uppercase;font-size:1.05rem}
  .barra-mobil .truca{background:var(--vermell);color:var(--blanc)}
  .barra-mobil .whats{background:#1fa855;color:var(--blanc)}

  @media(max-width:860px){
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--blanc);flex-direction:column;padding:20px;box-shadow:0 8px 16px rgba(0,0,0,.08)}
    .nav-links.open{display:flex}
    .burger{display:block}
    .boto-margui{flex:1 1 42%}
    .menu-dia-grid,.karaoke-grid,.historia-grid,.contacte-grid,.ressenyes-grid{grid-template-columns:1fr}
    .grups-grid{grid-template-columns:1fr}
    .karaoke-condicions{grid-template-columns:1fr 1fr}
    .feed-grid{grid-template-columns:repeat(2,1fr)}
    section{padding:44px 0}
    .contacte{padding:80px 0}
    .contacte-grid{gap:64px}
    .c-kicker{margin-bottom:48px}
    .c-bloc{margin-bottom:48px}
    .mapa{min-height:360px}
    .mapa iframe{min-height:360px}
    .footer-main{justify-content:center;text-align:center}
    .barra-mobil{display:grid}
    body{padding-bottom:56px}
  }