/* Taverna de l'Ateneu — proposta Renoveia
   Demo tipogràfica i ceràmica (sense fotografia: el seu IG només té cartel·les de menú).
   Contrastos AA: cobalt/ceràmic 8,28:1 · tinta 16,0:1 · secundari 5,8:1 · ceràmic/cobalt 8,28:1 */

:root{
  --ceramic:#FCFBF8;
  --blanc:#FFFFFF;
  --tinta:#1A1F26;
  --secundari:#5A6470;
  --linia:#DDE3E9;
  --cobalt:#1B4B8F;
  --cobalt-fosc:#143A6F;
  --font-tit:'Vollkorn',Georgia,serif;
  --font-cos:'Cabin',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(--ceramic);
  color:var(--tinta);
  font-family:var(--font-cos);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-tit);font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--cobalt)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt);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:96px}

/* ============ CENEFA DE RAJOLA CATALANA (CSS pur) ============
   Cada rajola de 46×46 porta el motiu (rombe central + quarts de cercle a les
   cantonades); una capa alternadora de 92px en blanqueja una de cada dues. */
.cenefa{
  height:46px;
  background-color:var(--blanc);
  border-top:1px solid var(--linia);
  border-bottom:1px solid var(--linia);
  background-image:
    linear-gradient(90deg, transparent 0 46px, var(--blanc) 46px),          /* alternador */
    radial-gradient(circle at 0 0,      var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 0,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 0 46px,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 46px,var(--cobalt) 13px, transparent 13.5px),
    linear-gradient(135deg, var(--blanc) 19px, transparent 19.5px),          /* triangles blancs */
    linear-gradient(225deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(315deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(45deg,  var(--blanc) 19px, transparent 19.5px),
    linear-gradient(var(--cobalt), var(--cobalt));                           /* base cobalt */
  background-size:92px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px,
                  46px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px;
  background-repeat:repeat-x;
}
.cenefa-fina{transform-origin:top;transform:scaleY(.5);margin-bottom:-23px}

/* ============ CINTA I HEADER ============ */
.ribbon{
  background:var(--cobalt);color:var(--ceramic);
  font-size:.8rem;font-weight:600;text-align:center;padding:.45rem .75rem;
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(252,251,248,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.header-inner{
  max-width:1040px;margin:0 auto;padding:.7rem 24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.wordmark{
  font-family:var(--font-tit);font-weight:700;
  font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);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 un <a>: gana .nav a — fijar color y padding (regla QA Leyenda) */
.nav .btn-cobalt,
.nav .btn-cobalt:hover{color:var(--ceramic)}
.nav .btn-cobalt{padding:.82rem 1.4rem}   /* ≥44px */

/* ============ BOTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.2;white-space:nowrap;
  border-radius:999px;padding:.85rem 1.6rem;
  font-family:var(--font-cos);font-weight:600;font-size:.95rem;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;
}
.btn-cobalt{background:var(--cobalt);color:var(--ceramic)}
.btn-cobalt:hover{background:var(--cobalt-fosc)}
.btn-ghost{border:1px solid var(--cobalt);color:var(--cobalt)}
.btn-ghost:hover{background:rgba(27,75,143,.08)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}

/* ============ HERO: PANELL CERÀMIC ============ */
.hero{padding:64px 24px 72px}
.marc{
  position:relative;max-width:880px;margin:0 auto;
  padding:46px;
  background:var(--blanc);
  box-shadow:0 18px 50px rgba(26,31,38,.08);
}
.cf{position:absolute;background-color:var(--blanc)}
.cf-top,.cf-bottom{
  left:0;right:0;height:46px;
  background-image:
    linear-gradient(90deg, transparent 0 46px, var(--blanc) 46px),
    radial-gradient(circle at 0 0,      var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 0,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 0 46px,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 46px,var(--cobalt) 13px, transparent 13.5px),
    linear-gradient(135deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(225deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(315deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(45deg,  var(--blanc) 19px, transparent 19.5px),
    linear-gradient(var(--cobalt), var(--cobalt));
  background-size:92px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px,
                  46px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px;
  background-repeat:repeat-x;
}
.cf-top{top:0}
.cf-bottom{bottom:0}
.cf-left,.cf-right{
  top:46px;bottom:46px;width:46px;
  background-image:
    linear-gradient(180deg, transparent 0 46px, var(--blanc) 46px),
    radial-gradient(circle at 0 0,      var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 0,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 0 46px,   var(--cobalt) 13px, transparent 13.5px),
    radial-gradient(circle at 46px 46px,var(--cobalt) 13px, transparent 13.5px),
    linear-gradient(135deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(225deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(315deg, var(--blanc) 19px, transparent 19.5px),
    linear-gradient(45deg,  var(--blanc) 19px, transparent 19.5px),
    linear-gradient(var(--cobalt), var(--cobalt));
  background-size:46px 92px, 46px 46px, 46px 46px, 46px 46px, 46px 46px,
                  46px 46px, 46px 46px, 46px 46px, 46px 46px, 46px 46px;
  background-repeat:repeat-y;
  background-position:0 46px;   /* desfase: junto al motiu de la cantonada va rajola blanca */
}
.cf-left{left:0}
.cf-right{right:0}

.panell{
  background:var(--blanc);
  text-align:center;
  padding:58px 34px 62px;
}
.kicker{
  font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:20px;
}
h1{
  font-size:clamp(2.1rem, 5.4vw, 3.4rem);
  line-height:1.12;letter-spacing:.005em;
  max-width:18ch;margin:0 auto;
}
.lema{
  font-family:var(--font-tit);font-weight:600;
  font-size:clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);margin-top:20px;
}

/* ============ SECCIONS ============ */
.section{padding:84px 0}
.blanc{background:var(--blanc)}
h2{font-size:clamp(1.7rem, 4vw, 2.3rem);margin-bottom:16px}
.section-head{max-width:600px;margin-bottom:40px}
.nota{color:var(--secundari);font-size:.92rem;margin-top:10px}

/* la casa */
.casa-grid{display:flex;flex-direction:column;gap:40px;align-items:center}
.casa-text{max-width:520px}
.casa-text p{font-size:1.08rem}
.panell-decoratiu{
  display:grid;grid-template-columns:repeat(3,64px);grid-auto-rows:64px;
  border:1px solid var(--linia);
  box-shadow:0 12px 34px rgba(26,31,38,.07);
}
.panell-decoratiu i{display:block;background:var(--blanc)}
.panell-decoratiu i.m{
  background-image:
    radial-gradient(circle at 0 0,      var(--cobalt) 18px, transparent 18.5px),
    radial-gradient(circle at 64px 0,   var(--cobalt) 18px, transparent 18.5px),
    radial-gradient(circle at 0 64px,   var(--cobalt) 18px, transparent 18.5px),
    radial-gradient(circle at 64px 64px,var(--cobalt) 18px, transparent 18.5px),
    linear-gradient(135deg, var(--blanc) 26px, transparent 26.5px),
    linear-gradient(225deg, var(--blanc) 26px, transparent 26.5px),
    linear-gradient(315deg, var(--blanc) 26px, transparent 26.5px),
    linear-gradient(45deg,  var(--blanc) 26px, transparent 26.5px),
    linear-gradient(var(--cobalt), var(--cobalt));
}

/* la carta: graella de rajoles */
.rajoles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
}
.rajola{
  aspect-ratio:1;
  background:var(--blanc);
  border:1.5px solid var(--cobalt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:18px;text-align:center;
  position:relative;
}
.rajola::before{
  content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:1px solid var(--linia);pointer-events:none;
}
.rajola h3{
  font-size:1.18rem;font-weight:700;line-height:1.25;max-width:14ch;
}
.rajola .preu{
  font-family:var(--font-cos);font-weight:600;font-size:1.05rem;
  color:var(--cobalt);letter-spacing:.04em;
}
.carta-nota{color:var(--secundari);font-size:.92rem;margin-top:22px}

/* opinions */
.opinions{background:var(--cobalt);color:var(--ceramic)}
.opinions-cos{padding:64px 24px 68px}
.score-num{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(4.5rem, 14vw, 7rem);line-height:1;
}
.score-sub{color:rgba(252,251,248,.85);margin-top:8px}

/* on som */
.lloc-grid{display:flex;flex-direction:column;gap:34px}
.adreca{font-weight:600;font-size:1.1rem}
.telefon{margin:10px 0 8px}
.telefon a{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(1.8rem, 5.5vw, 2.4rem);
  color:var(--tinta);text-decoration:none;letter-spacing:.02em;
}
.telefon a:hover{color:var(--cobalt)}
.contacte-linia{margin-top:6px}
.contacte-linia a{
  color:var(--cobalt);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;display:inline-block;padding:.35rem 0;
}
.horari{list-style:none;max-width:30rem}
.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(--cobalt);color:rgba(252,251,248,.9);
  text-align:center;padding:2.1rem 24px 2.4rem;font-size:.9rem;
}
footer a{color:rgba(252,251,248,.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(--ceramic);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){
  .casa-grid{flex-direction:row;justify-content:space-between}
  .lloc-grid{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:3rem}
}
@media (max-width:640px){
  .wordmark{font-size:.86rem;letter-spacing:.1em}
  .hero{padding:40px 14px 52px}
  .marc{padding:34px}
  .cf-top,.cf-bottom{height:34px;background-size:68px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px;
    background-image:
      linear-gradient(90deg, transparent 0 34px, var(--blanc) 34px),
      radial-gradient(circle at 0 0,      var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 34px 0,   var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 0 34px,   var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 34px 34px,var(--cobalt) 10px, transparent 10.5px),
      linear-gradient(135deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(225deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(315deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(45deg,  var(--blanc) 14px, transparent 14.5px),
      linear-gradient(var(--cobalt), var(--cobalt))}
  .cf-left,.cf-right{top:34px;bottom:34px;width:34px;
    background-position:0 34px;
    background-size:34px 68px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px, 34px 34px;
    background-image:
      linear-gradient(180deg, transparent 0 34px, var(--blanc) 34px),
      radial-gradient(circle at 0 0,      var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 34px 0,   var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 0 34px,   var(--cobalt) 10px, transparent 10.5px),
      radial-gradient(circle at 34px 34px,var(--cobalt) 10px, transparent 10.5px),
      linear-gradient(135deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(225deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(315deg, var(--blanc) 14px, transparent 14.5px),
      linear-gradient(45deg,  var(--blanc) 14px, transparent 14.5px),
      linear-gradient(var(--cobalt), var(--cobalt))}
  .panell{padding:40px 20px 46px}
  .section{padding:60px 0}
  .rajoles{grid-template-columns:repeat(2,1fr);gap:10px}
  .rajola h3{font-size:.98rem}
  .rajola .preu{font-size:.92rem}
  .panell-decoratiu{grid-template-columns:repeat(3,56px);grid-auto-rows:56px}
  .panell-decoratiu i.m{
    background-image:
      radial-gradient(circle at 0 0,      var(--cobalt) 16px, transparent 16.5px),
      radial-gradient(circle at 56px 0,   var(--cobalt) 16px, transparent 16.5px),
      radial-gradient(circle at 0 56px,   var(--cobalt) 16px, transparent 16.5px),
      radial-gradient(circle at 56px 56px,var(--cobalt) 16px, transparent 16.5px),
      linear-gradient(135deg, var(--blanc) 22px, transparent 22.5px),
      linear-gradient(225deg, var(--blanc) 22px, transparent 22.5px),
      linear-gradient(315deg, var(--blanc) 22px, transparent 22.5px),
      linear-gradient(45deg,  var(--blanc) 22px, transparent 22.5px),
      linear-gradient(var(--cobalt), var(--cobalt))}
}