/* cafedeespecialidad.com.es · full d'estil únic (28-09-2026). Font de veritat: recerca/2026-09-28/cafe/disseny.md. La part fins a «END CRITICAL» s'incrusta al ; el fitxer sencer es carrega sense bloqueig. */ @layer reset, tokens, base, components, utilities; /* ---------- Fonts autoallotjades (OFL; subconjunt latin de Google Fonts, 28-09-2026). Els fitxers -v2 són les mateixes fonts amb els eixos retallats al que fem servir (fontTools instancer): Fraunces opsz 24-144 · wght 500-700 (60 KB) i Plex Sans wght 400-600 (30 KB). ---------- */ @font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-latin-v2.woff2) format('woff2');font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';src:url(/assets/fonts/plexsans-latin-v2.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plexmono-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* --ink-3 clar és #736760 en lloc del #7A6E66 de disseny.md: 4,50:1 sobre paper no passava l'auditoria de contrast de Lighthouse (4,499). */ /* Cares de reserva amb mètriques ajustades (CLS 0 mentre arriba la font): calculades amb fontTools el 28-09-2026 sobre Fraunces 600/opsz 96 i Plex Sans 400, respecte a Georgia i Arial */ @font-face{font-family:'Fraunces Fallback';src:local('Georgia');size-adjust:94%;ascent-override:104%;descent-override:27%;line-gap-override:0%} @font-face{font-family:'Plex Sans Fallback';src:local('Arial'),local('Helvetica');size-adjust:97.5%;ascent-override:105%;descent-override:28%;line-gap-override:0%} @font-face{font-family:'Plex Mono Fallback';src:local('Courier New'),local('Courier');size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%} @layer reset{ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased} img,picture,svg,video{display:block;max-width:100%} img{height:auto} input,button,textarea,select{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} ul[class],ol[class],nav ul,nav ol,.data-strip ul,.emprender ul,.site-footer ul,.rail ul,.rail ol,.toc ol,.menu-dialog ul{list-style:none;padding:0} h1,h2,h3,h4{overflow-wrap:anywhere} p,li,dd,figcaption{text-wrap:pretty} h1,h2,h3{text-wrap:balance} address{font-style:normal} :target{scroll-margin-block:96px} } @layer tokens{ :root{ --paper:#F6F4F0;--surface:#FFFFFF;--surface-2:#F1EBE4;--ink:#1B1613;--ink-2:#4A403A;--ink-3:#736760;--rule:#E3DED7;--rule-2:#C9C1B8;--accent:#9A3F1F;--accent-ink:#FFFFFF;--ok:#3D6B4F;--ok-bg:#E6EFE9;--dark:#1B1613;--dark-ink:#F6F4F0;--dark-ink-2:#C9BFB5;--dark-rule:#3A312B; --font-display:Fraunces,'Fraunces Fallback',Georgia,serif; --font-sans:'IBM Plex Sans','Plex Sans Fallback',Arial,sans-serif; --font-mono:'IBM Plex Mono','Plex Mono Fallback','Courier New',monospace; --s-1:8px;--s-2:12px;--s-3:16px;--s-4:24px;--s-5:32px;--s-6:48px;--s-7:64px; --r-1:6px;--r-2:8px; --container:1312px;--gutter:16px;--measure:720px; --header-h:64px; color-scheme:light dark; accent-color:var(--accent) } @media (prefers-color-scheme:dark){ :root{--paper:#161210;--surface:#1F1916;--surface-2:#2A221D;--ink:#F1EAE2;--ink-2:#C9BFB5;--ink-3:#9B8F85;--rule:#3A312B;--rule-2:#4A403A;--accent:#D9915E;--accent-ink:#161210;--ok:#7FB894;--ok-bg:#1F2E26;--dark:#0F0C0A} } @media (min-width:760px){:root{--gutter:32px}} @media (min-width:1440px){:root{--gutter:64px}} } @layer base{ html{scroll-behavior:smooth} body{font-family:var(--font-sans);font-size:16px;color:var(--ink);background:var(--paper);line-height:1.6} h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;line-height:1.12;font-variation-settings:'opsz' 96} h1{font-size:clamp(30px,4.2vw,60px);letter-spacing:-.015em} h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.015em} h3{font-size:20px;line-height:1.25} a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)} a:hover{text-decoration-color:currentColor} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} ::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)} .container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto} main{display:block} .mono,time,.data{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .skip-link{position:absolute;inset-inline-start:var(--s-3);top:-100px;z-index:200;padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:var(--r-1);font-weight:600} .skip-link:focus{top:var(--s-2)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} @view-transition{navigation:auto} .masthead{view-transition-name:masthead} h1{view-transition-name:title} } @layer components{ /* ---------- Botons, píndoles, etiquetes ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-1);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;border:1px solid transparent;white-space:nowrap} .btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn--primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink))} .btn--outline{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn--outline:hover{border-color:var(--ink)} .btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--ink:hover{background:color-mix(in srgb,var(--ink) 85%,var(--paper))} .btn--sm{min-height:36px;padding:6px 12px;font-size:14px} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-1);color:var(--ink)} .icon-btn:hover{background:var(--surface-2)} .icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .eyebrow{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .eyebrow--ok{color:var(--ok)} .eyebrow--accent{color:var(--accent)} .pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:999px;font-family:var(--font-mono);font-size:12.5px;font-weight:500;line-height:1.3;border:1px solid var(--rule-2);color:var(--ink-2);white-space:nowrap} .pill--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent} .pill--draft{background:var(--surface-2);color:var(--ink-2);border-color:transparent} .pill svg{width:14px;height:14px} .tag{display:inline-block;padding:3px 9px;border:1px solid var(--rule);border-radius:var(--r-1);font-size:13px;color:var(--ink-2)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;background:var(--surface)} .chip:hover{border-color:var(--ink);color:var(--ink)} .chip small{font-size:inherit;color:var(--ink-3);margin-left:4px} .chip[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .chip[aria-current] small{color:inherit} .avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--font-display);font-weight:600;font-size:15px;flex:none} .avatar--sm{width:32px;height:32px;font-size:13px} .avatar--draft{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule-2)} /* ---------- Capçalera ---------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--rule)} .site-header__inner{display:flex;align-items:center;gap:var(--s-3);height:var(--header-h)} .masthead,.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1;flex:none;font-variation-settings:'opsz' 24} .masthead svg,.wordmark svg{width:26px;height:26px;flex:none} .site-nav{display:none;flex:1;min-width:0} .site-nav ul{display:flex;gap:2px;justify-content:center} .site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-1);color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap} .site-nav a:hover{color:var(--ink);background:var(--surface-2)} .site-nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0} .site-header__tools{display:flex;align-items:center;gap:4px;margin-inline-start:auto} .site-header__news{display:none} @media (min-width:1100px){.site-nav{display:block}.site-header__menu{display:none}.site-header__news{display:inline-flex}} @media (min-width:1100px) and (max-width:1240px){.site-nav a{padding:0 9px;font-size:14px}} /* ---------- Franja de dades ---------- */ .data-strip{background:var(--paper);border-bottom:1px solid var(--rule)} .data-strip ul{display:flex;gap:var(--s-4);min-height:44px;align-items:center;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;white-space:nowrap;font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums} .data-strip ul::-webkit-scrollbar{display:none} .data-strip li{scroll-snap-align:start;display:inline-flex;gap:8px;align-items:baseline;flex:none} .data-strip .k{color:var(--ink-3)} .data-strip .v{color:var(--ink);font-weight:500} .data-strip .d{color:var(--ink-3)} .data-strip a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)} .data-strip a:hover{border-bottom-color:currentColor} .data-strip .up{color:var(--accent)} .data-strip .down{color:var(--ok)} /* ---------- Hero de portada ---------- */ .hero{display:grid;gap:var(--s-5);padding-block:var(--s-6) var(--s-6);align-items:start} @media (min-width:1000px){.hero{grid-template-columns:7fr 5fr;gap:var(--s-7);padding-block:var(--s-7)}} .hero__main{display:grid;gap:var(--s-4);max-width:720px} .hero h1{font-size:clamp(34px,4.6vw,60px);font-variation-settings:'opsz' 144} .hero__lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-2);max-width:60ch} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-2)} .byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)} .byline time{font-size:13px;color:var(--ink-3)} .byline b{color:var(--ink);font-weight:600} .price-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);display:grid;gap:var(--s-3);container-type:inline-size} .price-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)} .price-card__value{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 96} .price-card__value small{font-family:var(--font-mono);font-size:14px;font-weight:400;color:var(--ink-3);letter-spacing:0} .sparkline{width:100%;height:auto;font-family:var(--font-mono);font-size:11px} .sparkline .axis{stroke:var(--rule);stroke-width:1} .sparkline .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .sparkline .dot{fill:var(--accent)} .sparkline text{fill:var(--ink-3)} .price-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);border-top:1px solid var(--rule);padding-top:var(--s-3)} .fact{display:grid;gap:2px} .fact .k{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .fact .v{font-weight:600;font-size:18px;font-variant-numeric:tabular-nums} .fact .d{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .price-card__foot{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} /* ---------- Migas de pa i capçalera de pàgina, targetes de torrador, rail i fitxa: al crític perquè el CSS asíncron no provoqui desplaçaments (CLS) al directori i a la fitxa (28-09-2026) ---------- */ .breadcrumb{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);padding-block:var(--s-3)} .breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px} .breadcrumb li+li::before{content:'/';margin-inline-end:6px;color:var(--rule-2)} .breadcrumb a{color:var(--ink-2)} .page{width:min(100% - 2*var(--gutter),var(--measure));margin-inline:auto;padding-block:var(--s-3) var(--s-6)} .page-head{display:grid;gap:var(--s-3);padding-block:var(--s-3) var(--s-5)} .page-head h1{font-size:clamp(30px,4vw,46px)} .page-head .standfirst{font-size:18px;color:var(--ink-2);max-width:60ch} .page-head .meta{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)} .card-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .roaster-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);overflow:hidden;display:grid;grid-template-rows:auto 1fr;container-type:inline-size} .roaster-card__media{aspect-ratio:16/10;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3);font-family:var(--font-mono);font-size:12.5px;border-bottom:1px solid var(--rule)} .roaster-card__media img{width:100%;height:100%;object-fit:cover} .roaster-card__body{padding:var(--s-3) var(--s-3) var(--s-4);display:grid;gap:10px;align-content:start} .roaster-card :is(h2,h3){font-size:20px;letter-spacing:0} .roaster-card :is(h2,h3) a{color:inherit;text-decoration:none} .roaster-card :is(h2,h3) a:hover{text-decoration:underline} .roaster-card__place{color:var(--ink-2);font-size:14px} .roaster-card__tags{display:flex;flex-wrap:wrap;gap:6px} .roaster-card__data{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:10px;margin-top:4px} @container (min-width:420px){.roaster-card__body{padding:var(--s-4)}} .rail{display:grid;gap:var(--s-4);align-content:start;font-size:14px} @media (min-width:1100px){.rail{position:sticky;top:calc(var(--header-h) + var(--s-3));align-self:start}} .rail section{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-3);background:var(--surface);container-type:inline-size} .rail h2{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} .rail ol,.rail ul{display:grid;gap:8px} .roaster-card__media--initial{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,18cqi,72px);line-height:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));font-variation-settings:'opsz' 144} .roaster-card .pill{justify-self:start;max-width:100%;white-space:normal;text-align:left} .directorio{padding-bottom:var(--s-6)} .directorio .page-head{padding-block:var(--s-3) var(--s-4)} .dir-toolbar{display:grid;gap:10px;margin-bottom:var(--s-4)} .chips__label{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);align-self:center;padding-right:4px} .chips--filters .chip[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .chip--clear{border-style:dashed} .card-grid--dir{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .dir-metodo{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule);max-width:var(--measure);color:var(--ink-2);font-size:15px;display:grid;gap:10px} .ficha-layout{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr);padding-bottom:var(--s-6)} .ficha-layout>.breadcrumb{grid-column:1/-1} @media (min-width:1000px){.ficha-layout{grid-template-columns:minmax(0,1fr) 380px;column-gap:var(--s-6);align-items:start}} .ficha{min-width:0;display:grid;gap:var(--s-4)} .ficha__header{display:grid;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--rule)} @media (min-width:900px){.ficha__header{grid-template-columns:minmax(0,1fr) auto;align-items:end}} .ficha__title{display:grid;gap:10px} .ficha__header h1{font-size:clamp(32px,4vw,52px);font-variation-settings:'opsz' 144;letter-spacing:-.02em} .ficha__sub{font-size:18px;color:var(--ink-2)} .ficha__pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .ficha__pills .pill{white-space:normal} .ficha__actions{display:flex;flex-wrap:wrap;gap:var(--s-2)} .ficha__actions .btn{white-space:normal;text-align:center} .ficha-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);display:grid;gap:var(--s-2);container-type:inline-size} .ficha-box__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px var(--s-3)} .ficha-box__head h2{font-size:24px} .ficha-box__head .meta,.ficha-box__foot{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .ficha-box__foot{padding-top:10px;border-top:1px solid var(--rule)} .ficha-dl{display:grid;font-size:15px} .ficha-dl>div{display:grid;gap:4px;padding:11px 0;border-top:1px solid var(--rule)} .ficha-dl dt{color:var(--ink-3);font-size:14px} .ficha-dl dd .cita{display:block;color:var(--ink-2);font-size:14px;margin-top:2px} .ficha-dl .src{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);overflow-wrap:anywhere} .ficha-dl .src a{color:inherit} @container (min-width:640px){.ficha-dl>div{grid-template-columns:170px minmax(0,1fr) minmax(150px,auto);column-gap:var(--s-3);align-items:baseline}.ficha-dl .src{text-align:right}} .ficha-map{aspect-ratio:16/10;background:var(--surface-2);border-radius:var(--r-1);display:grid;place-items:center;margin-bottom:8px} .marca-preview{display:flex;justify-content:center;padding:var(--s-5);background:var(--surface-2);border-radius:var(--r-2)} .badge-verificada{display:inline-flex;align-items:center;gap:12px;padding:8px 14px 8px 10px;background:var(--surface);border:1.5px solid var(--ok);border-radius:var(--r-1);color:var(--ink);text-decoration:none} .badge-verificada svg{width:36px;height:36px;flex:none} .badge-verificada b{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.2} .badge-verificada small{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);margin-top:2px} /* ---------- Prosa (ritme vertical) i marges d'utilitat: al crític perquè les pàgines de text no es desplacin (CLS) ---------- */ .prose{font-size:18px;line-height:1.65;color:var(--ink)} .prose>*+*{margin-top:1.1em} .prose h2{font-size:30px;margin-top:1.8em;scroll-margin-top:96px} .prose h3{font-size:24px;margin-top:1.5em} .prose h4{font-size:19px;margin-top:1.3em} .prose ul,.prose ol{padding-inline-start:1.3em} .prose li+li{margin-top:.4em} .prose--sm{font-size:16px} .prose--sm h2{font-size:24px} .prose--sm h3{font-size:19px} } @layer utilities{ .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} } @layer components{ /* == END CRITICAL == */ /* ---------- Seccions de portada ---------- */ .section{padding-block:var(--s-6);border-top:1px solid var(--rule)} .section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)} .section__head p{color:var(--ink-2);max-width:60ch} .section__more{font-weight:500;white-space:nowrap} .guide-list{border-top:1px solid var(--rule)} .guide-list li{border-bottom:1px solid var(--rule)} .guide-list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:'eyebrow status' 'title status' 'date status';gap:2px var(--s-3);align-items:center;padding:14px 0;color:inherit;text-decoration:none} .guide-list a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em} .guide-list .eyebrow{grid-area:eyebrow} .guide-list h3,.guide-list h2{grid-area:title;font-size:20px;font-weight:500;line-height:1.25} .guide-list time{grid-area:date;font-size:12.5px;color:var(--ink-3)} .guide-list .pill{grid-area:status} @media (min-width:760px){.guide-list a{grid-template-columns:150px 1fr auto auto;grid-template-areas:'eyebrow title status date';gap:var(--s-3);padding:16px 0}} .emprender{background:var(--dark);color:var(--dark-ink);border-radius:var(--r-2);padding:var(--s-5) var(--s-4);display:grid;gap:var(--s-4)} @media (min-width:900px){.emprender{grid-template-columns:5fr 7fr;padding:var(--s-6)}} .emprender h2{color:var(--dark-ink)} .emprender p{color:var(--dark-ink-2);max-width:48ch} .emprender .eyebrow{color:var(--dark-ink-2)} .emprender ul{display:grid;border-top:1px solid var(--dark-rule)} .emprender li{border-bottom:1px solid var(--dark-rule)} .emprender a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:14px 0;color:var(--dark-ink);text-decoration:none;font-weight:500} .emprender a:hover{text-decoration:underline;text-decoration-color:currentColor} .emprender a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .newsletter{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);display:grid;gap:var(--s-3)} @media (min-width:900px){.newsletter{grid-template-columns:1fr 1fr;gap:var(--s-5);padding:var(--s-5)}} .newsletter p{color:var(--ink-2);max-width:52ch} .newsletter form{display:grid;gap:10px;align-content:start} .newsletter label{font-weight:500;font-size:14px} .newsletter .row{display:flex;flex-wrap:wrap;gap:10px} .newsletter small{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .input{min-height:44px;padding:8px 12px;border:1px solid var(--rule-2);border-radius:var(--r-1);background:var(--surface);color:var(--ink);width:100%;flex:1 1 220px} .input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)} .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6E66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:36px} /* ---------- Peu ---------- */ .site-footer{margin-top:var(--s-7);border-top:1px solid var(--rule);background:var(--surface);padding-block:var(--s-6) var(--s-4);font-size:14px;color:var(--ink-2)} .site-footer__grid{display:grid;gap:var(--s-5);grid-template-columns:1fr} @media (min-width:600px){.site-footer__grid{grid-template-columns:1fr 1fr}} @media (min-width:1000px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}} .site-footer h2{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} .site-footer ul{display:grid;gap:2px} .site-footer li a,.site-footer li .sbc-open{display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none} .site-footer li a:hover,.site-footer li .sbc-open:hover{color:var(--ink);text-decoration:underline} .site-footer__brand{display:grid;gap:12px;align-content:start} .site-footer__brand p{max-width:40ch} .site-footer__bottom{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} /* ---------- Diàlegs (menú i cerca) ---------- */ dialog{border:0;padding:0;background:var(--surface);color:var(--ink)} dialog::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent)} .menu-dialog{width:100%;max-width:none;height:100dvh;max-height:none;inset:0;margin:0} .menu-dialog__inner{display:grid;grid-template-rows:auto 1fr auto;min-height:100%;padding:0 var(--gutter) var(--s-4)} .menu-dialog__top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);border-bottom:1px solid var(--rule)} .menu-dialog nav ul{display:grid;padding-top:var(--s-3)} .menu-dialog nav a{display:flex;align-items:center;min-height:52px;font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-variation-settings:'opsz' 32} .menu-dialog nav a[aria-current]{color:var(--accent)} .menu-dialog__foot{display:grid;gap:10px} .search-dialog{width:min(100% - 2*var(--gutter),640px);margin:10vh auto 0;border-radius:var(--r-2);border:1px solid var(--rule)} .search-dialog form{display:flex;gap:8px;padding:var(--s-3)} .search-dialog .input{font-size:17px} .search-dialog__hint{padding:0 var(--s-3) var(--s-3);font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} /* ---------- Migas de pa, pàgines simples ---------- */ .listing{width:min(100% - 2*var(--gutter),960px);margin-inline:auto;padding-bottom:var(--s-6)} .listing .chips{margin-bottom:var(--s-4)} .page-head form.newsletter{padding:var(--s-3)} .pagination{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-5);font-family:var(--font-mono);font-size:13px;color:var(--ink-3)} .empty{padding:var(--s-6) 0;text-align:center;color:var(--ink-2)} .notice{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--r-1);padding:14px 16px;background:var(--surface);display:grid;gap:8px} .notice--ok{border-left-color:var(--ok)} .contact-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);display:grid;gap:8px} .contact-card a{font-family:var(--font-display);font-size:24px;font-weight:600} .error-page{text-align:center;padding-block:var(--s-7)} .error-page .code{font-family:var(--font-mono);color:var(--ink-3);letter-spacing:.1em} .error-page .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)} /* ---------- Prosa (articles, guies, legals) ---------- */ .post__body>*{content-visibility:auto;contain-intrinsic-block-size:auto 96px} .prose li>ul,.prose li>ol{margin-top:.4em} .prose strong{font-weight:600} .prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-1)} .prose thead{background:var(--surface-2)} .prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top} .prose th{font-weight:600;font-size:14px} .prose tbody tr:last-child td{border-bottom:0} .prose td:has(> :is(time)),.prose td.num{font-variant-numeric:tabular-nums} .prose blockquote{border-left:2px solid var(--rule-2);padding-left:var(--s-3);color:var(--ink-2)} .prose img{border-radius:var(--r-1);margin-inline:auto} .prose figure{margin-block:1.5em} .prose figcaption{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);margin-top:8px} .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:.1em .3em;border-radius:4px} .prose hr{border:0;border-top:1px solid var(--rule);margin-block:2em} .prose details{border:1px solid var(--rule);border-radius:var(--r-1);padding:12px 16px} .prose summary{font-weight:600;cursor:pointer} .prose .entry-card{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);background:var(--surface);font-size:16px} .prose .entry-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-family:var(--font-mono);font-size:13px;margin-top:12px} .prose .entry-card dt{color:var(--ink-3)} /* ---------- Article ---------- */ .article-layout{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr);padding-bottom:var(--s-6)} .article-layout>.breadcrumb{grid-column:1/-1} @media (min-width:760px) and (max-width:1099px){.article-layout{grid-template-columns:220px minmax(0,1fr);column-gap:var(--s-5)}.article-layout .toc{grid-column:1}.article-layout .post,.article-layout .rail{grid-column:2}} @media (min-width:1100px){.article-layout{grid-template-columns:220px minmax(0,var(--measure)) minmax(240px,1fr);column-gap:var(--s-6)}.article-layout .toc{grid-column:1}.article-layout .post{grid-column:2}.article-layout .rail{grid-column:3}} .toc{align-self:start;font-size:14px} @media (min-width:760px){.toc{position:sticky;top:calc(var(--header-h) + var(--s-3));max-height:calc(100dvh - var(--header-h) - var(--s-4));overflow:auto}} .toc summary{cursor:pointer;font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 0;list-style:none;display:flex;justify-content:space-between;align-items:center} .toc summary::-webkit-details-marker{display:none} .toc summary::after{content:'+';font-size:16px} .toc details[open] summary::after{content:'−'} @media (min-width:760px){.toc summary{pointer-events:none}.toc summary::after{content:none!important}} .toc ol{display:grid;gap:2px;counter-reset:toc;border-top:1px solid var(--rule);padding-top:8px} .toc li{counter-increment:toc} .toc a{display:flex;gap:8px;padding:6px 0;color:var(--ink-2);text-decoration:none;line-height:1.35} .toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--ink-3);flex:none;padding-top:2px} .toc a:hover{color:var(--ink);text-decoration:underline} @media (max-width:759px){.toc{border:1px solid var(--rule);border-radius:var(--r-1);padding:0 var(--s-3)}.toc ol{padding-bottom:var(--s-2)}} .post{min-width:0} .post__header{display:grid;gap:var(--s-3);padding-bottom:var(--s-4);border-bottom:1px solid var(--rule);margin-bottom:var(--s-4)} .post__header h1{font-size:clamp(30px,3.6vw,46px);font-variation-settings:'opsz' 96} .standfirst{font-size:20px;line-height:1.45;color:var(--ink-2)} .byline-box{display:flex;flex-wrap:wrap;align-items:center;gap:12px var(--s-3);padding:12px 0;border-top:1px solid var(--rule)} .byline-box .who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);flex:1 1 260px} .byline-box .who b{color:var(--ink);font-weight:600} .byline-box .pills{display:flex;flex-wrap:wrap;gap:6px} .byline-box:has(time[data-revisado]) .who b{color:var(--ok)} .post__figure{margin-bottom:var(--s-4)} .post__figure img{width:100%;border-radius:var(--r-2);background:var(--surface-2)} .post__figure figcaption{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);margin-top:8px} .post__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--rule)} .rail .src{display:grid;gap:2px} .rail .src a{color:var(--ink);font-weight:500;overflow-wrap:anywhere} .rail .src span{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .rail .transparencia{display:grid;gap:8px;color:var(--ink-2)} .rail .transparencia .pills{display:flex;flex-wrap:wrap;gap:6px} .rail .next a{color:var(--ink);text-decoration:none;font-weight:500;line-height:1.35} .rail .next a:hover{text-decoration:underline} .rail .next .eyebrow{display:block;margin-bottom:2px} .read-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);z-index:150;transform-origin:0 50%;transform:scaleX(var(--progress,0))} @supports (animation-timeline:scroll()){.read-progress{animation:read-progress linear both;animation-timeline:scroll(root);transform:none}} @keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (min-width:760px){.read-progress{display:none}} /* ---------- Calculadora ---------- */ .calc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);display:grid;gap:var(--s-3)} .calc .field{display:grid;gap:6px} .calc .field label{font-weight:500;font-size:14px} .calc .seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r-1);overflow:hidden} .calc .seg button{min-height:40px;padding:0 14px;font-size:14px;font-weight:500;color:var(--ink-2);background:var(--surface)} .calc .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)} .calc__result{border-top:1px solid var(--rule);padding-top:var(--s-3);display:grid;gap:var(--s-3)} .calc__result .big{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)} .calc__result .big .v{font-family:var(--font-display);font-size:clamp(32px,4vw,44px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 72} .calc__result .big .k{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:4px} .calc__result dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px} .calc__result dt{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);padding-top:2px} .calc__result dd{font-weight:500} .calc [hidden]{display:none} /* ---------- Directori (resta), /marca i app (28-09-2026) ---------- */ .rail .others{display:grid;gap:0;border-top:1px solid var(--rule)} .rail .others li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--rule)} .rail .others a{color:var(--ink);text-decoration:none;font-weight:500} .rail .others a:hover{text-decoration:underline} .rail .others .src{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .rail .others .src.ok{color:var(--ok)} .rail .others+p{margin-top:12px;font-weight:500} .marca-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--s-4)} .swatch{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4)} .swatch figure{display:grid;gap:12px;justify-items:center;text-align:center} .swatch svg{width:72px;height:72px} .swatch figcaption{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)} .swatch--dark{background:var(--dark)} .swatch--dark figcaption{color:var(--dark-ink-2)} .swatch--dark figcaption a{color:var(--dark-ink)} .swatch--wide{grid-column:1/-1} .swatch--wide .wordmark{font-size:28px} .swatch--wide .wordmark svg{width:32px;height:32px} .swatch .tagline{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .prose pre{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-1);padding:14px 16px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.55} .prose pre code{background:none;padding:0;font-size:inherit} .app-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4);margin-top:var(--s-4)} .app-card>svg{width:44px;height:44px;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .app-card>div{display:grid;gap:8px;justify-items:start} .app-card h2{font-size:22px} .app-card p{color:var(--ink-2);font-size:15px;max-width:60ch} .app-card .btn{margin-top:4px;white-space:normal;text-align:center} /* ---------- Consentiment compartit: només tokens (no es toca el JS) ---------- */ } @layer utilities{ .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .stack-2>*+*{margin-top:var(--s-2)} .stack-4>*+*{margin-top:var(--s-4)} .text-2{color:var(--ink-2)} .text-3{color:var(--ink-3)} .small{font-size:14px} } /* Fora de capes: estil del component compartit de consentiment (includes/seoblog-consent.php) amb els tokens. */ .sbc-bar,.sbc-float{background:var(--surface);color:var(--ink);border:1px solid var(--rule-2);border-radius:var(--r-2);box-shadow:none;font-family:var(--font-sans)} .sbc-bar p,.sbc-cat small{color:var(--ink-2)} .sbc-btn{background:var(--ink);color:var(--paper);border-color:var(--ink);border-radius:var(--r-1);font-family:var(--font-sans);min-height:44px} .sbc-btn.sbc-link{background:transparent;color:var(--ink);border-color:transparent} .sbc-cat{border-color:var(--rule)} .sbc-btn:focus-visible,.sbc-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sbc-note{border:1px solid var(--rule);border-radius:var(--r-1);font-family:var(--font-sans);background:var(--surface)}