/*
Theme Name: BFA 2026
Description: Tema de Black Friday Andorra 2026 — portada, directori de comerços filtrable per marca i espais publicitaris. Fet a partir del llenç de Claude Design del 26/07/2026.
Author: Kest
Version: 1.1.1
Text Domain: bfa2026
*/

/* ---- Paleta: el mateix bloc que al llenç. Canviar només això reviste la web ---- */
:root{
  --font-heading:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --color-bg:#0b0b0c;
  --color-text:#f4f3f1;
  --color-divider:rgba(244,243,241,.14);
  --color-accent:oklch(.72 .19 45);
  --color-accent-100:oklch(.95 .04 45);
  --color-accent-400:oklch(.80 .14 45);
  --color-accent-700:oklch(.63 .18 45);
  --color-neutral-200:rgba(244,243,241,.10);
  --color-neutral-300:rgba(244,243,241,.22);
  --shadow-md:0 18px 48px rgba(0,0,0,.55);
  --max:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-700)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:900;line-height:1.02;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.muted{color:rgba(244,243,241,.62)}
.sec{padding:64px 0;border-top:1px solid var(--color-divider)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}

/* ---- Marquesina i capçalera ---- */
.marquee{max-width:100%;background:var(--color-text);color:var(--color-bg);overflow:hidden;white-space:nowrap;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.marquee span{display:inline-block;padding:7px 0;animation:bfaMarquee 38s linear infinite}
@keyframes bfaMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-head{position:sticky;top:0;z-index:40;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-divider)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:14px 24px;max-width:var(--max);margin:0 auto}
.logo{font-family:var(--font-heading);font-weight:900;font-size:1.05rem;line-height:.95;letter-spacing:-.02em;color:var(--color-text)}
.logo em{font-style:normal;color:var(--color-accent)}
.nav{display:flex;gap:20px;flex:1;flex-wrap:wrap}
.nav a{color:var(--color-text);font-size:.92rem;font-weight:600}
.nav a:hover,.nav a[aria-current]{color:var(--color-accent)}
.langs{display:flex;border:1px solid var(--color-divider)}
.langs a{padding:4px 9px;font-size:.72rem;font-weight:800;color:var(--color-text);text-transform:uppercase}
.langs a.on{background:var(--color-text);color:var(--color-bg)}
button.btn,input.btn{background:transparent;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.btn{display:inline-block;padding:11px 18px;font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--color-text);color:var(--color-text)}
.btn:hover{background:var(--color-text);color:var(--color-bg)}
.btn-acc{background:var(--color-accent);border-color:var(--color-accent);color:#140803}
.btn-acc:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#140803}

/* ---- Hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--color-divider)}
.hero>div{padding:56px 40px;min-width:0}
.hero-r{border-left:1px solid var(--color-divider)}
.hero p.lede{font-size:1.06rem;max-width:34ch;color:rgba(244,243,241,.72)}
.count{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--color-divider)}
.count div{padding:16px 10px;text-align:center;border-right:1px solid var(--color-divider)}
.count div:last-child{border-right:0}
.count b{display:block;font-family:var(--font-heading);font-size:2.1rem;font-weight:900;line-height:1}
.count small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,241,.55)}
.searchbar{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 10px;max-width:520px}
.searchbar input{flex:1 1 150px;min-width:0;padding:12px 14px;background:transparent;border:1px solid var(--color-divider);color:var(--color-text);font-family:inherit;font-size:.95rem}
.searchbar .btn{white-space:nowrap;color:var(--color-text);border-left:0}
@media (max-width:620px){.searchbar .btn{flex:1 1 100%;border-left:1px solid var(--color-text);margin-top:8px}}
.stats{border:1px solid var(--color-divider);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.stats b{display:block;font-family:var(--font-heading);font-size:1.7rem;font-weight:900;color:var(--color-accent);line-height:1}
.stats small{font-size:.74rem;color:rgba(244,243,241,.62)}

/* ---- Espais publicitaris ---- */
.slot{border:1px solid var(--color-divider);position:relative}
.slot-empty{display:grid;place-items:center;text-align:center;padding:40px 24px;background:
  repeating-linear-gradient(135deg,rgba(244,243,241,.03) 0 12px,transparent 12px 24px)}
.slot-empty h3{font-family:var(--font-heading);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:900;margin:.2em 0}
.slot-tag{position:absolute;top:0;left:0;background:var(--color-accent);color:#140803;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px}
.slot-side{min-height:250px}

/* ---- Graella de fitxes ---- */
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid var(--color-divider);display:flex;flex-direction:column;background:rgba(244,243,241,.02)}
.card:hover{border-color:var(--color-neutral-300)}
.card .ph{aspect-ratio:4/3;background:rgba(244,243,241,.05);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .kicker{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,241,.55)}
.card h3{margin:0;color:var(--color-text)}
.card .disc{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;color:var(--color-accent);line-height:1}
.card .of{font-size:.86rem;color:rgba(244,243,241,.7)}
.card .cta{margin-top:auto;padding:9px;text-align:center;border:1px solid var(--color-divider);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.card .cta:hover{background:var(--color-text);color:var(--color-bg)}
.tier{position:absolute;top:8px;right:8px;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px}
.tier-top{background:var(--color-accent);color:#140803}
.tier-featured{background:var(--color-text);color:var(--color-bg)}
.cardw{position:relative}
.caducada{opacity:.5}

/* ---- Filtre del directori ---- */
.dir{display:grid;grid-template-columns:270px minmax(0,1fr);gap:34px;align-items:start}
.dir>*{min-width:0}
/* Contingut a l'esquerra i columna lateral a la dreta: blog, fitxa i pàgines.
   Abans feien servir .dir i el contingut queia dins dels 270 px dels filtres: es solapava tot. */
.dir-r{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.dir-r>*{min-width:0}
.dir-r aside{border-left:1px solid var(--color-divider);padding-left:26px}
.facets{border:1px solid var(--color-divider);padding:18px;position:sticky;top:80px}
.facet+.facet{margin-top:22px;padding-top:18px;border-top:1px solid var(--color-divider)}
.facet h4{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin:0 0 10px}
.facet label{display:flex;align-items:center;gap:8px;font-size:.9rem;padding:3px 0;cursor:pointer}
.facet label span.c{margin-left:auto;font-size:.72rem;color:rgba(244,243,241,.45)}
.facet-search{width:100%;padding:8px 10px;background:transparent;border:1px solid var(--color-divider);color:var(--color-text);margin-bottom:10px;font-family:inherit}
.facet-list{max-height:230px;overflow:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--color-accent);color:var(--color-accent);padding:5px 10px;font-size:.76rem;font-weight:700}
.chip b{cursor:pointer}
.count-line{font-size:.9rem;color:rgba(244,243,241,.62);margin-bottom:14px}
.empty{border:1px dashed var(--color-divider);padding:44px;text-align:center}

/* ---- Categories i marques ---- */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--color-divider)}
.cats a{padding:20px;border-right:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);color:var(--color-text)}
.cats a:hover{background:rgba(244,243,241,.04)}
.cats .n{font-size:.66rem;color:rgba(244,243,241,.45);letter-spacing:.12em}
.cats .t{font-family:var(--font-heading);font-weight:900;font-size:1.12rem;margin:6px 0 3px}
.marques{display:flex;flex-wrap:wrap;gap:10px}
.marques a{border:1px solid var(--color-divider);padding:8px 12px;font-size:.82rem;font-weight:600;color:var(--color-text);line-height:1.2}
.marques.temes a{font-size:.78rem;text-transform:none;max-width:100%}
.marques.temes a span{opacity:.55;font-weight:400}
.marques a:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---- Fitxa ---- */
.fitxa{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.fitxa .dl{border:1px solid var(--color-divider)}
.tarifes{min-width:520px}
.tarifes td{white-space:nowrap}
.fitxa .dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--color-divider);font-size:.92rem}
.fitxa .dl div:last-child{border-bottom:0}
.fitxa .dl span:first-child{color:rgba(244,243,241,.55)}
.prose{font-size:1.02rem;line-height:1.7}
.prose img{margin:18px 0}
.prose h2,.prose h3{margin-top:1.4em}
.prose a{text-decoration:underline}
.badge{display:inline-block;background:var(--color-accent);color:#140803;font-family:var(--font-heading);font-weight:900;font-size:2rem;padding:4px 12px;line-height:1}

/* ---- Blog ---- */
.post-list{display:grid;gap:0;border-top:1px solid var(--color-divider)}
.post-list article{padding:26px 0;border-bottom:1px solid var(--color-divider);display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start}
.post-list article.sense-foto{grid-template-columns:minmax(0,1fr)}
.post-list .ph{aspect-ratio:4/3;background:rgba(244,243,241,.05);overflow:hidden}
.post-list .ph img{width:100%;height:100%;object-fit:cover}
.post-list h3{font-size:1.16rem;margin:6px 0 8px;line-height:1.25}
.post-list h3 a{color:var(--color-text)}
.post-list h3 a:hover{color:var(--color-accent)}
.post-list time{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,241,.45)}
.post-list .ex{font-size:.92rem;color:rgba(244,243,241,.6);line-height:1.5}
.post-list .mes{display:inline-block;margin-top:10px;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.pag{display:flex;gap:8px;margin:30px 0}
.pag a,.pag span{border:1px solid var(--color-divider);padding:8px 13px;font-size:.86rem;color:var(--color-text)}
.pag .current{background:var(--color-text);color:var(--color-bg)}

/* ---- Peu ---- */
.site-foot{border-top:1px solid var(--color-divider);padding:48px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.site-foot a{color:rgba(244,243,241,.72);font-size:.92rem;display:block;padding:3px 0}
.site-foot a:hover{color:var(--color-accent)}
.legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--color-divider);font-size:.78rem;color:rgba(244,243,241,.45);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---- Mòbil ---- */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-r{border-left:0;border-top:1px solid var(--color-divider)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir{grid-template-columns:minmax(0,1fr)}
  .dir-r{grid-template-columns:minmax(0,1fr)}
  .dir-r aside{border-left:0;border-top:1px solid var(--color-divider);padding-left:0;padding-top:24px}
  .facets{position:static}
  .fitxa,.foot-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero>div{padding:34px 20px}
  .nav{flex-basis:100%;order:3;gap:14px}
  .langs{order:2}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .post-list article{grid-template-columns:1fr}
  .count b{font-size:1.6rem}
  .head-in{gap:12px}
  .nav{order:3;width:100%}
}


/* ---- Plugins de tercers que ja hi eren: que no desentonin ----
   L'avís de cookies el pinta cookiechoices.js (plugin WF Cookie Consent) i el botó de WhatsApp,
   el plugin Chaty. No es toca cap dels dos plugins: només se'ls dona l'aspecte de la web. */
#cookieChoiceInfo{
  background:#111112 !important;color:var(--color-text) !important;
  border-top:1px solid var(--color-divider) !important;
  font-family:var(--font-body) !important;font-size:.86rem !important;
  padding:12px 20px !important;box-shadow:0 -10px 30px rgba(0,0,0,.5) !important;z-index:60 !important;
}
#cookieChoiceInfo a{color:var(--color-accent) !important;text-decoration:underline}
#cookieChoiceDismiss{
  background:var(--color-accent) !important;color:#140803 !important;
  padding:7px 14px !important;font-weight:800 !important;text-transform:uppercase !important;
  letter-spacing:.06em !important;text-decoration:none !important;border-radius:0 !important;margin-left:10px
}
/* El globus de WhatsApp no ha de tapar el botó de tarifes al mòbil */
@media (max-width:620px){
  #chaty-widget,.chaty-widget{bottom:14px !important}
}