/* Seccions de la home (triades el 10/10/2026): brúixola de la proposta B, «Qui soc» i «A la ràdio» de la A,
   contacte de la A amb fons clar, i logos dels mitjans com a la web d'ordre. */
.kick{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--apricot);margin:0 0 14px}

/* Foto de la capçalera (on hi havia l'oracle) */
.hero-foto{aspect-ratio:4/5;width:100%;max-width:500px;justify-self:end;cursor:default}
.hero-foto img{object-position:30% 30%}

/* ——— Brúixola: les opcions són cartes que s'obren ——— */
.bx-b{display:block;padding:min(8cqi,110px) var(--gut)}
.bx-cap{text-align:center;max-width:760px;margin:0 auto min(5cqi,60px)}
.bx-cap .sub{margin:0 auto}
.bx-b .kick{color:var(--apricot-deep)}
.tirada{min-inline-size:0;border:0;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:min(2.4cqi,30px);max-width:1180px}
.tirada legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.carta-opt input{position:absolute;opacity:0;pointer-events:none}
.carta-opt label{display:grid;cursor:pointer;border-radius:22px;background:#FBF6F2;box-shadow:0 18px 34px -24px rgba(53,32,47,.55);transition:transform .45s cubic-bezier(.3,1.3,.5,1),box-shadow .35s,opacity .35s;outline-offset:4px;height:100%}
.carta-opt label:hover{transform:translateY(-6px)}
.carta-opt input:checked+label{transform:translateY(-12px);box-shadow:0 0 0 3px var(--apricot-deep),0 30px 44px -26px rgba(53,32,47,.7)}
.carta-opt input:focus-visible+label{outline:2px solid var(--plum)}
.tirada:has(input:checked) .carta-opt input:not(:checked)+label{opacity:.78}
.tirada:has(input:checked) .carta-opt input:not(:checked)+label:hover{opacity:1}
.carta-foto{display:block;aspect-ratio:4/3.4;border-radius:22px 22px 0 0;overflow:hidden;position:relative;
  transform:rotateX(calc(var(--ay,0)*-6deg)) rotateY(calc(var(--ax,0)*8deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.carta-foto::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,240,210,.35),rgba(255,232,196,.13) 22%,transparent 48%)}
.carta-foto:hover::after{opacity:1}
.touch .carta-foto::after{opacity:var(--lo,0);transition:none}
.carta-peu{display:grid;gap:6px;padding:16px 18px 20px}
.carta-peu .svc{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--apricot-deep)}
.carta-q{font-size:18px;line-height:1.35;color:var(--plum)}
.obert{display:grid;grid-template-columns:1.35fr .9fr;gap:min(5cqi,60px);max-width:1180px;margin:min(5cqi,60px) auto 0;background:#FBF6F2;border-radius:28px;padding:clamp(22px,4cqi,48px);box-shadow:0 24px 50px -36px rgba(53,32,47,.6)}
.obert.anim{animation:obre .5s cubic-bezier(.2,.7,.2,1)}
@keyframes obre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.detall{display:grid;gap:10px;align-content:start}
.detall small{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--apricot-deep)}
.detall b{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:clamp(34px,4.4cqi,54px);line-height:1.02}
.detall .meta{justify-self:start;font-size:15px;letter-spacing:.06em;color:var(--plum);background:rgba(224,174,147,.35);padding:6px 14px;border-radius:999px}
.detall p{margin:6px 0 4px;font-size:19px;line-height:1.7;color:var(--muted-c)}
.detall p strong{color:var(--plum);font-weight:500}
.page .detall a.btn{background:var(--plum);color:var(--cream);justify-self:start;font-size:16px;padding:14px 26px}
.obert-cita{display:grid;gap:22px;align-content:start;border-left:1px solid rgba(53,32,47,.15);padding-left:min(4cqi,48px)}
.obert-cita blockquote{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-style:normal;font-size:clamp(22px,2.4cqi,28px);line-height:1.4;color:var(--plum)}
.obert-cita .ethic{font-size:16px;border-top:0;padding-top:0}

/* ——— Qui soc i a la ràdio: foto i text alternats ——— */
.qui,.radio{display:grid;grid-template-columns:.9fr 1.1fr;gap:min(7cqi,90px);align-items:center;max-width:1240px;margin:0 auto;padding:min(9cqi,120px) var(--gut) 0}
.radio{grid-template-columns:1.1fr .9fr}
.qui-foto,.radio-foto{aspect-ratio:4/5;width:100%;max-width:500px;justify-self:center}
.qui-foto img{object-position:50% 40%}
.radio-foto img{object-position:50% 30%}
.qui h2,.radio h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:clamp(38px,5.4cqi,66px);line-height:1;margin:0 0 24px;letter-spacing:-.015em}
.qui h2 em,.radio h2 em{color:var(--apricot)}
.qui-text p,.radio-text p{margin:0 0 18px;font-size:19px;line-height:1.7;color:var(--dusty);max-width:58ch}
.qui-text .destacat{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(22px,2.4cqi,28px);line-height:1.4;color:var(--cream);border-left:2px solid var(--apricot);padding-left:20px;margin:28px 0}
.qui-text .pregunta{color:var(--apricot);font-size:21px}
.radio-text .radio-preg{font-family:"Bodoni Moda",Georgia,serif;font-style:normal;font-size:clamp(22px,2.4cqi,28px);line-height:1.4;color:var(--cream)}
.radio .m-ctas{margin-top:10px}
.qui .btn,.radio .btn{font-size:16px;padding:13px 24px}

/* ——— Contacte (fons clar) ——— */
.contacte{grid-template-columns:.95fr 1.05fr;margin-top:min(9cqi,120px);padding:min(8cqi,100px) max(var(--gut),calc((100% - 1240px)/2));background:var(--cream);color:var(--plum)}
.contacte .kick{color:var(--apricot-deep)}
.contacte h2{margin-bottom:20px}
.contacte h2 em{color:var(--apricot-deep)}
.contacte .sub{color:var(--muted-c);font-size:19px;line-height:1.65;max-width:46ch}
.contacte .sub strong{color:var(--plum);font-weight:500}
.dades{list-style:none;margin:26px 0;padding:0;display:grid;gap:14px}
.dades li{display:grid;gap:2px}
.dades li>span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--apricot-deep)}
.page .dades a{font-size:22px;color:var(--plum);text-decoration:none}
.dades a:hover{text-decoration:underline;text-underline-offset:4px}
.contacte-foto{aspect-ratio:4/5;width:min(100%,360px);margin-top:8px}
.contacte .form{background:#FBF6F2;border-color:rgba(53,32,47,.12)}
.contacte .camp label{color:var(--muted-c)}
.contacte .camp input,.contacte .camp textarea,.contacte .camp select{color:var(--plum);background:#fff;border-color:rgba(53,32,47,.2)}
.contacte .camp select{background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,var(--apricot-deep) 50%),linear-gradient(135deg,var(--apricot-deep) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.contacte .accepto{color:var(--muted-c)}
.page .contacte .accepto a{color:var(--plum)}
.contacte .accepto input{accent-color:var(--plum)}
.page .contacte .form .btn{background:var(--plum);color:var(--cream)}
.contacte .form-avis.ok{color:var(--plum)}
.contacte .form-avis{color:#8A2A1E;background:rgba(184,57,42,.1)}

/* ——— Logos dels mitjans ——— */
.press{justify-items:center;text-align:center;padding:min(8cqi,100px) var(--gut) min(4cqi,50px)}
.logos-mitjans{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 50px;max-width:1100px}
.logos-mitjans li{height:30px;display:flex;align-items:center}
.logos-mitjans .lg-q{height:52px}
.logos-mitjans .lg-m{height:38px}
.logos-mitjans img{height:100%;width:auto;filter:invert(1);opacity:.72;transition:opacity .3s}
.logos-mitjans li:hover img{opacity:1}

@container (max-width:900px){
  .tirada{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,34cqi);overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 22px;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .tirada::-webkit-scrollbar{display:none}
  .carta-opt{scroll-snap-align:center}
  .obert{grid-template-columns:1fr}
  .obert-cita{border-left:0;padding-left:0;border-top:1px solid rgba(53,32,47,.15);padding-top:22px}
}
@container (max-width:780px){
  .hero-foto{justify-self:center;max-width:420px}
  .qui,.radio{grid-template-columns:1fr;padding-top:64px;gap:28px}
  .radio-foto{order:-1}
  .qui-foto,.radio-foto{max-width:420px}
  .contacte{grid-template-columns:1fr;padding-block:56px}
  .contacte-foto{display:none}
}
@container (max-width:620px){
  .tirada{grid-auto-columns:74cqi}
  .logos-mitjans{gap:22px 30px}
  .logos-mitjans li{height:22px}
  .logos-mitjans .lg-q{height:40px}
  .logos-mitjans .lg-m{height:28px}
}

/* Sense cursives enlloc (decisió de la Clara, 10/10/2026); els mots destacats només canvien de color */
em,i,cite,blockquote{font-style:normal}

/* Menú desplegable (botó de tres ratlles) */
.m-nav{position:relative;z-index:40}
.nav-dreta{display:flex;align-items:center;gap:18px}
.menu-boto{appearance:none;border:1px solid rgba(224,174,147,.45);background:transparent;width:52px;height:52px;border-radius:50%;display:grid;place-content:center;gap:6px;cursor:pointer;transition:background .25s,border-color .25s}
.menu-boto:hover{background:rgba(224,174,147,.14);border-color:var(--apricot)}
.menu-boto span{display:block;width:22px;height:2px;border-radius:2px;background:var(--cream);transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.menu-boto[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-boto[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-boto[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.m-nav .m-menu:not([hidden]){display:grid;position:absolute;right:var(--gut);top:calc(100% - 6px);min-width:260px;gap:2px;padding:10px;background:#2A1824;border:1px solid rgba(224,174,147,.3);border-radius:20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);animation:menu .3s cubic-bezier(.2,.7,.2,1)}
@keyframes menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.m-nav .m-menu .ml{font-size:20px;letter-spacing:.02em;padding:13px 18px;border-radius:12px;color:var(--cream)}
.m-nav .m-menu .ml::after{display:none}
.m-nav .m-menu .ml:hover,.m-nav .m-menu .ml:focus-visible{background:rgba(224,174,147,.16)}

/* Correu i telèfon en imatge */
.dades img{display:block;height:30px;width:auto;margin-top:4px}

/* Crèdit del disseny, discret, al peu */
.credit{font-size:14px;color:var(--dusty);opacity:.8}
.page .credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.credit a:hover{color:var(--cream)}

.hero-foto img{object-position:55% 60%}

/* Capçalera centrada: titular i foto junts al mig (en pantalles grans no se separen) */
.m-nav{max-width:1240px;margin-inline:auto}
.hero{max-width:1180px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:min(5cqi,64px)}
.hero-foto{justify-self:start;max-width:480px}
@container (max-width:780px){ .hero-foto{justify-self:center} }
/* Amb l'oracle al hero, en mòbil i tauleta va a tot l'ample, sota el titular (sense l'oracle el hero no canvia) */
@container (max-width:780px){ .hero:has(.orc){grid-template-columns:1fr;gap:34px} .hero:has(.orc) .orc{max-width:520px;width:100%;justify-self:center} }

/* «Què et porta fins aquí?» en horitzontal (11/10/2026): cartes a l'esquerra, text a la dreta,
   perquè en pantalles petites d'ordinador es vegi el text en canviar de carta. */
.bx-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:min(4.5cqi,64px);align-items:start;padding-block:min(7cqi,90px);padding-inline:max(var(--gut),calc((100% - 1240px)/2))}
.bx-b .bx-textos{grid-column:1/-1}
.bx-cap{text-align:left;max-width:none;margin:0 0 26px}
.bx-cap h2{font-size:clamp(36px,4.4cqi,58px);margin-bottom:10px}
.bx-cap .sub{margin:0}
.tirada{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:none;margin:0}
.carta-foto{aspect-ratio:16/9}
.carta-peu{padding:12px 16px 16px;gap:4px}
.carta-q{font-size:17px}
.carta-opt label:hover{transform:translateY(-4px)}
.carta-opt input:checked+label{transform:translateY(-6px)}
.obert{display:block;margin:0;position:sticky;top:20px;max-width:none}
.obert .detall{max-width:62ch}
.obert .detall b{font-size:clamp(32px,3.6cqi,46px)}
.obert .detall p{font-size:18px}

@container (max-width:900px){
  .bx-b{display:block}
  .bx-cap{text-align:center}
  .bx-cap .sub{margin:0 auto}
  .tirada{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,40cqi);margin-inline:calc(-1*var(--gut))}
  .obert{position:static;margin-top:24px}
}
@container (max-width:620px){
  .tirada{grid-auto-columns:74cqi}
}

/* 11/10 · La caixa del text fa caixa amb les cartes: comença a dalt de la primera fila i acaba a baix de la segona.
   El títol queda a sobre de les cartes, a la columna de l'esquerra. */
.bx-esq{display:contents}
.bx-b{grid-template-areas:"cap ." "tirada obert" "textos textos";align-items:stretch;row-gap:0}
.bx-cap{grid-area:cap}
.tirada{grid-area:tirada;align-self:start}
.obert{grid-area:obert;position:static;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.bx-b .bx-textos{grid-area:textos}
/* Que la Q de «Què» no toqui la f de «fins» */
.bx-cap h2{line-height:1.1}
.contacte h2{line-height:1.08}
@container (max-width:900px){
  .bx-b{display:block}
}
/* Les cartes s'estiren fins a l'alçada de la caixa (que fa servir l'alçada del text més llarg: js/web.js, mesuraObert) */
.tirada{align-self:stretch;grid-template-rows:1fr 1fr}
.carta-opt label{display:flex;flex-direction:column}
.carta-foto{flex:1 1 auto;aspect-ratio:auto;min-height:120px}
.carta-foto img{position:absolute;inset:0}
.carta-peu{flex:none}
@container (max-width:900px){
  .carta-foto{flex:none;aspect-ratio:16/10;min-height:0}
}

/* Mòbil i tauleta (11/10): «Què et porta fins aquí?» com a acordió. Les quatre opcions són files amb una foto petita;
   la caixa del text s'obre just a sota de l'opció triada (js/web.js, colocaObert). */
@container (max-width:900px){
  .tirada{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0;gap:12px}
  .carta-opt{scroll-snap-align:none;scroll-margin-top:14px}
  .carta-opt label{flex-direction:row;align-items:stretch;border-radius:18px;min-height:92px}
  .carta-opt label:hover,.carta-opt input:checked+label{transform:none}
  .carta-foto{flex:none;width:clamp(88px,26cqi,130px);aspect-ratio:auto;min-height:92px;border-radius:18px 0 0 18px}
  .carta-peu{flex:1 1 auto;min-width:0;padding:12px 16px;align-content:center}
  .carta-opt label{overflow:hidden}
  .carta-q{font-size:18px}
  .tirada .obert{grid-area:auto;margin:0 0 8px;border-radius:22px;padding:22px 20px 24px;min-height:0}
  .tirada .obert .detall b{font-size:clamp(30px,8cqi,40px)}
}