/* Nou Bacus — proposta Renoveia
   Base verd pàl·lid derivada del rètol (primera base verdosa del registre).
   Contrastos AA: verd text #187A4F/base 4,70:1 (el #1B8456 del rètol es queda
   a 4,13 i per això s'ha enfosquit per a text petit; al rètol de la marquesina
   va com a display gegant sobre groc, 3,8:1 = AA text gran) · tinta/groc 12,67:1
   · groc-text-gran/tinta 12,67:1 · blanc/verd botó 5,34:1 · secundari 5,6:1 */

:root{
  --base:#EDF2EC;
  --blanc:#FFFFFF;
  --tinta:#16211B;
  --secundari:#566259;
  --linia:#D3DED4;
  --verd-retol:#1B8456;   /* nomes display gran (marquesina) */
  --verd:#187A4F;         /* text i botons (AA) */
  --verd-fosc:#146841;
  --groc:#EAE817;         /* nomes blocs de fons amb text fosc */
  --font-tit:'Gabarito',system-ui,sans-serif;
  --font-cos:'Onest',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}

body{
  background:var(--base);
  color:var(--tinta);
  font-family:var(--font-cos);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-tit);font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
a:focus-visible,button:focus-visible{outline:2px solid var(--verd);outline-offset:3px;border-radius:3px}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.center{text-align:center}
section[id]{scroll-margin-top:92px}

/* cinta */
.ribbon{
  background:var(--verd);color:#fff;
  font-size:.8rem;font-weight:600;text-align:center;padding:.45rem .75rem;
}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(237,242,236,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linia);
}
.header-inner{
  max-width:1040px;margin:0 auto;padding:.65rem 24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.wordmark{
  font-family:var(--font-tit);font-weight:700;
  font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verd);text-decoration:none;white-space:nowrap;padding:.5rem 0;
}
.burger{
  display:none;background:none;border:1px solid var(--linia);
  color:var(--tinta);border-radius:8px;min-width:44px;min-height:44px;
  padding:0 12px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;
}
.burger span{width:20px;height:2px;background:var(--tinta)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{
  color:var(--secundari);font-weight:600;font-size:.9rem;
  text-decoration:none;padding:.65rem 0;white-space:nowrap;transition:color .18s;
}
.nav a:hover{color:var(--tinta)}
/* el CTA del nav es <a>: gana .nav a — fijar color y padding (regla QA Leyenda) */
.nav .btn-verd,
.nav .btn-verd:hover{color:#fff}
.nav .btn-verd{padding:.82rem 1.4rem}

/* botons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.2;white-space:nowrap;border-radius:999px;
  padding:.85rem 1.7rem;font-family:var(--font-cos);font-weight:600;font-size:.95rem;
  text-decoration:none;transition:background .18s;
}
.btn-verd{background:var(--verd);color:#fff}
.btn-verd:hover{background:var(--verd-fosc)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* ============ HERO MARQUESINA ============ */
.marquesina{
  background:var(--groc);
  height:200px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:4px solid var(--verd-retol);
}
.marquesina span{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(3rem, 9vw, 6.2rem);
  letter-spacing:.08em;
  color:var(--verd-retol);
  line-height:1;
}
.hero-cos{padding:56px 24px 60px}
.kicker{
  font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--verd);margin-bottom:16px;
}
h1{font-size:clamp(2.3rem, 6vw, 3.6rem);line-height:1.06;margin-bottom:14px;max-width:16ch}
.lead{color:var(--secundari);font-size:1.1rem;max-width:44ch}

/* cinta horària */
.cinta-horaria{
  background:var(--tinta);color:var(--base);
  padding:14px 16px;text-align:center;
}
.cinta-horaria p{
  font-size:.84rem;font-weight:600;letter-spacing:.16em;
}
.cinta-horaria b{color:var(--groc);font-weight:600}

/* seccions */
.section{padding:80px 0}
.blanc{background:var(--blanc)}
h2{font-size:clamp(1.7rem, 4vw, 2.3rem);margin-bottom:14px}
.section-head{max-width:600px;margin-bottom:38px}
.section-head p{color:var(--secundari)}

/* esmorzars */
.esm-grid{display:flex;flex-direction:column;gap:36px}
.esm-text{max-width:520px}
.esm-text p{font-size:1.08rem;color:var(--secundari)}
.esm-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:16px}
.esm-fotos figure,.galeria figure{margin:0;border:1px solid var(--linia);background:var(--blanc)}
.esm-fotos img,.galeria img{width:100%}

/* menú: galeria uniforme, cantonades rectes */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* opinions */
.opinions{background:var(--tinta);color:var(--base);padding:72px 0 76px}
.score-num{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(4.5rem, 14vw, 7rem);line-height:1;color:var(--groc);
}
.score-sub{color:rgba(237,242,236,.85);margin-top:8px}
.cites{margin-top:34px;display:grid;gap:18px;justify-items:center}
.cites p{
  font-family:var(--font-tit);font-weight:600;
  font-size:clamp(1.1rem, 3vw, 1.4rem);max-width:34ch;
}
.cites-peu{color:rgba(237,242,236,.7);font-size:.82rem;margin-top:18px}

/* on som */
.lloc-grid{display:flex;flex-direction:column;gap:32px}
.adreca{font-weight:600;font-size:1.1rem}
.telefon{margin-top:10px}
.telefon a{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(1.9rem, 6vw, 2.6rem);
  color:var(--verd);text-decoration:none;letter-spacing:.02em;
}
.telefon a:hover{color:var(--verd-fosc)}
.horari-targeta{
  background:var(--blanc);border:1px solid var(--linia);border-radius:10px;
  padding:22px 24px;max-width:30rem;
}
.horari-targeta h3{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verd);margin-bottom:12px}
.horari{list-style:none}
.horari li{display:flex;align-items:baseline;gap:.6rem;padding:.34rem 0}
.horari .f{flex:1;border-bottom:1px solid var(--linia);transform:translateY(-4px);min-width:1rem}
.horari li span:last-child{white-space:nowrap;color:var(--secundari)}

/* footer */
footer{
  background:var(--tinta);color:rgba(237,242,236,.9);
  text-align:center;padding:2.1rem 24px 2.4rem;font-size:.9rem;
}
footer a{color:rgba(237,242,236,.9);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}
.credit{margin-top:.4rem}

/* responsive */
@media (max-width:900px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--base);border-bottom:1px solid var(--linia);
    flex-direction:column;align-items:flex-start;padding:16px 24px 20px;gap:2px;
  }
  .nav.open{display:flex}
  .nav a{padding:.7rem 0}
  .burger{display:flex}
}
@media (min-width:840px){
  .esm-grid{flex-direction:row;justify-content:space-between;align-items:center}
  .lloc-grid{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:3rem}
}
@media (max-width:760px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (max-width:640px){
  .marquesina{height:150px;border-bottom-width:3px}
  .wordmark{font-size:.92rem;letter-spacing:.12em}
  .section{padding:58px 0}
  .cinta-horaria p{font-size:.7rem;letter-spacing:.1em}
  .esm-fotos{grid-template-columns:repeat(2,1fr);gap:10px}
}