/* variables de color injectades pel tema: inc/colors.php */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--calc);color:var(--tinta);font-family:var(--serif);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* ── tipografia ─────────────────────────── */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.022em}
h1{font-size:clamp(2.6rem,7.6vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
h3{font-size:1.18rem;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.24em;color:var(--vermell);display:block;margin-bottom:1.1rem}
.eyebrow.pale{color:var(--gel)}
.lede{font-size:clamp(1.1rem,2.2vw,1.34rem);line-height:1.55;font-weight:300;max-width:34ch}

/* ── barra superior ─────────────────────── */
.top{position:sticky;top:0;z-index:60;background:var(--fons);color:var(--calc);border-bottom:1px solid var(--fons-3)}
.top .wrap{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);height:60px}
.mark{display:flex;align-items:center;gap:.62rem;text-decoration:none;margin-right:auto}
.mark img{width:36px;height:36px}
.langs{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:.55rem}
.langs a{text-decoration:none;opacity:.5}
.langs a[aria-current]{opacity:1;color:var(--gel)}
.top .btn{display:none}
@media(min-width:760px){.top .btn{display:inline-flex}}

/* ── botons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:500;font-size:.92rem;letter-spacing:.01em;padding:.78rem 1.4rem;border-radius:2px;text-decoration:none;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.btn-red{background:var(--vermell);color:#fff}
.btn-red:hover{background:var(--vermell-clar)}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{background:rgba(242,237,227,.12)}

/* ── hero ───────────────────────────────── */
.hero{position:relative;background:var(--fons);color:var(--calc);min-height:clamp(560px,88svh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero picture{position:absolute;inset:0;display:block}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;border:0}
.hero video.bg{opacity:0;transition:opacity .9s ease}
.hero video.bg.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(178deg,rgba(14,31,26,.72) 0%,rgba(14,31,26,.34) 34%,rgba(14,31,26,.9) 88%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(2.4rem,7vw,4.4rem)}
.hero h1{max-width:22ch;text-shadow:0 2px 30px rgba(14,31,26,.45)}
.hero h1 .kw{display:block;max-width:none;white-space:nowrap;font-family:var(--mono);font-size:clamp(.56rem,2.3vw,.7rem);font-weight:400;text-transform:uppercase;letter-spacing:.17em;line-height:1.7;color:var(--gel);margin-bottom:1.1rem;text-shadow:none}
.hero h1 .big{display:block}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
h2 .sub{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.52em;letter-spacing:0;color:var(--vermell);margin-top:.5rem}
.dark h2 .sub{color:var(--coral)}
.hero p{margin-top:1.3rem;max-width:38ch;font-size:1.1rem;font-weight:300}
.hero .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ── tira de dades ──────────────────────── */
.strip{background:var(--fons-2);color:var(--gel);border-top:1px solid var(--fons-3)}
.strip .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--fons-3);padding:0}
@media(min-width:820px){.strip .wrap{grid-template-columns:repeat(4,1fr)}}
.strip div{background:var(--fons-2);padding:1.5rem clamp(1.1rem,3vw,2rem)}
.strip dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-clar)}
.strip dd{font-family:var(--disp);font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;margin-top:.4rem;color:var(--calc);line-height:1.15}
.strip dd.two{font-size:clamp(.98rem,1.9vw,1.18rem)}

/* ── seccions ───────────────────────────── */
section{padding-block:clamp(4rem,9vw,7.5rem)}
.dark{background:var(--fons);color:var(--calc)}
.dark h2,.dark h3{color:var(--calc)}

/* ── frescor: partit ────────────────────── */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}}
.split img{border-radius:2px}
.split .txt p+p{margin-top:1.1rem}
.split .txt p{max-width:46ch;font-weight:300}

/* ── fitxa d'espècie (element signatura) ─ */
.labels{display:grid;gap:1.1rem;margin-top:3rem}
@media(min-width:640px){.labels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.labels{grid-template-columns:repeat(3,1fr)}}
.lab{background:var(--calc);border:1px solid var(--tinta);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.dark .lab{background:var(--fons-2);border-color:var(--fons-3)}
.lab figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--fons-3)}
.lab figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lab:hover figure img{transform:scale(1.045)}
.lab .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 1rem;border-bottom:1px dashed var(--tinta)}
.dark .lab .head{border-bottom-color:var(--fons-3)}
.lab .lot{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gris)}
.lab .head strong{font-family:var(--disp);font-size:1.16rem;font-weight:700;letter-spacing:-.015em}
.dark .lab .head strong{color:var(--calc)}
.lab dl{display:grid;grid-template-columns:auto 1fr;gap:.34rem .9rem;padding:.95rem 1rem 1.15rem;font-family:var(--mono);font-size:.7rem;line-height:1.5}
.lab dt{color:var(--gris);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;padding-top:.13rem}
.lab dd{color:var(--tinta)}
.dark .lab dd{color:var(--gel)}
.dark .lab dt{color:var(--gris-clar)}
.lab .sci{font-style:italic;font-family:var(--serif);font-size:.82rem;color:var(--gris)}

/* ── elaborats ──────────────────────────── */
.rail{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:700px){.rail{grid-template-columns:repeat(3,1fr)}}
.card figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--calc-2)}
.dark .card figure{background:var(--fons-3)}
.card figure img{width:100%;height:100%;object-fit:cover}
.card h3{margin-top:.95rem;font-size:1.05rem}
.card p{font-size:.92rem;color:var(--gris);margin-top:.3rem;font-weight:300}
.dark .card p{color:var(--gel)}

/* ── història ───────────────────────────── */
.story{display:grid;gap:clamp(2rem,5vw,3.6rem);align-items:start}
@media(min-width:900px){.story{grid-template-columns:.85fr 1.15fr}}
.story .quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.35rem,3.1vw,2rem);line-height:1.32;border-left:2px solid var(--vermell);padding-left:1.4rem;margin:2rem 0}
.story .quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-top:1rem}
.story p{font-weight:300;max-width:52ch}
.story p+p{margin-top:1.05rem}

/* ── peix del dia ───────────────────────── */
.daily{background:var(--vermell);color:#fff;border-radius:2px;padding:clamp(2rem,5vw,3.4rem);display:grid;gap:2rem;align-items:center}
@media(min-width:860px){.daily{grid-template-columns:1.2fr .8fr}}
.daily h2{color:#fff;max-width:16ch}
.daily p{font-weight:300;max-width:44ch;margin-top:1rem}
.daily .btn-ghost:hover{background:rgba(255,255,255,.16)}

/* ── on som ─────────────────────────────── */
.here{display:grid;gap:clamp(2rem,5vw,3.4rem)}
@media(min-width:900px){.here{grid-template-columns:.9fr 1.1fr}}
.here img{border-radius:2px}
.data{border-top:1px solid var(--fons-3)}
.data div{border-bottom:1px solid var(--fons-3);padding:1.15rem 0;display:grid;gap:.2rem}
@media(min-width:520px){.data div{grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline}}
.data dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-clar)}
.data dd{font-size:1.02rem}
.data a{text-decoration:none;border-bottom:1px solid var(--vermell-clar);padding-bottom:1px}
.todo{background:var(--vermell);color:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .5rem;border-radius:2px}

/* ── peu ────────────────────────────────── */
footer{background:var(--fons);color:var(--gel);padding-block:3.4rem 7.5rem;border-top:1px solid var(--fons-3);font-size:.9rem}
@media(min-width:760px){footer{padding-bottom:3.4rem}}
footer .wrap{display:grid;gap:2rem}
@media(min-width:760px){footer .wrap{grid-template-columns:1fr auto;align-items:end}}
footer img{width:74px;margin-bottom:1.1rem}
footer a{color:var(--calc)}

/* ── barra d'accions mòbil ──────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--fons);border-top:1px solid var(--fons-3)}
@media(min-width:760px){.bar{display:none}}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.72rem .4rem calc(.72rem + env(safe-area-inset-bottom));color:var(--calc);text-decoration:none;font-family:var(--disp);font-size:.82rem;font-weight:500;border-left:1px solid var(--fons-3)}
.bar a:first-child{border-left:0}
.bar a span{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.bar a.pri{background:var(--vermell)}
.bar a.pri span{color:rgba(255,255,255,.72)}

/* ── accessibilitat i moviment ──────────── */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--vermell-clar);outline-offset:3px}
.dark a:focus-visible{outline-color:var(--gel)}
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── com treballo ───────────────────────── */
.steps{display:grid;gap:1px;background:var(--fons-3);border:1px solid var(--fons-3);border-radius:2px;margin-top:2.8rem;overflow:hidden}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps article{background:var(--fons);padding:clamp(1.6rem,3.4vw,2.3rem)}
.steps h3{font-size:1.22rem;margin-bottom:.6rem}
.steps p{font-weight:300;color:var(--gel);max-width:40ch}
.steps .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--coral);display:block;margin-bottom:.9rem}

/* ── consells ───────────────────────────── */
.tip{display:grid;gap:0;border:1px solid var(--tinta);border-radius:2px;overflow:hidden;text-decoration:none;margin-top:2.4rem;transition:background .2s}
@media(min-width:760px){.tip{grid-template-columns:.9fr 1.1fr;align-items:stretch}}
.tip:hover{background:var(--calc-2)}
.tip figure{margin:0;min-height:220px;overflow:hidden}
.tip figure img{width:100%;height:100%;object-fit:cover}
.tip .body{padding:clamp(1.6rem,3.4vw,2.4rem);display:flex;flex-direction:column;justify-content:center}
.tip .body h3{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:.7rem}
.tip .body p{font-weight:300;color:var(--gris);max-width:44ch}
.tip .more{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vermell);margin-top:1.3rem}

/* ── preguntes freqüents ────────────────── */
.faq{margin-top:2.4rem;border-top:1px solid var(--calc-2)}
.faq details{border-bottom:1px solid var(--calc-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.4rem 1.25rem 0;position:relative;font-family:var(--disp);font-weight:500;font-size:clamp(1.02rem,2.1vw,1.15rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:1.1rem;font-family:var(--mono);color:var(--vermell);font-size:1.3rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2.4rem 1.5rem 0;font-weight:300;max-width:60ch}
.faq .a a{color:var(--vermell)}

/* ── article ────────────────────────────── */
.crumbs{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);padding-top:2.4rem}
.crumbs a{color:var(--gris)}
.prose{max-width:62ch;margin-inline:auto}
.prose h1{font-size:clamp(2rem,5vw,3.2rem);margin:1.2rem 0 1.4rem}
.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.8rem 0 .9rem}
.prose p{font-weight:300;margin-bottom:1.05rem}
.prose figure{margin:2.2rem 0}
.prose figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--gris);margin-top:.7rem}
.prose .back{display:inline-block;margin-top:2.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vermell)}

/* ── categories de producte ─────────────── */
.cats{display:grid;gap:1.1rem;margin-top:3rem}
@media(min-width:800px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{display:grid;text-decoration:none;background:var(--fons-2);border:1px solid var(--fons-3);border-radius:2px;overflow:hidden;transition:border-color .2s}
@media(min-width:520px){.cat{grid-template-columns:.8fr 1.2fr}}
.cat:hover{border-color:var(--gel)}
.cat figure{margin:0;min-height:190px;overflow:hidden}
.cat figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cat:hover figure img{transform:scale(1.05)}
.cat .body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column}
.cat .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.8rem;border-bottom:1px dashed var(--fons-3)}
.cat .head strong{font-family:var(--disp);font-size:1.3rem;font-weight:700;letter-spacing:-.015em;color:var(--calc)}
.cat .lot{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--gris-clar)}
.cat .sp{list-style:none;display:flex;flex-wrap:wrap;gap:.34rem;margin:.95rem 0 0}
.cat .sp li{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--gel);border:1px solid var(--fons-3);border-radius:2px;padding:.22rem .48rem}
.cat .orig{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.86rem;color:var(--gris-clar);margin-top:.95rem}
.cat .more{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-top:auto;padding-top:1.1rem}

/* ── cinta d'avisos, enganxada al NAP ───── */
.ticker{display:block;background:var(--vermell);color:#fff;overflow:hidden;padding:.52rem 0;position:relative;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:9vw;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--vermell),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--vermell),transparent)}
.ticker .track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .track,.ticker:focus-visible .track{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;white-space:nowrap;padding:0 1.5rem;position:relative}
.ticker span::after{content:"";position:absolute;right:-2px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55);transform:translateY(-50%)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* ── entrada escalonada ─────────────────── */
.rise{transition-delay:var(--d,0ms)}

/* ── proporcions d'imatge fixades (mòbil primer) ── */
.story img{width:100%;aspect-ratio:5/4;max-height:44vh;object-fit:cover;object-position:58% 28%}
@media(min-width:900px){.story img{aspect-ratio:3/4;max-height:none;object-position:58% center}}
.cat figure{min-height:0;aspect-ratio:16/10}
@media(min-width:520px){.cat figure{aspect-ratio:auto;height:100%}}
.rail{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.rail{grid-template-columns:repeat(3,1fr)}}
.card figure,.card .tile{aspect-ratio:1/1;border-radius:2px;overflow:hidden}
.card .tile{display:grid;place-items:center;text-align:center;padding:1rem;background:var(--fons-2);border:1px solid var(--fons-3)}
.card .tile span{font-family:var(--disp);font-weight:700;font-size:clamp(1rem,3.4vw,1.3rem);line-height:1.1;letter-spacing:-.02em;color:var(--gel)}
.dark .card .tile{background:var(--fons-2)}
@media(min-width:700px){.card figure,.card .tile{aspect-ratio:3/4}}
.card h3{font-size:.98rem;margin-top:.75rem}
.card p{font-size:.86rem}
@media(min-width:700px){.card h3{font-size:1.05rem}.card p{font-size:.92rem}}
.tip figure{min-height:0;aspect-ratio:16/10}
@media(min-width:760px){.tip figure{aspect-ratio:auto;height:100%}}
.here img{width:100%;aspect-ratio:4/3;max-height:42vh;object-fit:cover;object-position:center 42%}
@media(min-width:900px){.here img{aspect-ratio:3/4;max-height:none}}
.lab figure{aspect-ratio:16/10}
@media(min-width:640px){.lab figure{aspect-ratio:4/3}}
.prose figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:700px){.prose figure img{aspect-ratio:1/1}}

/* ── logo gran a dalt, petit en fer scroll ── */
.top .wrap{height:104px;transition:height .3s cubic-bezier(.2,.7,.3,1)}
.mark{gap:.8rem}
.mark img{width:78px;height:78px;transition:width .3s cubic-bezier(.2,.7,.3,1),height .3s cubic-bezier(.2,.7,.3,1)}
.top.compact .wrap{height:56px}
.top.compact .mark img{width:32px;height:32px}
.top.compact @media(min-width:760px){
  .top .wrap{height:132px}
  .mark img{width:100px;height:100px}
    .top.compact .wrap{height:60px}
  .top.compact .mark img{width:36px;height:36px}
  .top.compact }
section[id]{scroll-margin-top:96px}
@media(prefers-reduced-motion:reduce){.top .wrap,.mark img{transition:none}}

/* ── navegació ──────────────────────────── */
.nav{display:none;margin-left:auto;align-items:center;gap:1.6rem}
.nav a{font-family:var(--disp);font-weight:500;font-size:.92rem;letter-spacing:-.005em;text-decoration:none;color:var(--calc);opacity:.82;transition:opacity .18s}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--vermell-clar)}
@media(min-width:1000px){.nav{display:flex}}
.top .btn{display:none}
@media(min-width:1000px){.top .btn{display:inline-flex;margin-left:1.6rem}}
.burger{margin-left:auto;width:44px;height:44px;display:grid;place-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;background:var(--calc);border-radius:2px;transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.panel{position:fixed;inset:0 0 0 auto;width:min(85vw,360px);background:var(--fons-2);border-left:1px solid var(--fons-3);z-index:90;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;padding:5.5rem 1.8rem 2rem;overflow-y:auto}
.panel.open{transform:none}
.panel a{font-family:var(--disp);font-weight:500;font-size:1.28rem;color:var(--calc);text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--fons-3)}
.panel a[aria-current]{color:var(--vermell-clar)}
.panel .foot{margin-top:auto;padding-top:2rem}
.panel .foot .btn{display:inline-flex;width:100%;justify-content:center}
.scrim{position:fixed;inset:0;background:rgba(6,14,22,.6);z-index:85;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
body.locked{overflow:hidden}
@media(prefers-reduced-motion:reduce){.panel,.scrim,.burger span{transition:none}}

/* ── capçalera de pàgina interior ───────── */
.phead{background:var(--fons);color:var(--calc);border-bottom:1px solid var(--fons-3)}
.phead .wrap{padding-block:clamp(1.4rem,3vw,2.2rem) clamp(1.9rem,4vw,2.8rem)}
.phead .crumbs{padding-top:0;color:var(--gel);margin-bottom:1.4rem}
.phead .crumbs a{color:var(--gel);opacity:.75;text-decoration:none}
.phead .crumbs a:hover{opacity:1}
.phead .cols{display:grid;gap:clamp(1.3rem,3vw,2.6rem);align-items:center}
@media(min-width:880px){.phead .cols{grid-template-columns:1.18fr .82fr}}
.phead h1{max-width:18ch}
.phead h1 .kw{display:block;max-width:40ch;font-family:var(--mono);font-size:clamp(.56rem,2vw,.66rem);font-weight:400;text-transform:uppercase;letter-spacing:.18em;line-height:1.7;color:var(--coral);margin-bottom:.85rem}
.phead h1 .big{display:block;font-size:clamp(1.85rem,4.4vw,2.95rem)}
.phead h1 em{font-family:var(--serif);font-style:italic;font-weight:300}
.phead .lede{color:var(--gel);margin-top:1.1rem;max-width:46ch;font-size:clamp(1rem,1.9vw,1.14rem)}
.phead .acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.phead .pic{width:100%;aspect-ratio:16/9;max-height:210px;object-fit:cover;border-radius:2px;border:1px solid var(--fons-3)}
@media(min-width:880px){.phead .pic{aspect-ratio:4/3;max-height:290px}}

/* ── banda d'imatge de secció ───────────── */
.band{position:relative;display:flex;align-items:flex-end;min-height:clamp(155px,21vw,240px);overflow:hidden;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,28,43,.28) 0%,rgba(13,28,43,.55) 55%,rgba(13,28,43,.94) 100%)}
.band .wrap{position:relative;z-index:2;padding-block:clamp(1.6rem,3.4vw,2.4rem)}
.band .eyebrow{color:var(--coral)}
.band h2{color:var(--calc);margin-bottom:.5rem}
.band p{color:var(--gel);font-weight:300;max-width:52ch}

/* ── xifres destacades ──────────────────── */
.figs{display:grid;gap:1px;background:var(--calc-2);border:1px solid var(--calc-2);border-radius:2px;overflow:hidden}
@media(min-width:700px){.figs{grid-template-columns:repeat(3,1fr)}}
.figs div{background:var(--calc);padding:1.7rem 1.4rem}
.dark .figs,.dark .figs div{background:var(--fons-2);border-color:var(--fons-3)}
.dark .figs{background:var(--fons-3)}
.figs dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.dark .figs dt{color:var(--gris-clar)}
.figs dd{font-family:var(--disp);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:700;letter-spacing:-.02em;margin-top:.5rem;color:var(--vermell)}
.dark .figs dd{color:var(--coral)}
.figs dd small{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.9rem;letter-spacing:0;color:var(--gris);margin-top:.45rem}
.dark .figs dd small{color:var(--gel)}

/* ── enllaç de continuació ──────────────── */
.next{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vermell);text-decoration:none;margin-top:2rem}
.dark .next{color:var(--coral)}
.next:hover{text-decoration:underline;text-underline-offset:4px}
.lead-sm{font-weight:300;max-width:52ch}
.dark .lead-sm{color:var(--gel)}

/* ═══ XARXA DE SEGURETAT D'IMATGES ═══
   Qualsevol foto que es pugi des del panell s'adapta al seu forat:
   omple el marc, es retalla pel centre i mai deforma ni descol·loca res. */

/* A) imatge dins d'un contenidor que ja té la proporció */
.cat figure img,.card figure img,.lab figure img,.tip figure img,
.band img,.hero .bg,.pn-mini img{
  width:100%!important;height:100%!important;max-width:none;
  object-fit:cover;object-position:center;display:block
}
/* B) imatge que porta ella mateixa la proporció */
.story img,.here img,.phead .pic,.prose figure img{
  width:100%!important;height:auto;max-width:none;
  object-fit:cover;object-position:center;display:block
}
/* C) per si una foto arriba sense proporció declarada, no s'estira mai */
.cat figure,.card figure,.lab figure,.tip figure{overflow:hidden}
.band{overflow:hidden}

/* ── destacats del dia ───────────────────── */
.pdia-dest{list-style:none;display:grid;gap:.5rem;margin:.9rem 0 1.4rem;padding:0}
.pdia-dest.fila{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:0}
.pdia-dest li{display:flex;align-items:center;gap:.6rem;background:var(--calc);border:1px solid var(--calc-2);border-radius:2px;padding:.62rem .8rem}
.dark .pdia-dest li{background:var(--fons-2);border-color:var(--fons-3)}
.pdia-dest .mk{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:.7rem;font-weight:700;background:var(--calc-2);color:var(--gris)}
.pdia-dest .oferta .mk,.pdia-dest li.oferta .mk{background:var(--vermell);color:#fff}
.pdia-dest li.destacat .mk{background:#E8D5A8;color:#7A5000}
.pdia-dest .nm{font-family:var(--disp);font-weight:500;font-size:.96rem;flex:1;letter-spacing:-.01em}
.dark .pdia-dest .nm{color:var(--calc)}
.pdia-dest .pr{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--vermell);white-space:nowrap}
.dark .pdia-dest .pr{color:var(--coral)}
.avui-tira{background:var(--calc-2);padding-block:clamp(1.6rem,3.4vw,2.4rem)}

/* ── el peix del dia ─────────────────────── */
.pdia{position:relative;background:var(--fons);color:var(--calc);overflow:hidden;isolation:isolate}
.pdia-fons{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
	filter:blur(46px) saturate(120%);transform:scale(1.25);opacity:.3}
.pdia::after{content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(175deg,rgba(13,28,43,.82),rgba(13,28,43,.93))}
.pdia-graella{position:relative;z-index:2;display:grid;gap:clamp(1.8rem,4vw,3.4rem);
	padding-block:clamp(2rem,5vw,3.6rem) clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:920px){.pdia-graella{grid-template-columns:1.1fr .9fr}}
.pdia-txt .crumbs{padding-top:0;color:var(--gel);margin-bottom:1.3rem}
.pdia-txt .crumbs a{color:var(--gel);opacity:.75;text-decoration:none}
.pdia-txt h1{max-width:14ch}
.pdia-txt h1 .kw{display:block;font-family:var(--mono);font-size:clamp(.56rem,2vw,.66rem);font-weight:400;
	text-transform:uppercase;letter-spacing:.18em;color:var(--coral);margin-bottom:.9rem}
.pdia-txt h1 .big{display:block;font-size:clamp(2.2rem,6vw,3.8rem)}
.pdia-txt h1 em{font-family:var(--serif);font-style:italic;font-weight:300}
.pdia-txt .data{margin-top:1.1rem}
.pdia-txt .data time{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--gel);border:1px solid var(--fons-3);border-radius:99px;padding:.36rem .8rem;display:inline-block}
.pdia-txt .data.vella time{color:var(--coral);border-color:var(--coral)}
.pdia-txt .nota{font-family:var(--serif);font-style:italic;font-weight:300;
	font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--calc);margin-top:1.1rem;max-width:34ch;line-height:1.35}
.pdia-txt .acts{margin-top:1.8rem}
.pdia-tel{margin:0;position:relative}
.pdia-tel video{width:100%;max-width:400px;margin-inline:auto;aspect-ratio:9/16;object-fit:cover;
	background:#000;border-radius:18px;display:block;box-shadow:0 26px 60px rgba(0,0,0,.42);border:1px solid var(--fons-3)}
.pdia-antics{display:grid;gap:1.1rem;margin-top:2rem}
@media(min-width:620px){.pdia-antics{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.pdia-antics{grid-template-columns:repeat(6,1fr)}}
.pdia-antics figure{margin:0}
.pdia-antics video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:3px;display:block}
.pdia-antics time{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-top:.5rem}
.pdia-antics figcaption span{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.86rem;color:var(--gel);margin-top:.2rem}

/* ── capçalera a tot l'ample ─────────────── */
.top .wrap{max-width:none;padding-inline:clamp(1.1rem,3vw,2.6rem)}
.mark{flex:0 0 auto;margin-right:0}
.nav{margin-left:auto;gap:clamp(.9rem,1.7vw,1.7rem)}
.nav a{white-space:nowrap}
.top .btn{white-space:nowrap;flex:none}
@media(min-width:1000px){.top .btn{margin-left:clamp(.9rem,1.6vw,1.6rem)}}

/* ── El peix del dia, destacat al menú ───── */
.nav a.destaca{
	display:inline-flex;align-items:center;gap:.45rem;
	background:color-mix(in srgb, var(--vermell) 22%, transparent);
	border:1px solid color-mix(in srgb, var(--vermell-clar) 55%, transparent);
	border-radius:99px;padding:.34rem .85rem;opacity:1;
	transition:background .18s,border-color .18s
}
.nav a.destaca:hover{background:var(--vermell);border-color:var(--vermell)}
.nav a.destaca[aria-current]{background:var(--vermell);border-color:var(--vermell);box-shadow:none}
.nav a.destaca .puntet{
	width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;
	box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 70%, transparent);
	animation:batec 2.6s ease-out infinite
}
@keyframes batec{
	0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 70%, transparent)}
	70%{box-shadow:0 0 0 7px transparent}
	100%{box-shadow:0 0 0 0 transparent}
}
.panel a.destaca{display:flex;align-items:center;gap:.6rem;color:var(--coral)}
.panel a.destaca .puntet{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
@media(prefers-reduced-motion:reduce){.nav a.destaca .puntet{animation:none}}

/* ── només el segell a la capçalera ───────── */
.nomes-lectors{
	position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.mark{gap:0}
.nav{margin-left:auto}

/* ── selector d'idioma ───────────────────── */
.idioma{position:relative;margin-left:clamp(.6rem,1.4vw,1.2rem);padding-left:clamp(.8rem,1.6vw,1.4rem);border-left:1px solid var(--fons-3)}
.idioma-btn{
	display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid transparent;
	border-radius:99px;padding:.32rem .6rem .32rem .7rem;cursor:pointer;color:var(--calc);
	font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;transition:background .16s,border-color .16s
}
.idioma-btn:hover,.idioma-btn[aria-expanded="true"]{background:var(--fons-2);border-color:var(--fons-3)}
.idioma-btn .fl{width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .2s}
.idioma-btn[aria-expanded="true"] .fl{transform:rotate(180deg)}
.idioma-llista{
	position:absolute;top:calc(100% + .6rem);right:0;z-index:70;min-width:11.5rem;margin:0;padding:.3rem;
	list-style:none;background:var(--fons-2);border:1px solid var(--fons-3);border-radius:10px;
	box-shadow:0 18px 40px rgba(0,0,0,.34);animation:despl .16s ease
}
@keyframes despl{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.idioma-llista li{margin:0}
.idioma-llista a{
	display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:7px;text-decoration:none;
	color:var(--gel);font-family:var(--disp);font-size:.92rem;font-weight:500;opacity:1;box-shadow:none
}
.idioma-llista a:hover{background:var(--fons-3);color:var(--calc)}
.idioma-llista a[aria-current]{color:var(--coral)}
.idioma-llista b{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;opacity:.65;width:1.9rem;flex:none}
.idioma-llista span{flex:1}

/* ── panell del mòbil ────────────────────── */
.panel{
	width:min(86vw,370px);padding:0;overflow:hidden;
	display:flex;flex-direction:column;
	box-shadow:-18px 0 50px rgba(0,0,0,.35)
}
.panel-top{
	display:flex;align-items:center;justify-content:space-between;
	padding:calc(1rem + env(safe-area-inset-top)) 1.3rem 1rem;
	border-bottom:1px solid var(--fons-3);flex:none
}
.panel-top img{width:52px;height:52px}
.panel-tanca{
	width:40px;height:40px;display:grid;place-content:center;border-radius:50%;
	background:var(--fons-2);border:1px solid var(--fons-3);color:var(--calc);
	font-size:1.5rem;line-height:0;padding-bottom:3px;cursor:pointer
}
.panel-links{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.5rem 1.3rem;-webkit-overflow-scrolling:touch}
.panel-links a{
	display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:500;
	font-size:1.22rem;letter-spacing:-.02em;color:var(--calc);text-decoration:none;
	padding:.95rem 0;border-bottom:1px solid var(--fons-3)
}
.panel-links a:last-child{border-bottom:0}
.panel-links a[aria-current]{color:var(--coral)}
.panel-links a.destaca{color:var(--coral)}
.panel-links a.destaca .puntet{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.panel .foot{
	flex:none;margin-top:0;padding:1.1rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
	border-top:1px solid var(--fons-3);background:var(--fons)
}
.panel .foot .btn{display:flex;width:100%;justify-content:center}
.panel .foot .tel{
	display:block;text-align:center;margin-top:.7rem;color:var(--gel);text-decoration:none;
	font-family:var(--mono);font-size:.78rem;letter-spacing:.1em
}
.panel .foot .et{
	display:block;margin:1.3rem 0 .5rem;font-family:var(--mono);font-size:.58rem;
	letter-spacing:.18em;text-transform:uppercase;color:var(--gris-clar)
}
.panel .lang{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.panel .lang a{
	text-align:center;font-size:.84rem;color:var(--gel);text-decoration:none;
	border:1px solid var(--fons-3);border-radius:8px;padding:.6rem .3rem;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.panel .lang a[aria-current]{border-color:var(--coral);color:var(--coral)}

/* ── res no ha de desbordar mai ──────────── */
html,body{overflow-x:clip}
.ticker,.hero,.band,.phead{max-width:100vw}

/* ── amplada: seccions amples, text llegible ──
   El contenidor creix fins a 1560 px, però els paràgrafs es queden acotats en
   ch perquè la línia no passi dels ~70 caràcters. Amplitud sense perdre
   llegibilitat. */
.wrap{padding-inline:clamp(1.1rem,4vw,3.4rem)}

@media(min-width:1400px){
	/* més columnes quan hi ha lloc, en comptes de targetes gegants */
	.labels{grid-template-columns:repeat(4,1fr)}
	.rail{grid-template-columns:repeat(4,1fr)}
	.steps{grid-template-columns:repeat(3,1fr)}
	.zones{grid-template-columns:repeat(3,1fr)}
	.pdia-antics{grid-template-columns:repeat(6,1fr)}
}
@media(min-width:1700px){
	.labels{grid-template-columns:repeat(5,1fr)}
}

/* el text, sempre acotat */
section > .wrap > h2{max-width:22ch}
section > .wrap > p:not(.lede):not(.lead-sm){max-width:66ch}
.prose{max-width:66ch}
.faq .a{max-width:66ch}
.daily p{max-width:52ch}
.band p{max-width:58ch}

/* els blocs partits, amb més aire quan la pantalla és ampla */
@media(min-width:1400px){
	.split{gap:clamp(3rem,5vw,6rem)}
	.story{gap:clamp(3rem,5vw,6rem)}
	.here{gap:clamp(3rem,5vw,6rem)}
	.pdia-graella{gap:clamp(3rem,5vw,6rem)}
}


/* ══ ARTICLES I RECEPTES ══════════════════ */
.art-cap{position:relative;background:var(--fons);color:var(--calc);overflow:hidden;isolation:isolate}
.art-cap .wrap{position:relative;z-index:2;padding-block:clamp(2.4rem,6vw,5.4rem) clamp(2.2rem,5vw,4rem);max-width:1560px}
.art-fons{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.34}
.art-cap.amb-foto::after{content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(105deg,rgba(13,28,43,.95) 0%,rgba(13,28,43,.82) 52%,rgba(13,28,43,.55) 100%)}
.art-cap .crumbs{padding-top:0;color:var(--gel);margin-bottom:1.6rem}
.art-cap .crumbs a{color:var(--gel);opacity:.75;text-decoration:none}
.art-cap .kw{display:block;font-family:var(--mono);font-size:clamp(.56rem,2vw,.66rem);letter-spacing:.2em;
	text-transform:uppercase;color:var(--coral);margin-bottom:.9rem}
.art-cap h1{font-size:clamp(2.1rem,5.4vw,4rem);max-width:17ch;line-height:1.02}
.art-cap .entradeta{font-family:var(--serif);font-style:italic;font-weight:300;
	font-size:clamp(1.12rem,2.3vw,1.5rem);color:var(--gel);margin-top:1.3rem;max-width:44ch;line-height:1.4}
.art-meta{display:flex;align-items:center;gap:.6rem;margin-top:1.8rem;
	font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clar)}

.art-graella{display:grid;gap:clamp(2rem,4vw,4.5rem);
	padding-block:clamp(2.4rem,5vw,4.4rem) clamp(2.6rem,5vw,4.6rem)}
/* El text ocupa ~75% i la columna lateral es queda estreta. El contenidor de
   l'article és més ajustat que el de la resta perquè la línia no es dispari. */
.art-graella{max-width:1340px;margin-inline:auto}
@media(min-width:1000px){.art-graella{grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:clamp(2.4rem,4vw,4.2rem)}}

.art-cos{max-width:none}
.art-cos > p{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.35vw,1.3rem);
	line-height:1.72;color:var(--tinta);margin-bottom:1.4rem;max-width:74ch}
.art-cos > p:first-of-type::first-letter{
	float:left;font-family:var(--disp);font-weight:700;font-size:4.1em;line-height:.78;
	margin:.06em .12em 0 0;color:var(--vermell)}
.art-cos h2{font-size:clamp(1.45rem,2.4vw,2.1rem);margin:2.6rem 0 .9rem;padding-top:1.5rem;
	border-top:1px solid var(--calc-2);max-width:26ch}
.art-cos h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art-cos ul{margin:0 0 1.4rem;padding-left:0;list-style:none}
.art-cos ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;max-width:72ch;
	font-family:var(--serif);font-weight:300;font-size:1.12rem;line-height:1.62}
.art-cos ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
	border-radius:50%;background:var(--vermell)}
.art-cos strong{font-family:var(--disp);font-weight:700}
.art-cos blockquote{border-left:3px solid var(--vermell);margin:2rem 0;padding-left:1.4rem;
	font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.45;color:var(--tinta)}
.art-cos img{border-radius:3px;margin-block:1.8rem}

.art-costat{display:grid;gap:.9rem;position:sticky;top:96px}
@media(max-width:999px){.art-costat{position:static}}
.art-costat .fitxa{background:var(--calc);border:1px solid var(--calc-2);border-radius:3px;padding:1.4rem}
.art-costat .fosca{background:var(--fons);border-color:var(--fons-3)}
.art-costat .et{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
	text-transform:uppercase;color:var(--gris);margin-bottom:.6rem}
.art-costat .fosca .et{color:var(--coral)}
.art-costat p{font-weight:300;font-size:.95rem;line-height:1.55;margin-bottom:1.1rem}
.art-costat .fosca p{color:var(--gel)}
.art-costat .btn{display:flex;justify-content:center;width:100%}
.art-costat .menut{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.64rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--vermell);text-decoration:none}
.art-costat .menut.clar{color:var(--coral);margin-top:0}
.art-costat .menut:hover{text-decoration:underline;text-underline-offset:4px}
.tip.gran .body .et{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
	text-transform:uppercase;color:var(--vermell);margin-bottom:.6rem}
.tip.gran h3{font-size:clamp(1.5rem,3vw,2.2rem)}
@media(min-width:760px){.tip.gran{grid-template-columns:1fr 1fr}}

/* ── el peix del dia, crida des de la portada ── */
.avui-graella{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:center}
@media(min-width:860px){.avui-graella{grid-template-columns:.38fr .62fr}}
.avui-mira{position:relative;display:block;max-width:300px;margin-inline:auto;border-radius:16px;
	overflow:hidden;border:1px solid var(--fons-3);box-shadow:0 22px 50px rgba(0,0,0,.4);
	transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.avui-mira:hover{transform:translateY(-4px)}
.avui-mira img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.avui-mira::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,28,43,.1),rgba(13,28,43,.7))}
.avui-mira .play{position:absolute;inset:0;margin:auto;z-index:2;width:62px;height:62px;display:grid;place-items:center;
	border-radius:50%;background:rgba(242,237,227,.94);color:var(--fons);padding-left:4px;
	box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .22s}
.avui-mira:hover .play{transform:scale(1.07)}
.avui-mira .et{position:absolute;left:0;right:0;bottom:.9rem;z-index:2;text-align:center;
	font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--calc)}
.avui-txt h2{max-width:16ch}
.avui-txt h2 em{font-family:var(--serif);font-style:italic;font-weight:300}
.avui-fitxa{border-left:2px solid var(--fons-3);padding-left:1.2rem;margin-top:1.6rem}
.avui-fitxa .data time{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clar)}
.avui-fitxa .data.vella time{color:var(--coral)}
.avui-fitxa .nota{font-family:var(--serif);font-style:italic;font-weight:300;
	font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--calc);margin-top:.5rem;max-width:32ch;line-height:1.4}
.avui-fitxa .pdia-dest{margin-top:1rem;max-width:30rem}
.avui-txt .acts{margin-top:1.8rem}
.idioma-llista{min-width:12rem}
.panel .lang{grid-template-columns:repeat(auto-fit,minmax(8.4rem,1fr))}

/* ── pestanyes de secció ─────────────────── */
.filtres{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}
.filtres a{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--calc-2);border-radius:99px;
	padding:.5rem .95rem;font-family:var(--disp);font-weight:500;font-size:.92rem;letter-spacing:-.01em;
	color:var(--tinta);text-decoration:none;transition:background .16s,border-color .16s}
.filtres a:hover{border-color:var(--vermell)}
.filtres a[aria-current]{background:var(--vermell);border-color:var(--vermell);color:#fff}
.filtres a span{font-family:var(--mono);font-size:.62rem;opacity:.6}
.filtres a[aria-current] span{opacity:.8}
.dark .filtres a{border-color:var(--fons-3);color:var(--gel)}
.dark .filtres a[aria-current]{background:var(--vermell);border-color:var(--vermell);color:#fff}
.card .et,.tip .et{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
	text-transform:uppercase;color:var(--vermell);margin-bottom:.4rem}
.dark .card .et{color:var(--coral)}
.art-peix{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gel);margin-top:.7rem;font-size:1.02rem}
.art-peix strong{font-family:var(--disp);font-style:normal;font-weight:600;color:var(--coral)}

/* ── columna lateral de l'article ────────── */
.art-costat{gap:.8rem}
.art-costat .fitxa{padding:1.15rem 1.2rem}
.llista-mini,.llista-sec{list-style:none;margin:0;padding:0}
.llista-mini li{border-bottom:1px solid var(--calc-2)}
.llista-mini li:last-child{border-bottom:0}
.llista-mini a{display:block;padding:.7rem 0;text-decoration:none;color:inherit}
.llista-mini .s{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
	text-transform:uppercase;color:var(--vermell);margin-bottom:.2rem}
.llista-mini .t{display:block;font-family:var(--disp);font-weight:500;font-size:.92rem;
	line-height:1.3;letter-spacing:-.01em}
.llista-mini a:hover .t{color:var(--vermell)}
.llista-sec li{margin-bottom:.35rem}
.llista-sec a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
	border:1px solid var(--calc-2);border-radius:99px;padding:.45rem .85rem;
	font-family:var(--disp);font-weight:500;font-size:.88rem;color:var(--tinta);text-decoration:none}
.llista-sec a:hover{border-color:var(--vermell)}
.llista-sec a[aria-current]{background:var(--vermell);border-color:var(--vermell);color:#fff}
.llista-sec a span{font-family:var(--mono);font-size:.6rem;opacity:.55}

/* ── portada de receptes i consells ──────── */
.blocs{margin-bottom:clamp(2.6rem,5vw,4.4rem)}
.blocs:last-child{margin-bottom:0}
.blocs-cap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.6rem}
.blocs-cap h2{margin-bottom:.4rem}
.blocs-cap .lead-sm{max-width:52ch}
.blocs-cap .btn{flex:none;white-space:nowrap}
.blocs-cap .btn .n{font-family:var(--mono);font-size:.62rem;opacity:.55;margin-left:.4rem}

/* ── destacats i ofertes ─────────────────── */
.dest-grup{margin-top:1.3rem}
.dest-titol{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.62rem;
	letter-spacing:.2em;text-transform:uppercase;margin-bottom:.55rem}
.dest-titol i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
	font-style:normal;font-size:.66rem;font-weight:700}
.dest-destacat .dest-titol{color:#C9A227}
.dest-destacat .dest-titol i{background:#E8D5A8;color:#6B4A00}
.dest-oferta .dest-titol{color:var(--vermell)}
.dest-oferta .dest-titol i{background:var(--vermell);color:#fff}
.dest-grup ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-width:32rem}
.dest-grup li{display:flex;align-items:baseline;gap:.7rem;
	border-bottom:1px dotted var(--calc-2);padding-bottom:.4rem}
.dest-grup li:last-child{border-bottom:0;padding-bottom:0}
.dest-grup .nm{font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
	color:var(--tinta);flex:1}
.dest-grup .pr{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
	color:var(--vermell);white-space:nowrap}

/* Sobre fons fosc, el text ha de ser clar. Aquest era el problema:
   les fitxes heretaven el color crema del fons i es feien invisibles. */
.dark .dest-grup .nm,.pdia .dest-grup .nm,.avui .dest-grup .nm{color:var(--calc)}
.dark .dest-grup .pr,.pdia .dest-grup .pr,.avui .dest-grup .pr{color:var(--coral)}
.dark .dest-grup li,.pdia .dest-grup li,.avui .dest-grup li{border-bottom-color:var(--fons-3)}
.dark .dest-destacat .dest-titol,.pdia .dest-destacat .dest-titol,.avui .dest-destacat .dest-titol{color:#E8D5A8}
.dark .dest-oferta .dest-titol,.pdia .dest-oferta .dest-titol,.avui .dest-oferta .dest-titol{color:var(--coral)}
.dark .dest-oferta .dest-titol i,.pdia .dest-oferta .dest-titol i,.avui .dest-oferta .dest-titol i{background:var(--coral);color:var(--fons)}

/* ── prosa de secció ─────────────────────── */
.prosa-seo{max-width:70ch}
.prosa-seo h2{margin-bottom:1.2rem}
.prosa-seo p{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.4vw,1.18rem);
	line-height:1.7;margin-bottom:1.1rem;max-width:68ch}
.prosa-seo strong{font-family:var(--disp);font-weight:600}