/* ================================================================
 * custom.css — Estilos personalizados del tema DJ Surda 2025
 * Fuentes, componentes, layouts y código nuevo.
 * Frameworks y plugins → vendors.css
 * ================================================================ */

/* Lexend eliminada (set. 2026): es descarregaven 7 pesos (300–900) i no
   s'aplicava enlloc. Les dues úniques regles que la declaraven (h1–h6 i
   .post-title) estaven dins de comentaris no tancats, així que mai van arribar
   a fer efecte. Verificat en viu: 0 elements la feien servir. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
/* Big Shoulders Display: pes 400 (tracklist i reproductor blau) i pes 600
   (temps del reproductor blanc, que sobre fons clar es veia massa fi).
   Només es descarreguen aquests dos pesos: demanar-ne un que no sigui en
   aquesta llista faria que el navegador en falsegés el gruix. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600&display=swap");

@font-face {
    font-family: 'BalginDisplayBold';
    src: url('../fonts/balgindisplay-bold.woff2') format('woff2'),
         url('../fonts/balgindisplay-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: BeniRegular;
    src: url(../fonts/BeniRegular.otf) format("otf");
    src: url(../fonts/BeniRegular.woff) format("woff");
    src: url(../fonts/BeniRegular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: BeniBold;
    src: url(../fonts/BeniBold.otf) format("otf");
    src: url(../fonts/BeniBold.woff) format("woff");
    src: url(../fonts/BeniBold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: londrina;
    src: url(../fonts/londrinasolid-regular-webfont.woff2) format("woff2"), url(../fonts/londrinasolid-regular-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.eot?597unm);
    src: url(../fonts/icomoon.eot?597unm#iefix) format("embedded-opentype"), url(../fonts/icomoon.ttf?597unm) format("truetype"), url(../fonts/icomoon.woff?597unm) format("woff"), url(../fonts/icomoon.svg?597unm#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
[class*=" icon-"],
[class^="icon-"] {
    font-family: icomoon !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-ivoox:before {
    content: "\e900";
}
.icon-streamable:before {
    content: "\e901";
}
.icon-promodj:before {
    content: "\e902";
}
.icon-sowndhaus:before {
    content: "\e903";
}
.icon-hearthis:before {
    content: "\e904";
}
.icon-dailymotion:before {
    content: "\e905";
}
.icon-glass:before {
    content: "\f000";
}
.icon-music:before {
    content: "\f001";
}
.icon-search:before {
    content: "\f002";
}
.icon-envelope-o:before {
    content: "\f003";
}
.icon-heart:before {
    content: "\f004";
}
.icon-star:before {
    content: "\f005";
}
.icon-star-o:before {
    content: "\f006";
}
.icon-user:before {
    content: "\f007";
}
.icon-film:before {
    content: "\f008";
}
.icon-th-large:before {
    content: "\f009";
}
.icon-th:before {
    content: "\f00a";
}
.icon-th-list:before {
    content: "\f00b";
}
.icon-check:before {
    content: "\f00c";
}
.icon-close:before {
    content: "\f00d";
}
.icon-search-plus:before {
    content: "\f00e";
}
.icon-search-minus:before {
    content: "\f010";
}
.icon-power-off:before {
    content: "\f011";
}
.icon-signal:before {
    content: "\f012";
}
.icon-cog:before {
    content: "\f013";
}
.icon-trash-o:before {
    content: "\f014";
}
.icon-home:before {
    content: "\f015";
}
.icon-file-o:before {
    content: "\f016";
}
.icon-clock-o:before {
    content: "\f017";
}
.icon-road:before {
    content: "\f018";
}
.icon-download:before {
    content: "\f019";
}
.icon-arrow-circle-o-down:before {
    content: "\f01a";
}
.icon-arrow-circle-o-up:before {
    content: "\f01b";
}
.icon-inbox:before {
    content: "\f01c";
}
.icon-play-circle-o:before {
    content: "\f01d";
}
.icon-repeat:before {
    content: "\f01e";
}
.icon-refresh:before {
    content: "\f021";
}
.icon-list-alt:before {
    content: "\f022";
}
.icon-lock:before {
    content: "\f023";
}
.icon-flag:before {
    content: "\f024";
}
.icon-headphones:before {
    content: "\f025";
}
.icon-volume-off:before {
    content: "\f026";
}
.icon-volume-down:before {
    content: "\f027";
}
.icon-volume-up:before {
    content: "\f028";
}
.icon-qrcode:before {
    content: "\f029";
}
.icon-barcode:before {
    content: "\f02a";
}
.icon-tag:before {
    content: "\f02b";
}
.icon-tags:before {
    content: "\f02c";
}
.icon-book:before {
    content: "\f02d";
}
.icon-bookmark:before {
    content: "\f02e";
}
.icon-print:before {
    content: "\f02f";
}
.icon-camera:before {
    content: "\f030";
}
.icon-font:before {
    content: "\f031";
}
.icon-bold:before {
    content: "\f032";
}
.icon-italic:before {
    content: "\f033";
}
.icon-text-height:before {
    content: "\f034";
}
.icon-text-width:before {
    content: "\f035";
}
.icon-align-left:before {
    content: "\f036";
}
.icon-align-center:before {
    content: "\f037";
}
.icon-align-right:before {
    content: "\f038";
}
.icon-align-justify:before {
    content: "\f039";
}
.icon-list:before {
    content: "\f03a";
}
.icon-dedent:before {
    content: "\f03b";
}
.icon-indent:before {
    content: "\f03c";
}
.icon-video-camera:before {
    content: "\f03d";
}
.icon-image:before {
    content: "\f03e";
}
.icon-pencil:before {
    content: "\f040";
}
.icon-map-marker:before {
    content: "\f041";
}
.icon-adjust:before {
    content: "\f042";
}
.icon-tint:before {
    content: "\f043";
}
.icon-edit:before {
    content: "\f044";
}
.icon-share-square-o:before {
    content: "\f045";
}
.icon-check-square-o:before {
    content: "\f046";
}
.icon-arrows:before {
    content: "\f047";
}
.icon-step-backward:before {
    content: "\f048";
}
.icon-fast-backward:before {
    content: "\f049";
}
.icon-backward:before {
    content: "\f04a";
}
.icon-play:before {
    content: "\f04b";
}
.icon-pause:before {
    content: "\f04c";
}
.icon-stop:before {
    content: "\f04d";
}
.icon-forward:before {
    content: "\f04e";
}
.icon-fast-forward:before {
    content: "\f050";
}
.icon-step-forward:before {
    content: "\f051";
}
.icon-eject:before {
    content: "\f052";
}
.icon-chevron-left:before {
    content: "\f053";
}
.icon-chevron-right:before {
    content: "\f054";
}
.icon-plus-circle:before {
    content: "\f055";
}
.icon-minus-circle:before {
    content: "\f056";
}
.icon-times-circle:before {
    content: "\f057";
}
.icon-check-circle:before {
    content: "\f058";
}
.icon-question-circle:before {
    content: "\f059";
}
.icon-info-circle:before {
    content: "\f05a";
}
.icon-crosshairs:before {
    content: "\f05b";
}
.icon-times-circle-o:before {
    content: "\f05c";
}
.icon-check-circle-o:before {
    content: "\f05d";
}
.icon-ban:before {
    content: "\f05e";
}
.icon-arrow-left:before {
    content: "\f060";
}
.icon-arrow-right:before {
    content: "\f061";
}
.icon-arrow-up:before {
    content: "\f062";
}
.icon-arrow-down:before {
    content: "\f063";
}
.icon-mail-forward:before {
    content: "\f064";
}
.icon-expand:before {
    content: "\f065";
}
.icon-compress:before {
    content: "\f066";
}
.icon-plus:before {
    content: "\f067";
}
.icon-minus:before {
    content: "\f068";
}
.icon-asterisk:before {
    content: "\f069";
}
.icon-exclamation-circle:before {
    content: "\f06a";
}
.icon-gift:before {
    content: "\f06b";
}
.icon-leaf:before {
    content: "\f06c";
}
.icon-fire:before {
    content: "\f06d";
}
.icon-eye:before {
    content: "\f06e";
}
.icon-eye-slash:before {
    content: "\f070";
}
.icon-exclamation-triangle:before {
    content: "\f071";
}
.icon-plane:before {
    content: "\f072";
}
.icon-calendar:before {
    content: "\f073";
}
.icon-random:before {
    content: "\f074";
}
.icon-comment:before {
    content: "\f075";
}
.icon-magnet:before {
    content: "\f076";
}
.icon-chevron-up:before {
    content: "\f077";
}
.icon-chevron-down:before {
    content: "\f078";
}
.icon-retweet:before {
    content: "\f079";
}
.icon-shopping-cart:before {
    content: "\f07a";
}
.icon-folder:before {
    content: "\f07b";
}
.icon-folder-open:before {
    content: "\f07c";
}
.icon-arrows-v:before {
    content: "\f07d";
}
.icon-arrows-h:before {
    content: "\f07e";
}
.icon-bar-chart:before {
    content: "\f080";
}
.icon-twitter-square:before {
    content: "\f081";
}
.icon-facebook-square:before {
    content: "\f082";
}
.icon-camera-retro:before {
    content: "\f083";
}
.icon-key:before {
    content: "\f084";
}
.icon-cogs:before {
    content: "\f085";
}
.icon-comments:before {
    content: "\f086";
}
.icon-thumbs-o-up:before {
    content: "\f087";
}
.icon-thumbs-o-down:before {
    content: "\f088";
}
.icon-star-half:before {
    content: "\f089";
}
.icon-heart-o:before {
    content: "\f08a";
}
.icon-sign-out:before {
    content: "\f08b";
}
.icon-linkedin-square:before {
    content: "\f08c";
}
.icon-thumb-tack:before {
    content: "\f08d";
}
.icon-external-link:before {
    content: "\f08e";
}
.icon-sign-in:before {
    content: "\f090";
}
.icon-trophy:before {
    content: "\f091";
}
.icon-github-square:before {
    content: "\f092";
}
.icon-upload:before {
    content: "\f093";
}
.icon-lemon-o:before {
    content: "\f094";
}
.icon-phone:before {
    content: "\f095";
}
.icon-square-o:before {
    content: "\f096";
}
.icon-bookmark-o:before {
    content: "\f097";
}
.icon-phone-square:before {
    content: "\f098";
}
.icon-twitter:before {
    content: "\f099";
}
.icon-facebook:before {
    content: "\f09a";
}
.icon-github:before {
    content: "\f09b";
}
.icon-unlock:before {
    content: "\f09c";
}
.icon-credit-card:before {
    content: "\f09d";
}
.icon-feed:before {
    content: "\f09e";
}
.icon-hdd-o:before {
    content: "\f0a0";
}
.icon-bullhorn:before {
    content: "\f0a1";
}
.icon-bell-o:before {
    content: "\f0a2";
}
.icon-certificate:before {
    content: "\f0a3";
}
.icon-hand-o-right:before {
    content: "\f0a4";
}
.icon-hand-o-left:before {
    content: "\f0a5";
}
.icon-hand-o-up:before {
    content: "\f0a6";
}
.icon-hand-o-down:before {
    content: "\f0a7";
}
.icon-arrow-circle-left:before {
    content: "\f0a8";
}
.icon-arrow-circle-right:before {
    content: "\f0a9";
}
.icon-arrow-circle-up:before {
    content: "\f0aa";
}
.icon-arrow-circle-down:before {
    content: "\f0ab";
}
.icon-globe:before {
    content: "\f0ac";
}
.icon-wrench:before {
    content: "\f0ad";
}
.icon-tasks:before {
    content: "\f0ae";
}
.icon-filter:before {
    content: "\f0b0";
}
.icon-briefcase:before {
    content: "\f0b1";
}
.icon-arrows-alt:before {
    content: "\f0b2";
}
.icon-group:before {
    content: "\f0c0";
}
.icon-chain:before {
    content: "\f0c1";
}
.icon-cloud:before {
    content: "\f0c2";
}
.icon-flask:before {
    content: "\f0c3";
}
.icon-cut:before {
    content: "\f0c4";
}
.icon-copy:before {
    content: "\f0c5";
}
.icon-paperclip:before {
    content: "\f0c6";
}
.icon-floppy-o:before {
    content: "\f0c7";
}
.icon-square:before {
    content: "\f0c8";
}
.icon-bars:before {
    content: "\f0c9";
}
.icon-list-ul:before {
    content: "\f0ca";
}
.icon-list-ol:before {
    content: "\f0cb";
}
.icon-strikethrough:before {
    content: "\f0cc";
}
.icon-underline:before {
    content: "\f0cd";
}
.icon-table:before {
    content: "\f0ce";
}
.icon-magic:before {
    content: "\f0d0";
}
.icon-truck:before {
    content: "\f0d1";
}
.icon-pinterest:before {
    content: "\f0d2";
}
.icon-pinterest-square:before {
    content: "\f0d3";
}
.icon-google-plus-square:before {
    content: "\f0d4";
}
.icon-google-plus:before {
    content: "\f0d5";
}
.icon-money:before {
    content: "\f0d6";
}
.icon-caret-down:before {
    content: "\f0d7";
}
.icon-caret-up:before {
    content: "\f0d8";
}
.icon-caret-left:before {
    content: "\f0d9";
}
.icon-caret-right:before {
    content: "\f0da";
}
.icon-columns:before {
    content: "\f0db";
}
.icon-sort:before {
    content: "\f0dc";
}
.icon-sort-desc:before {
    content: "\f0dd";
}
.icon-sort-asc:before {
    content: "\f0de";
}
.icon-envelope:before {
    content: "\f0e0";
}
.icon-linkedin:before {
    content: "\f0e1";
}
.icon-rotate-left:before {
    content: "\f0e2";
}
.icon-gavel:before {
    content: "\f0e3";
}
.icon-dashboard:before {
    content: "\f0e4";
}
.icon-comment-o:before {
    content: "\f0e5";
}
.icon-comments-o:before {
    content: "\f0e6";
}
.icon-bolt:before {
    content: "\f0e7";
}
.icon-sitemap:before {
    content: "\f0e8";
}
.icon-umbrella:before {
    content: "\f0e9";
}
.icon-clipboard:before {
    content: "\f0ea";
}
.icon-lightbulb-o:before {
    content: "\f0eb";
}
.icon-exchange:before {
    content: "\f0ec";
}
.icon-cloud-download:before {
    content: "\f0ed";
}
.icon-cloud-upload:before {
    content: "\f0ee";
}
.icon-user-md:before {
    content: "\f0f0";
}
.icon-stethoscope:before {
    content: "\f0f1";
}
.icon-suitcase:before {
    content: "\f0f2";
}
.icon-bell:before {
    content: "\f0f3";
}
.icon-coffee:before {
    content: "\f0f4";
}
.icon-cutlery:before {
    content: "\f0f5";
}
.icon-file-text-o:before {
    content: "\f0f6";
}
.icon-building-o:before {
    content: "\f0f7";
}
.icon-hospital-o:before {
    content: "\f0f8";
}
.icon-ambulance:before {
    content: "\f0f9";
}
.icon-medkit:before {
    content: "\f0fa";
}
.icon-fighter-jet:before {
    content: "\f0fb";
}
.icon-beer:before {
    content: "\f0fc";
}
.icon-h-square:before {
    content: "\f0fd";
}
.icon-plus-square:before {
    content: "\f0fe";
}
.icon-angle-double-left:before {
    content: "\f100";
}
.icon-angle-double-right:before {
    content: "\f101";
}
.icon-angle-double-up:before {
    content: "\f102";
}
.icon-angle-double-down:before {
    content: "\f103";
}
.icon-angle-left:before {
    content: "\f104";
}
.icon-angle-right:before {
    content: "\f105";
}
.icon-angle-up:before {
    content: "\f106";
}
.icon-angle-down:before {
    content: "\f107";
}
.icon-desktop:before {
    content: "\f108";
}
.icon-laptop:before {
    content: "\f109";
}
.icon-tablet:before {
    content: "\f10a";
}
.icon-mobile:before {
    content: "\f10b";
}
.icon-circle-o:before {
    content: "\f10c";
}
.icon-quote-left:before {
    content: "\f10d";
}
.icon-quote-right:before {
    content: "\f10e";
}
.icon-spinner:before {
    content: "\f110";
}
.icon-circle:before {
    content: "\f111";
}
.icon-mail-reply:before {
    content: "\f112";
}
.icon-github-alt:before {
    content: "\f113";
}
.icon-folder-o:before {
    content: "\f114";
}
.icon-folder-open-o:before {
    content: "\f115";
}
.icon-smile-o:before {
    content: "\f118";
}
.icon-frown-o:before {
    content: "\f119";
}
.icon-meh-o:before {
    content: "\f11a";
}
.icon-gamepad:before {
    content: "\f11b";
}
.icon-keyboard-o:before {
    content: "\f11c";
}
.icon-flag-o:before {
    content: "\f11d";
}
.icon-flag-checkered:before {
    content: "\f11e";
}
.icon-terminal:before {
    content: "\f120";
}
.icon-code:before {
    content: "\f121";
}
.icon-mail-reply-all:before {
    content: "\f122";
}
.icon-star-half-empty:before {
    content: "\f123";
}
.icon-location-arrow:before {
    content: "\f124";
}
.icon-crop:before {
    content: "\f125";
}
.icon-code-fork:before {
    content: "\f126";
}
.icon-chain-broken:before {
    content: "\f127";
}
.icon-question:before {
    content: "\f128";
}
.icon-info:before {
    content: "\f129";
}
.icon-exclamation:before {
    content: "\f12a";
}
.icon-superscript:before {
    content: "\f12b";
}
.icon-subscript:before {
    content: "\f12c";
}
.icon-eraser:before {
    content: "\f12d";
}
.icon-puzzle-piece:before {
    content: "\f12e";
}
.icon-microphone:before {
    content: "\f130";
}
.icon-microphone-slash:before {
    content: "\f131";
}
.icon-shield:before {
    content: "\f132";
}
.icon-calendar-o:before {
    content: "\f133";
}
.icon-fire-extinguisher:before {
    content: "\f134";
}
.icon-rocket:before {
    content: "\f135";
}
.icon-maxcdn:before {
    content: "\f136";
}
.icon-chevron-circle-left:before {
    content: "\f137";
}
.icon-chevron-circle-right:before {
    content: "\f138";
}
.icon-chevron-circle-up:before {
    content: "\f139";
}
.icon-chevron-circle-down:before {
    content: "\f13a";
}
.icon-html5:before {
    content: "\f13b";
}
.icon-css3:before {
    content: "\f13c";
}
.icon-anchor:before {
    content: "\f13d";
}
.icon-unlock-alt:before {
    content: "\f13e";
}
.icon-bullseye:before {
    content: "\f140";
}
.icon-ellipsis-h:before {
    content: "\f141";
}
.icon-ellipsis-v:before {
    content: "\f142";
}
.icon-rss-square:before {
    content: "\f143";
}
.icon-play-circle:before {
    content: "\f144";
}
.icon-ticket:before {
    content: "\f145";
}
.icon-minus-square:before {
    content: "\f146";
}
.icon-minus-square-o:before {
    content: "\f147";
}
.icon-level-up:before {
    content: "\f148";
}
.icon-level-down:before {
    content: "\f149";
}
.icon-check-square:before {
    content: "\f14a";
}
.icon-pencil-square:before {
    content: "\f14b";
}
.icon-external-link-square:before {
    content: "\f14c";
}
.icon-share-square:before {
    content: "\f14d";
}
.icon-compass:before {
    content: "\f14e";
}
.icon-caret-square-o-down:before {
    content: "\f150";
}
.icon-caret-square-o-up:before {
    content: "\f151";
}
.icon-caret-square-o-right:before {
    content: "\f152";
}
.icon-eur:before {
    content: "\f153";
}
.icon-gbp:before {
    content: "\f154";
}
.icon-dollar:before {
    content: "\f155";
}
.icon-inr:before {
    content: "\f156";
}
.icon-cny:before {
    content: "\f157";
}
.icon-rouble:before {
    content: "\f158";
}
.icon-krw:before {
    content: "\f159";
}
.icon-bitcoin:before {
    content: "\f15a";
}
.icon-file:before {
    content: "\f15b";
}
.icon-file-text:before {
    content: "\f15c";
}
.icon-sort-alpha-asc:before {
    content: "\f15d";
}
.icon-sort-alpha-desc:before {
    content: "\f15e";
}
.icon-sort-amount-asc:before {
    content: "\f160";
}
.icon-sort-amount-desc:before {
    content: "\f161";
}
.icon-sort-numeric-asc:before {
    content: "\f162";
}
.icon-sort-numeric-desc:before {
    content: "\f163";
}
.icon-thumbs-up:before {
    content: "\f164";
}
.icon-thumbs-down:before {
    content: "\f165";
}
.icon-youtube-square:before {
    content: "\f166";
}
.icon-youtube:before {
    content: "\f167";
}
.icon-xing:before {
    content: "\f168";
}
.icon-xing-square:before {
    content: "\f169";
}
.icon-youtube-play:before {
    content: "\f16a";
}
.icon-dropbox:before {
    content: "\f16b";
}
.icon-stack-overflow:before {
    content: "\f16c";
}
.icon-instagram:before {
    content: "\f16d";
}
.icon-flickr:before {
    content: "\f16e";
}
.icon-adn:before {
    content: "\f170";
}
.icon-bitbucket:before {
    content: "\f171";
}
.icon-bitbucket-square:before {
    content: "\f172";
}
.icon-tumblr:before {
    content: "\f173";
}
.icon-tumblr-square:before {
    content: "\f174";
}
.icon-long-arrow-down:before {
    content: "\f175";
}
.icon-long-arrow-up:before {
    content: "\f176";
}
.icon-long-arrow-left:before {
    content: "\f177";
}
.icon-long-arrow-right:before {
    content: "\f178";
}
.icon-apple:before {
    content: "\f179";
}
.icon-windows:before {
    content: "\f17a";
}
.icon-android:before {
    content: "\f17b";
}
.icon-linux:before {
    content: "\f17c";
}
.icon-dribbble:before {
    content: "\f17d";
}
.icon-skype:before {
    content: "\f17e";
}
.icon-foursquare:before {
    content: "\f180";
}
.icon-trello:before {
    content: "\f181";
}
.icon-female:before {
    content: "\f182";
}
.icon-male:before {
    content: "\f183";
}
.icon-gittip:before {
    content: "\f184";
}
.icon-sun-o:before {
    content: "\f185";
}
.icon-moon-o:before {
    content: "\f186";
}
.icon-archive:before {
    content: "\f187";
}
.icon-bug:before {
    content: "\f188";
}
.icon-vk:before {
    content: "\f189";
}
.icon-weibo:before {
    content: "\f18a";
}
.icon-renren:before {
    content: "\f18b";
}
.icon-pagelines:before {
    content: "\f18c";
}
.icon-stack-exchange:before {
    content: "\f18d";
}
.icon-arrow-circle-o-right:before {
    content: "\f18e";
}
.icon-arrow-circle-o-left:before {
    content: "\f190";
}
.icon-caret-square-o-left:before {
    content: "\f191";
}
.icon-dot-circle-o:before {
    content: "\f192";
}
.icon-wheelchair:before {
    content: "\f193";
}
.icon-vimeo-square:before {
    content: "\f194";
}
.icon-try:before {
    content: "\f195";
}
.icon-plus-square-o:before {
    content: "\f196";
}
.icon-space-shuttle:before {
    content: "\f197";
}
.icon-slack:before {
    content: "\f198";
}
.icon-envelope-square:before {
    content: "\f199";
}
.icon-wordpress:before {
    content: "\f19a";
}
.icon-openid:before {
    content: "\f19b";
}
.icon-bank:before {
    content: "\f19c";
}
.icon-graduation-cap:before {
    content: "\f19d";
}
.icon-yahoo:before {
    content: "\f19e";
}
.icon-google:before {
    content: "\f1a0";
}
.icon-reddit:before {
    content: "\f1a1";
}
.icon-reddit-square:before {
    content: "\f1a2";
}
.icon-stumbleupon-circle:before {
    content: "\f1a3";
}
.icon-stumbleupon:before {
    content: "\f1a4";
}
.icon-delicious:before {
    content: "\f1a5";
}
.icon-digg:before {
    content: "\f1a6";
}
.icon-pied-piper-pp:before {
    content: "\f1a7";
}
.icon-pied-piper-alt:before {
    content: "\f1a8";
}
.icon-drupal:before {
    content: "\f1a9";
}
.icon-joomla:before {
    content: "\f1aa";
}
.icon-language:before {
    content: "\f1ab";
}
.icon-fax:before {
    content: "\f1ac";
}
.icon-building:before {
    content: "\f1ad";
}
.icon-child:before {
    content: "\f1ae";
}
.icon-paw:before {
    content: "\f1b0";
}
.icon-spoon:before {
    content: "\f1b1";
}
.icon-cube:before {
    content: "\f1b2";
}
.icon-cubes:before {
    content: "\f1b3";
}
.icon-behance:before {
    content: "\f1b4";
}
.icon-behance-square:before {
    content: "\f1b5";
}
.icon-steam:before {
    content: "\f1b6";
}
.icon-steam-square:before {
    content: "\f1b7";
}
.icon-recycle:before {
    content: "\f1b8";
}
.icon-automobile:before {
    content: "\f1b9";
}
.icon-cab:before {
    content: "\f1ba";
}
.icon-tree:before {
    content: "\f1bb";
}
.icon-spotify:before {
    content: "\f1bc";
}
.icon-deviantart:before {
    content: "\f1bd";
}
.icon-soundcloud:before {
    content: "\f1be";
}
.icon-database:before {
    content: "\f1c0";
}
.icon-file-pdf-o:before {
    content: "\f1c1";
}
.icon-file-word-o:before {
    content: "\f1c2";
}
.icon-file-excel-o:before {
    content: "\f1c3";
}
.icon-file-powerpoint-o:before {
    content: "\f1c4";
}
.icon-file-image-o:before {
    content: "\f1c5";
}
.icon-file-archive-o:before {
    content: "\f1c6";
}
.icon-file-audio-o:before {
    content: "\f1c7";
}
.icon-file-movie-o:before {
    content: "\f1c8";
}
.icon-file-code-o:before {
    content: "\f1c9";
}
.icon-vine:before {
    content: "\f1ca";
}
.icon-codepen:before {
    content: "\f1cb";
}
.icon-jsfiddle:before {
    content: "\f1cc";
}
.icon-life-bouy:before {
    content: "\f1cd";
}
.icon-circle-o-notch:before {
    content: "\f1ce";
}
.icon-ra:before {
    content: "\f1d0";
}
.icon-empire:before {
    content: "\f1d1";
}
.icon-git-square:before {
    content: "\f1d2";
}
.icon-git:before {
    content: "\f1d3";
}
.icon-hacker-news:before {
    content: "\f1d4";
}
.icon-tencent-weibo:before {
    content: "\f1d5";
}
.icon-qq:before {
    content: "\f1d6";
}
.icon-wechat:before {
    content: "\f1d7";
}
.icon-paper-plane:before {
    content: "\f1d8";
}
.icon-paper-plane-o:before {
    content: "\f1d9";
}
.icon-history:before {
    content: "\f1da";
}
.icon-circle-thin:before {
    content: "\f1db";
}
.icon-header:before {
    content: "\f1dc";
}
.icon-paragraph:before {
    content: "\f1dd";
}
.icon-sliders:before {
    content: "\f1de";
}
.icon-share-alt:before {
    content: "\f1e0";
}
.icon-share-alt-square:before {
    content: "\f1e1";
}
.icon-bomb:before {
    content: "\f1e2";
}
.icon-futbol-o:before {
    content: "\f1e3";
}
.icon-tty:before {
    content: "\f1e4";
}
.icon-binoculars:before {
    content: "\f1e5";
}
.icon-plug:before {
    content: "\f1e6";
}
.icon-slideshare:before {
    content: "\f1e7";
}
.icon-twitch:before {
    content: "\f1e8";
}
.icon-yelp:before {
    content: "\f1e9";
}
.icon-newspaper-o:before {
    content: "\f1ea";
}
.icon-wifi:before {
    content: "\f1eb";
}
.icon-calculator:before {
    content: "\f1ec";
}
.icon-paypal:before {
    content: "\f1ed";
}
.icon-google-wallet:before {
    content: "\f1ee";
}
.icon-cc-visa:before {
    content: "\f1f0";
}
.icon-cc-mastercard:before {
    content: "\f1f1";
}
.icon-cc-discover:before {
    content: "\f1f2";
}
.icon-cc-amex:before {
    content: "\f1f3";
}
.icon-cc-paypal:before {
    content: "\f1f4";
}
.icon-cc-stripe:before {
    content: "\f1f5";
}
.icon-bell-slash:before {
    content: "\f1f6";
}
.icon-bell-slash-o:before {
    content: "\f1f7";
}
.icon-trash:before {
    content: "\f1f8";
}
.icon-copyright:before {
    content: "\f1f9";
}
.icon-at:before {
    content: "\f1fa";
}
.icon-eyedropper:before {
    content: "\f1fb";
}
.icon-paint-brush:before {
    content: "\f1fc";
}
.icon-birthday-cake:before {
    content: "\f1fd";
}
.icon-area-chart:before {
    content: "\f1fe";
}
.icon-pie-chart:before {
    content: "\f200";
}
.icon-line-chart:before {
    content: "\f201";
}
.icon-lastfm:before {
    content: "\f202";
}
.icon-lastfm-square:before {
    content: "\f203";
}
.icon-toggle-off:before {
    content: "\f204";
}
.icon-toggle-on:before {
    content: "\f205";
}
.icon-bicycle:before {
    content: "\f206";
}
.icon-bus:before {
    content: "\f207";
}
.icon-ioxhost:before {
    content: "\f208";
}
.icon-angellist:before {
    content: "\f209";
}
.icon-cc:before {
    content: "\f20a";
}
.icon-ils:before {
    content: "\f20b";
}
.icon-meanpath:before {
    content: "\f20c";
}
.icon-buysellads:before {
    content: "\f20d";
}
.icon-connectdevelop:before {
    content: "\f20e";
}
.icon-dashcube:before {
    content: "\f210";
}
.icon-forumbee:before {
    content: "\f211";
}
.icon-leanpub:before {
    content: "\f212";
}
.icon-sellsy:before {
    content: "\f213";
}
.icon-shirtsinbulk:before {
    content: "\f214";
}
.icon-simplybuilt:before {
    content: "\f215";
}
.icon-skyatlas:before {
    content: "\f216";
}
.icon-cart-plus:before {
    content: "\f217";
}
.icon-cart-arrow-down:before {
    content: "\f218";
}
.icon-diamond:before {
    content: "\f219";
}
.icon-ship:before {
    content: "\f21a";
}
.icon-user-secret:before {
    content: "\f21b";
}
.icon-motorcycle:before {
    content: "\f21c";
}
.icon-street-view:before {
    content: "\f21d";
}
.icon-heartbeat:before {
    content: "\f21e";
}
.icon-venus:before {
    content: "\f221";
}
.icon-mars:before {
    content: "\f222";
}
.icon-mercury:before {
    content: "\f223";
}
.icon-intersex:before {
    content: "\f224";
}
.icon-transgender-alt:before {
    content: "\f225";
}
.icon-venus-double:before {
    content: "\f226";
}
.icon-mars-double:before {
    content: "\f227";
}
.icon-venus-mars:before {
    content: "\f228";
}
.icon-mars-stroke:before {
    content: "\f229";
}
.icon-mars-stroke-v:before {
    content: "\f22a";
}
.icon-mars-stroke-h:before {
    content: "\f22b";
}
.icon-neuter:before {
    content: "\f22c";
}
.icon-genderless:before {
    content: "\f22d";
}
.icon-facebook-official:before {
    content: "\f230";
}
.icon-pinterest-p:before {
    content: "\f231";
}
.icon-whatsapp:before {
    content: "\f232";
}
.icon-server:before {
    content: "\f233";
}
.icon-user-plus:before {
    content: "\f234";
}
.icon-user-times:before {
    content: "\f235";
}
.icon-bed:before {
    content: "\f236";
}
.icon-viacoin:before {
    content: "\f237";
}
.icon-train:before {
    content: "\f238";
}
.icon-subway:before {
    content: "\f239";
}
.icon-medium:before {
    content: "\f23a";
}
.icon-y-combinator:before {
    content: "\f23b";
}
.icon-optin-monster:before {
    content: "\f23c";
}
.icon-opencart:before {
    content: "\f23d";
}
.icon-expeditedssl:before {
    content: "\f23e";
}
.icon-battery:before {
    content: "\f240";
}
.icon-battery-3:before {
    content: "\f241";
}
.icon-battery-2:before {
    content: "\f242";
}
.icon-battery-1:before {
    content: "\f243";
}
.icon-battery-0:before {
    content: "\f244";
}
.icon-mouse-pointer:before {
    content: "\f245";
}
.icon-i-cursor:before {
    content: "\f246";
}
.icon-object-group:before {
    content: "\f247";
}
.icon-object-ungroup:before {
    content: "\f248";
}
.icon-sticky-note:before {
    content: "\f249";
}
.icon-sticky-note-o:before {
    content: "\f24a";
}
.icon-cc-jcb:before {
    content: "\f24b";
}
.icon-cc-diners-club:before {
    content: "\f24c";
}
.icon-clone:before {
    content: "\f24d";
}
.icon-balance-scale:before {
    content: "\f24e";
}
.icon-hourglass-o:before {
    content: "\f250";
}
.icon-hourglass-1:before {
    content: "\f251";
}
.icon-hourglass-2:before {
    content: "\f252";
}
.icon-hourglass-3:before {
    content: "\f253";
}
.icon-hourglass:before {
    content: "\f254";
}
.icon-hand-grab-o:before {
    content: "\f255";
}
.icon-hand-paper-o:before {
    content: "\f256";
}
.icon-hand-scissors-o:before {
    content: "\f257";
}
.icon-hand-lizard-o:before {
    content: "\f258";
}
.icon-hand-spock-o:before {
    content: "\f259";
}
.icon-hand-pointer-o:before {
    content: "\f25a";
}
.icon-hand-peace-o:before {
    content: "\f25b";
}
.icon-trademark:before {
    content: "\f25c";
}
.icon-registered:before {
    content: "\f25d";
}
.icon-creative-commons:before {
    content: "\f25e";
}
.icon-gg:before {
    content: "\f260";
}
.icon-gg-circle:before {
    content: "\f261";
}
.icon-tripadvisor:before {
    content: "\f262";
}
.icon-odnoklassniki:before {
    content: "\f263";
}
.icon-odnoklassniki-square:before {
    content: "\f264";
}
.icon-get-pocket:before {
    content: "\f265";
}
.icon-wikipedia-w:before {
    content: "\f266";
}
.icon-safari:before {
    content: "\f267";
}
.icon-chrome:before {
    content: "\f268";
}
.icon-firefox:before {
    content: "\f269";
}
.icon-opera:before {
    content: "\f26a";
}
.icon-internet-explorer:before {
    content: "\f26b";
}
.icon-television:before {
    content: "\f26c";
}
.icon-contao:before {
    content: "\f26d";
}
.icon-500px:before {
    content: "\f26e";
}
.icon-amazon:before {
    content: "\f270";
}
.icon-calendar-plus-o:before {
    content: "\f271";
}
.icon-calendar-minus-o:before {
    content: "\f272";
}
.icon-calendar-times-o:before {
    content: "\f273";
}
.icon-calendar-check-o:before {
    content: "\f274";
}
.icon-industry:before {
    content: "\f275";
}
.icon-map-pin:before {
    content: "\f276";
}
.icon-map-signs:before {
    content: "\f277";
}
.icon-map-o:before {
    content: "\f278";
}
.icon-map:before {
    content: "\f279";
}
.icon-commenting:before {
    content: "\f27a";
}
.icon-commenting-o:before {
    content: "\f27b";
}
.icon-houzz:before {
    content: "\f27c";
}
.icon-vimeo:before {
    content: "\f27d";
}
.icon-black-tie:before {
    content: "\f27e";
}
.icon-fonticons:before {
    content: "\f280";
}
.icon-reddit-alien:before {
    content: "\f281";
}
.icon-edge:before {
    content: "\f282";
}
.icon-credit-card-alt:before {
    content: "\f283";
}
.icon-codiepie:before {
    content: "\f284";
}
.icon-modx:before {
    content: "\f285";
}
.icon-fort-awesome:before {
    content: "\f286";
}
.icon-usb:before {
    content: "\f287";
}
.icon-product-hunt:before {
    content: "\f288";
}
.icon-mixcloud:before {
    content: "\f289";
}
.icon-scribd:before {
    content: "\f28a";
}
.icon-pause-circle:before {
    content: "\f28b";
}
.icon-pause-circle-o:before {
    content: "\f28c";
}
.icon-stop-circle:before {
    content: "\f28d";
}
.icon-stop-circle-o:before {
    content: "\f28e";
}
.icon-shopping-bag:before {
    content: "\f290";
}
.icon-shopping-basket:before {
    content: "\f291";
}
.icon-hashtag:before {
    content: "\f292";
}
.icon-bluetooth:before {
    content: "\f293";
}
.icon-bluetooth-b:before {
    content: "\f294";
}
.icon-percent:before {
    content: "\f295";
}
.icon-gitlab:before {
    content: "\f296";
}
.icon-wpbeginner:before {
    content: "\f297";
}
.icon-wpforms:before {
    content: "\f298";
}
.icon-envira:before {
    content: "\f299";
}
.icon-universal-access:before {
    content: "\f29a";
}
.icon-wheelchair-alt:before {
    content: "\f29b";
}
.icon-question-circle-o:before {
    content: "\f29c";
}
.icon-blind:before {
    content: "\f29d";
}
.icon-audio-description:before {
    content: "\f29e";
}
.icon-volume-control-phone:before {
    content: "\f2a0";
}
.icon-braille:before {
    content: "\f2a1";
}
.icon-assistive-listening-systems:before {
    content: "\f2a2";
}
.icon-american-sign-language-interpreting:before {
    content: "\f2a3";
}
.icon-deaf:before {
    content: "\f2a4";
}
.icon-glide:before {
    content: "\f2a5";
}
.icon-glide-g:before {
    content: "\f2a6";
}
.icon-sign-language:before {
    content: "\f2a7";
}
.icon-low-vision:before {
    content: "\f2a8";
}
.icon-viadeo:before {
    content: "\f2a9";
}
.icon-viadeo-square:before {
    content: "\f2aa";
}
.icon-snapchat:before {
    content: "\f2ab";
}
.icon-snapchat-ghost:before {
    content: "\f2ac";
}
.icon-snapchat-square:before {
    content: "\f2ad";
}
.icon-pied-piper:before {
    content: "\f2ae";
}
.icon-first-order:before {
    content: "\f2b0";
}
.icon-yoast:before {
    content: "\f2b1";
}
.icon-themeisle:before {
    content: "\f2b2";
}
.icon-google-plus-circle:before {
    content: "\f2b3";
}
.icon-fa:before {
    content: "\f2b4";
}
.icon-handshake-o:before {
    content: "\f2b5";
}
.icon-envelope-open:before {
    content: "\f2b6";
}
.icon-envelope-open-o:before {
    content: "\f2b7";
}
.icon-linode:before {
    content: "\f2b8";
}
.icon-address-book:before {
    content: "\f2b9";
}
.icon-address-book-o:before {
    content: "\f2ba";
}
.icon-address-card:before {
    content: "\f2bb";
}
.icon-address-card-o:before {
    content: "\f2bc";
}
.icon-user-circle:before {
    content: "\f2bd";
}
.icon-user-circle-o:before {
    content: "\f2be";
}
.icon-user-o:before {
    content: "\f2c0";
}
.icon-id-badge:before {
    content: "\f2c1";
}
.icon-drivers-license:before {
    content: "\f2c2";
}
.icon-drivers-license-o:before {
    content: "\f2c3";
}
.icon-quora:before {
    content: "\f2c4";
}
.icon-free-code-camp:before {
    content: "\f2c5";
}
.icon-telegram:before {
    content: "\f2c6";
}
.icon-thermometer:before {
    content: "\f2c7";
}
.icon-thermometer-3:before {
    content: "\f2c8";
}
.icon-thermometer-2:before {
    content: "\f2c9";
}
.icon-thermometer-1:before {
    content: "\f2ca";
}
.icon-thermometer-0:before {
    content: "\f2cb";
}
.icon-shower:before {
    content: "\f2cc";
}
.icon-bath:before {
    content: "\f2cd";
}
.icon-podcast:before {
    content: "\f2ce";
}
.icon-window-maximize:before {
    content: "\f2d0";
}
.icon-window-minimize:before {
    content: "\f2d1";
}
.icon-window-restore:before {
    content: "\f2d2";
}
.icon-times-rectangle:before {
    content: "\f2d3";
}
.icon-times-rectangle-o:before {
    content: "\f2d4";
}
.icon-bandcamp:before {
    content: "\f2d5";
}
.icon-grav:before {
    content: "\f2d6";
}
.icon-etsy:before {
    content: "\f2d7";
}
.icon-imdb:before {
    content: "\f2d8";
}
.icon-ravelry:before {
    content: "\f2d9";
}
.icon-eercast:before {
    content: "\f2da";
}
.icon-microchip:before {
    content: "\f2db";
}
.icon-snowflake-o:before {
    content: "\f2dc";
}
.icon-superpowers:before {
    content: "\f2dd";
}
.icon-wpexplorer:before {
    content: "\f2de";
}
.icon-meetup:before {
    content: "\f2e0";
}
img,
svg {
    max-width: 100%;
    height: auto;
}
a:hover img {
    opacity: 0.85;
}
a:focus,
a:hover {
    text-decoration: none;
}
a,
a:active,
a:focus,
button,
embed,
object {
    outline: 0;
}
button,
input[type="submit"] {
    cursor: pointer;
}
input::-moz-focus-inner {
    border: 0;
}
* {
    box-sizing: border-box;
}
iframe {
    position: relative;
}
.mejs-container {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
}
.mejs-container,
.mejs-container .mejs-controls,
.mejs-embed,
.mejs-embed body {
    background: #0b26ac !important;
}
.post-password-required .mejs-container,
.post-password-required .mejs-container .mejs-controls,
.post-password-required .mejs-embed,
.post-password-required .mejs-embed body {
    background: #f6c40e !important;
}
.post-password-required .mejs-time-current {
    background: #a32424 !important;
}
.sirvelia_pl .mejs-container,
.sirvelia_pl .mejs-container .mejs-controls,
.sirvelia_pl .mejs-embed,
.sirvelia_pl .mejs-embed body {
    background: transparent !important;
    position: absolute !important;
    top: 21% !important;
    left: 15%;
}
.sirvelia_pl .mejs-currenttime,
.sirvelia_pl .mejs-duration,
.sirvelia_pl .mejs-horizontal-volume-slider,
.sirvelia_pl .mejs-time-rail,
.sirvelia_pl .mejs-volume-button {
    display: none !important;
}
.sirvelia_pl .mejs-playpause-button button {
    margin: 0 !important;
    background-size: 1900px !important;
    height: 80px !important;
    width: 80px !important;
    position: absolute;
    top: 14%;
    left: 14%;
}
.sirvelia_pl .mejs-playpause-button {
    position: relative !important;
    height: 120px !important;
    width: 120px !important;
    border-radius: 50%;
    background: rgba(11, 38, 172, 0.6);
}
.sirvelia_pl .mejs-pause button {
    background-position: -100px 0 !important;
}
.sirvelia_pl .wp-playlist-sirvelia {
    position: relative;
}
/* Espai sota un embed (oct. 2026).
   Hi havia −8px, un marge NEGATIU: dos embeds seguits se superposaven i, quan
   anava seguit del reproductor d'àudio, el buit es quedava en 8px en comptes
   dels 16 que deixa qualsevol altre bloc.
   Ara és el mateix valor que `.audio-embd`: 16px. Un embed separa igual que un
   reproductor, surti a la categoria que surti. */
.sirvelia-embed {
    margin-bottom: 1rem;
}
/* L'iframe ha de ser `block`.
   De sèrie un iframe és `inline`, o sigui que el navegador el tracta com una
   lletra dins d'una línia de text i li deixa a sota l'espai del descens de la
   tipografia. Mesurat: 6,4px de buit MORT dins del bloc, per sota del vídeo.
   Amb això el marge de 16px de dalt es convertia en 22,4px visibles després
   d'aquell embed i en 16 després d'un altre, segons com l'iframe omplís el seu
   bloc. Les caixes deien 16 a tot arreu i l'ull veia dues mesures diferents.
   Verificat en viu: de 22,4 a 16. */
.sirvelia-embed iframe {
    display: block;
}
.sirvelia-embed .mejs-container,
.sirvelia-embed .mejs-overlay.load,
.sirvelia-embed .wp-video,
.sirvelia-embed video.wp-video-shortcode {
    width: 100% !important;
    height: 100% !important;
}
.sirvelia-embed .mejs-container {
    padding-top: 56.25%;
}
.sirvelia-embed .wp-video,
.sirvelia-embed video.wp-video-shortcode {
    max-width: 100% !important;
}
.sirvelia-embed video.wp-video-shortcode {
    position: relative;
}
.sirvelia-embed .mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.sirvelia-embed .mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}
.sirvelia-embed .mejs-overlay-button {
    background: none;
    border-color: transparent transparent transparent hsla(0, 0%, 100%, 0.8);
    border-style: solid;
    border-width: 37px 0 37px 60px;
    height: 74px;
    position: relative;
}
.sirvelia-embed .mejs-overlay-button:before {
    content: "";
    display: block;
    position: absolute;
    width: 110px;
    height: 110px;
    left: -90px;
    top: -55px;
    border-radius: 50%;
    background: rgba(11, 38, 172, 0.6);
    z-index: -1;
}
/* Bunny tenia marges propis i en PERCENTATGE (−1% a dalt, 3,5% a baix), de
   manera que l'espai creixia o s'encongia amb l'amplada de la pantalla i no
   coincidia amb cap altre embed: mesurat a 1280px donava 8,9px per sobre i
   24,7px per sota, on la resta en tenen 16.
   S'anul·len perquè hereti el comportament comú de `.sirvelia-embed`. */
.embed-bunny {
    margin-top: 0;
}
.slider-link:hover img {
    opacity: 1;
}
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block;
}
.lity-iframe-container iframe {
    margin: 0;
}
.lity {
    z-index: 50000;
}
main.main {
    padding-left: 0px;
    padding-right: 0px;
}
body,
html {
    min-height: 100%;
}
body {
    /* Fons il·lustrat — CENEFA (oct. 2026).
       El fitxer anterior (WEB-Surda-Background.webp, 1440px d'ample) era una
       il·lustració sencera que només encaixava per dalt i per baix: calia
       `repeat-y` i estirar-la a l'amplada de la finestra amb
       `background-size: 100% auto`, de manera que el dibuix canviava de mida
       segons la pantalla.
       Aquest fitxer és una rajola de patró de 577×701 que encaixa per les
       QUATRE vores. Comprovat mesurant el salt de color a les costures contra
       la variació interna del propi dibuix: vertical 0,75× i horitzontal 1,49×
       (per sota o molt a prop del soroll normal del traç, o sigui invisible).
       Per això ara:
         · `repeat` (les dues direccions) en comptes de `repeat-y`.
         · SENSE `background-size`: la rajola va a mida natural, així el traç
           es veu sempre igual de gros a qualsevol pantalla. Si s'hi posés
           `100%` es deformaria i es trencaria el patró.
       `fixed` es manté: el fons queda quiet mentre es fa scroll. */
    background: url(../images/background-web-surda-vanila.webp) repeat;
    background-color: white;
    background-attachment: fixed;
}
.icomoon {
    display: inline-block;
    font: normal normal normal 14px/1 icomoon;
    font-size: inherit;
    text-rendering: auto;
    margin: 8px 0;
}
.col-centered {
    float: none;
    margin: 0 auto;
}
ol,
p {
    color: #0b26ac;
    line-height: 150%;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
ol a,
p a {
    font-weight: 700;
}
/* .big: subtítol gran genèric (p, h2, h3...). 2026-07 */
.big {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: #0b26ac;
}
p.medium {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}
.back-title-store {
    font-family: BeniRegular;
    min-height: 8rem;
    color: #0b26ac;
    padding-top: 1.5rem;
    margin-bottom: 3rem;
}
.back-title {
    letter-spacing: 0.06rem;
    font-size: 3em !important;
    background: url(../images/back-title.png) no-repeat;
    background-size: cover;
    font-family: BeniRegular;
    background-position: bottom;
    min-height: 8rem;
    color: #0b26ac;
    padding-top: 1.5rem;
    margin-bottom: 3rem;
}

.back-title-search {
    background: url(../images/back-title-search.png) no-repeat;
    background-size: cover;
    font-family: BeniRegular;
    background-position: bottom;
    min-height: 8rem;
    color: #ffffff;
    padding-top: 1.5rem;
    margin-bottom: 3rem;
}

.single-cover {
    height: 150px;
    width: 100%;
    -o-object-position: center;
    object-position: center;
    -o-object-fit: contain;
    object-fit: contain;
    background: #ffffff;
    text-align: center;
    color: #0b26ac;
}
/* .white-wrap neutralitzat: el sagnat del contingut ara el dóna, de forma
   uniforme a tot el lloc, la regla de sota. Es manté la classe perquè el markup
   existent la referencia, però ja no aporta marge (evita doble sagnat). */
.white-wrap {
    margin: 0;
}
/* MARGES DEL CONTINGUT — uniforme a tota la web.
   Tota caixa .white de CONTINGUT (un <div>) dins de .entry-content sagna cap
   enfora (−20px) perquè el seu contingut intern quedi alineat amb la resta
   (imatges, text, player…) i el padding blanc sobresurti per igual a banda i banda.
   Cobreix tant les caixes filles directes com les niades (extra-audio, related-posts)
   o embolcallades en .white-wrap (mashup) → un sol mecanisme.
   Exclusions (NO sagnen):
   - pastilles/subtítols: <p>/<h2>/<h3> o amb .white-center
   - portades: <img class="white alternative-cover"> (no és <div>)
   - botó de descàrrega del sociallocker: <div class="text-center white"> dins d'un <button> */
.entry-content div.white:not(.white-center):not(.text-center),
header > div.white:not(.white-center) {
    margin-left: -20px;
    margin-right: -20px;
}



.white {
    background: #ffffff;
    margin: 1rem auto;
    padding: 20px;
    border-radius: 20px;
}
.white p:last-child {
    margin-bottom: 0;
}
/* Portada alternativa (oct. 2026).
   Hi havia `margin: 0 auto !important`, però no feia res: la imatge va dins
   d'un <a> i es quedava `display: inline`, i en un element inline els marges
   verticals no s'apliquen i els `auto` horitzontals valen 0. Resultat: la
   imatge no es centrava per aquesta via i, quan era l'últim element del post,
   la frase de l'asterisc li quedava enganxada a sota (0px de separació).
   Cal `display: block` perquè el marge inferior s'apliqui. Els marges
   horitzontals es deixen a 0 i NO a `auto`: amb `auto` la imatge es centraria,
   i no ha de canviar de posició respecte de com estava.
   NOTA SOBRE EL 18: és el valor que fa servir `.fan-art-cover` quan acaba en
   TEXT, on els 7,2px d'interlineat de l'última línia completen els 25px de
   buit visible. Sota una imatge no hi ha aquest interlineat, de manera que
   aquí 18px de marge són 18px de buit visible. Es deixa a 18 per decisió del
   client. */
.alternative-cover {
    display: block;
    margin: 0 0 18px !important;
}
.white-title {
    font-size: 3rem;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
}
.white-center {
    margin-left: auto;
    margin-right: auto;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    text-align: justify !important;
    text-align-last: center;
}
.blue-bg {
    background: #0b26ac;
}
.red-bg {
    background: #f6c40e;
}
.white-type,
.white-type p {
    color: #ffffff;
    padding-bottom: 0.5rem;
}
.extra-audios .extra-audio:last-child {
    /*margin-bottom: 2rem;*/
}
.globo .a {
    fill: #f6c40e;
}
.globo .b {
    fill: none;
    stroke: #0b26ac;
    stroke-miterlimit: 10;
}
.globo .c {
    fill: #ffffff;
    fill-rule: evenodd;
}
.globo .d {
    fill: #0b26ac;
}
.globo .e {
    stroke: #ffffff;
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
}
.globo .f {
    fill: #f6c40e;
}
.entry-title {
    font-size: 1.5rem;
    color: #0b26ac;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.entry-content {
    margin-top: 1rem;
}
hr.end {
    background: #0b26ac;
    height: 3px;
    border-radius: 1px;
    margin-bottom: 3rem;
    margin-top: 2rem;
}
.archive-grid-a .white hr.end {
    background: #0b26ac;
    height: 3px;
    border-radius: 1px;
    margin: 0;
    margin-top: 1.1rem!important;
    margin-bottom: 1.8rem;
}
/* Caixa blanca de la barra separadora.
   El `margin-top` era −0,7rem (−11,2px) i deixava la barra 60,8px per sota de
   l'última filera de la graella, quan entre fileres n'hi ha 72. Posat a 0, la
   distància passa a ser exactament 72 i la barra queda a la mateixa distància
   que qualsevol altra filera (verificat en viu a /mashup/).
   La separació de la barra fins a la pastilla groga de secció no es mou: la
   fixa el `margin-bottom` d'aquí amb el −2rem de `#all-mashups, #all-remixes`,
   i segueix donant 93px. */
.archive-grid-a .white:has(> hr.end) {
    margin-bottom: 2rem;
    margin-top: 0;
}
/* De moment NO s'aplica: la barra separadora de /set/ està comentada a
   archive-set.php, perquè aquella pàgina no té llistat de posts a sota (vegeu
   el comentari del template). Es manté la regla preparada per si sets passa
   algun dia al mateix model que /mashup/ i la barra torna. */
.post-type-archive-set .archive-grid-a .white:has(> hr.end) {
    margin-bottom: 1rem;
    margin-top: 0.4rem;
}
.mejs__container {
    max-width: 400px;
    margin: 0 auto;
}
.navigation {
    margin-top: 4rem;
}
/* ── Paginació (paginate_links) ── */
.navigation ul.page-numbers {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.navigation li {
    display: inline-flex;
}
.navigation li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.7rem;
    border-radius: 10px;
    font-family: BalginDisplayBold;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffffff;
    background-color: #0b26ac;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.navigation li .prev.page-numbers,
.navigation li .next.page-numbers {
    background-color:#979797;

}
.navigation li a.page-numbers:hover {
    background-color: #f6c40e;            /* groc: en passar-hi */
    color: #0b26ac;
}
.navigation li .page-numbers.current {
    background-color:#f6c40e;            /* blau: pàgina actual */
    color: #0b26ac;
    /*border: solid 2px #0b26ac;*/
}
/* Punts suspensius: sense pastilla */
.navigation li .page-numbers.dots {
    /*background: transparent;
    color: #989898;*/
    background: #0b26ac;
    color: #ffffff;
    min-width: auto;
    /*padding: 0 0.25rem;*/
    padding: 0 0.45rem;
    letter-spacing: 0.1em;
}
/* Fletxes: icona neta (icomoon) en lloc del glif →/← */
.navigation li .page-numbers.next,
.navigation li .page-numbers.prev {
    font-size: 0;
}
.navigation li .page-numbers.next::before,
.navigation li .page-numbers.prev::before {
    font-family: 'icomoon';
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
}
.navigation li .page-numbers.prev::before { content: "\f053"; }
.navigation li .page-numbers.next::before { content: "\f054"; }

/* Primera/última: doble chevron (<< / >>) amb aire entre els dos signes; fons gris com les fletxes */
.navigation li .page-numbers.first,
.navigation li .page-numbers.last {
    font-size: 0;
    background-color: #979797;
}
.navigation li .page-numbers.first::before,
.navigation li .page-numbers.first::after,
.navigation li .page-numbers.last::before,
.navigation li .page-numbers.last::after {
    font-family: 'icomoon';
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
}
.navigation li .page-numbers.first::before { content: "\f053"; margin-right: -0.16em;margin-left: -0.1em; }
.navigation li .page-numbers.first::after  { content: "\f053"; }
.navigation li .page-numbers.last::before  { content: "\f054"; margin-right: -0.08em; }
.navigation li .page-numbers.last::after   { content: "\f054";margin-right: -0.1em; }








#mc_embed_signup {
    background: #f6c40e;
    padding: 20px 35px 40px;
    margin: 8rem auto 2rem;
    border-radius: 20px;
}
.modal-content #mc_embed_signup {
    padding: 0px 35px 35px;
    border-radius: 0px;
}
.modal.show .modal-dialog .modal-content #mc_embed_signup {
    padding: 0px 35px 15px;
    border-radius: 0px;
}
#mc_embed_signup #mc-embedded-subscribe-form {
    margin-bottom: 0px;
}
/* ── Separació entre el contingut i el formulari de newsletter ─────────────
   L'estàndard del web és 144px des de la pastilla blanca, que surt de sumar:
     128px (8rem, el `margin-top` del formulari, a la regla base de sobre)
   +  16px (el `margin-bottom` de la pastilla `.col-md-7.white`)

   ELIMINADES aquí tres regles que no feien res:
     · .post-type-archive-mashup / .post-type-archive-remix → 8rem
     · .page-template-template-radio / .post-type-archive-set / .tax-programa → 8rem
       (totes dues repetien el 8rem que ja dona la regla base)
     · .post-type-archive-set .post-type-archive-set → 6rem
       (repetia la classe del body dins d'ella mateixa: impossible al DOM,
        no s'aplicava mai)

   EXCEPCIÓ real: a la pàgina de ràdio l'últim bloc és un `.col-md-7` SENSE la
   classe `.white`, de manera que no aporta aquells 16px i el buit es quedava a
   128px. S'hi apuja el marge a 9rem perquè hi coincideixi. */
.page-template-template-radio #mc_embed_signup {
    margin-top: 9rem;
}
#mc_embed_signup_scroll label {
    display: block;
    color: #0b26ac;
    font-family: BeniRegular;
    font-size: 2.8rem;
    text-align: center;
}
#mc_embed_signup_scroll .email {
    font-family: Open Sans, sans-serif;
    border-color: #ffffff;
    color: #333;
    border-radius: 20px;
    padding: 15px;
    box-shadow:none;
}
#mc_embed_signup_scroll .email:focus {
    background-color: #ffffff;
    outline: none;
}
#mc_embed_signup_scroll.autopopup {
    margin-top: -25px;
}
.home #contacto #mc_embed_signup {
    margin-top: 3rem;
    padding: 2rem 0 4rem;
    margin-bottom: 32px;
    margin-bottom: 68px;
}
span.first-up-dir {
    display: inline-block;
    margin-top: -2rem;
}
span.first-up-dir:first-letter {
    font-size: 4rem !important;
    display: inline;
}
.first-up:first-letter {
    font-size: 5rem !important;
}
.first-up-bg {
}
.first-up-bg:first-letter {
}
.tienda-globo {
    margin-top: 6rem !important;
    margin-bottom: 8rem;
}
.box-title {
    margin-bottom: -1rem;
}
.other-margin div p,
.other-title {
    margin-bottom: -0.5rem;
}
.other-margin div p {
    margin-top: 0.5rem;
}
.other-margin {
    margin-bottom: 1.5rem;
    margin-top: 0.7rem;
}
.box-title-audio {
    margin-bottom: -0.6rem;
}
.box-title-banner {
    margin-top: 0.5rem;
}
.banner-center {
    width: 100%;
    max-width: 625px;
    margin: 0 auto 3rem;
    display: block;
}
.page-template-template-musicbiography article {
  margin-top: 40px;
}
.page-template-template-musicbiography .sirvelia_pl,
.single-set .sirvelia_pl {
    margin-bottom: 1.6rem;
}
.page-template-template-musicbiography .wp-playlist-current-item,
.single-set .wp-playlist-current-item {
    height: 150px !important;
}



.playlist-cover {
    position: relative;
}
.playlist-cover .play-pause {
    position: absolute;
    top: calc(50% - 3.5rem);
    left: calc(50% - 3.5rem);
    color: #ffffff;
    font-size: 5rem;
    background: var(--surda-blau-clar, #00a1dc);
    opacity: 0.9;
    text-align: center;
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
}
.playlist-cover .play-pause i {
    position: absolute;
    top: calc(50% - 2.5rem);
}
.playlist-cover .play-pause i.icon-play {
    left: calc(50% - 1.5rem);
}
.playlist-cover .play-pause i.icon-pause {
    left: calc(50% - 2.2rem);
}
/* Llistat de temes: alçada MÀXIMA, no fixa (oct. 2026).
   Hi havia `height: 164px`, i això feia que un set amb pocs temes deixés la
   diferència com a buit MORT al final del llistat: amb 2 temes el contingut
   ocupa 82px i els altres 82 quedaven en blanc, de manera que el salt fins al
   contingut següent del post passava de 24px a 106px.
   Amb `max-height` la llista s'encongeix quan hi caben tots els temes i creix
   fins al límit quan no. El scroll de les llistes llargues no canvia:
   verificat en viu amb un set de 2 temes (164 → 82, salt de 106 → 24) i un de
   9 temes (es queda igual, 164 i salt de 24).
   Això estava corregit només a la graella de /set/; ara va a la regla base i
   cobreix també la pàgina de cada set, musicbiography i les taxonomies. */
.playlist {
    padding-left: 0 !important;
    list-style: none;
    height: auto;
    max-height: 164px;
    overflow-y: scroll;
    position: relative;
}
.playlist .playlist-item {
    background: #0b26ac;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #ffffff;
}
.playlist .playlist-item.active {
    background: var(--surda-blau-clar, #00a1dc);
}
/* ── Fila de la playlist ───────────────────────────────────────────────────
   Ordre visual: portada | títol (creix i es retalla amb …) | duració | descàrrega
   La duració és al markup entre la portada i el títol; es porta al final amb
   `order`, sense tocar el PHP (el JS que hi escriu el valor segueix igual).
   Abans, com que la seva amplada varia amb el contingut, els títols no
   començaven tots al mateix punt (variaven entre 72 i 75px). */
.playlist .playlist-item .playlist-song {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    /* Abans `width: 80%`, que deixava ~400px morts entre el títol i la icona */
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0; /* imprescindible: sense això l'ellipsis no funciona dins d'un flex */
}
.playlist .playlist-item .playlist-song .playlist-cover img {
    max-width: none;
}
/* Sense subratllat als enllaços de la playlist (el títol de la cançó i la icona
   de descàrrega són <a>, i la regla genèrica `a:hover` de Bootstrap els hi
   posava una línia en passar-hi el cursor). Acotat a .playlist-item. */
.playlist .playlist-item a,
.playlist .playlist-item a:hover,
.playlist .playlist-item a:focus {
    text-decoration: none;
}
.playlist .playlist-item .playlist-time {
    color: #ffffff;
    font-family: "Big Shoulders Display", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    /* Centrat ÒPTIC del text (no de la caixa).
       Cada tipografia col·loca la tinta de manera diferent dins de la seva
       caixa, així que centrar la caixa no centra les lletres. Amb Big Shoulders
       Display 200, mesurat amb canvas, el text queda massa avall: 12,78px de
       buit a dalt contra 8,45px a baix.
       `line-height: 1` ajusta la caixa al text, i el farciment INFERIOR de
       3,5px puja el text fins a equilibrar-ho: verificat en viu a
       9,50px / 9,57px.
       ATENCIÓ: aquest valor depèn de la tipografia. Amb Bebas Neue calia el
       contrari (3px de farciment SUPERIOR). Si es canvia de font, cal
       recalcular-lo. */
    line-height: 1;
    white-space: nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    /* Al final del bloc, just abans de la icona de descàrrega */
    -ms-flex-order: 1;
    order: 1;
    margin-left: 12px;
}
.playlist .playlist-item .playlist-title {
    color: #ffffff;
    font-family: "Big Shoulders Display", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    /* Ocupa tot l'espai lliure i només es retalla quan de debò no hi cap.
       Abans `max-width: 90%` el tallava molt abans d'hora. */
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: 12px;
}
/* Descàrrega: amplada segons el contingut (abans un 20% fix) i centrat vertical
   REAL amb flex. Abans la icona anava en posició absoluta amb
   `top: calc(50% - 0.75rem)`, que és una aproximació: assumeix que la icona fa
   exactament 1,5rem d'alt i es descentra si canvia de mida o de tipografia.
   Els 16px de farciment deixen el mateix aire a banda i banda de la icona. */
.playlist .playlist-post {
    color: #ffffff;
    font-size: 1.5rem;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    padding: 0 16px;
}
.playlist .playlist-post .icon-download {
    position: static;
}
.post-type-archive-set .single-cover,
.tax-programa .single-cover {
    width: 100%;
    height: 100%;
    -o-object-position: center;
    object-position: center;
    -o-object-fit: contain;
    object-fit: contain;
}
.download-guide-link {
    color: #0b26ac !important;
    padding-top: 1rem !important;
    font-size: 0.8rem !important;
}
.black-bg {
    background: #000;
}
.sl-text {
    color: #0b26ac;
    font-size: 1rem;
}
#newsletter #mc_embed_signup,
#mailchimp #mc_embed_signup {
    margin: 0 !important;
}
#newsletter .modal-newsletter,
#mailchimp .modal-dialog {
    max-width: 710px !important;
    margin: 5rem auto !important;
}
#newsletter .close,
#mailchimp .close {
    background-color: #f6c40e;
    text-align: right;
    opacity: 1;
    color: #0b26ac !important;
    &:hover {
        color: #ffffff !important;
    }
    padding-right: 18px;
    padding-top: 8px;
    border-radius: 20px;
    font-weight: 400;
}
#newsletter #already_subscribed,
#mailchimp #already_subscribed {
    font-size: 1rem;
    font-weight: 400;
    font-family: Open Sans, sans-serif;
    text-shadow: unset;
}
#already_subscribed.close {
    padding: 15px 0px!important;
}
/* modal-content del #mailchimp: fondo transparente para que
   solo se vea el card amarillo de #mc_embed_signup */
#mailchimp .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}
#mailchimp #already_subscribed {
    background-color: #f6c40e;
    display: block;
    text-align: right;
    color: #0b26ac;
    text-decoration: none;
    border-radius: 0 0 20px 20px;
    padding: 10px 35px 15px;
}
article.mixtape {
    width: 100%;
}
.blue-list {
    color: #0b26ac;
}
.red-box {
    background: #f6c40e;
    padding: 2rem 20px;
}
.red-box .password-protected {
    border-color: #ffffff;
    color: #333;
    border-radius: 1px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
}
.red-box .password-protected:focus {
    background-color: #ffffff;
    outline: none;
}
.red-box .enter-protected {
    margin-top: 0.5rem;
    background: #000;
    color: #ffffff;
    display: block;
    text-align: center;
    width: 100%;
    font-family: BeniRegular;
    font-size: 1.3rem;
}
.audio-embd {
    margin-bottom: 1rem;
}
.blurred {
    width: 100%;
    height: 100%;
    display: block;
    border: 9px solid #f6c40e;
}
.blurred img {
    filter: grayscale(80%);
    position: relative;
}
.red-title {
    background-color: #f6c40e;
    color: #ffffff;
}
.red-title:hover {
    color: #000;
}
.red-title a {
    color: #ffffff;
}
.red-title a:hover {
    color: #000;
}
#goToContact,
.white a {
    text-decoration: underline;
}
#goToContact {
    color: #ffffff;
}
#goToContact:hover {
    color: #000;
}
/* Blocs de text del cos d'un post: Info, Mezcla de i Tracklist.
   El de Tracklist no tenia cap marge superior i quedava 11,2px per sota del
   bloc anterior, mentre que els altres dos en tenen 25. S'hi ha afegit
   l'identificador `tracklist-de` a les plantilles de mixtape i de podcast per
   poder-lo tractar igual (oct. 2026). */
/* Blocs de text del cos d'un post: Info, Mezcla de i Tracklist.
   Separació de 25px entre ells i respecte del bloc anterior.

   DOS ARREGLAMENTS (oct. 2026):
   · El bloc del Tracklist no tenia cap marge superior i quedava a 11,2px del
     bloc anterior, contra els 25 dels altres dos. Se li ha posat
     l'identificador `tracklist-de` a les plantilles de mixtape i de podcast
     per poder-lo tractar igual.
   · S'ha tret un `margin-bottom: -0.3rem !important` que portaven aquests
     blocs. Aquell marge negatiu s'encavalcava amb el de sota i deixava la
     separació entre blocs consecutius en 20,2px en comptes de 25, de manera
     que la primera separació del grup i les següents no coincidien.
   Verificat en viu: 25px sobre Info i 25px sobre Tracklist. */
#info-de,
#mezcla-de,
#tracklist-de {
    margin-top: 25px;
}
#modal-patreon {
    background-color: #f6c40e;
}
#button-patreon {
    background-color: #141518;
    background-size: 50%;
    background-position: 50%;
    height: 3rem;
    width: 100%;
    background-repeat: no-repeat;
}
.text-BeniRegular {
    font-family: BeniRegular;
    font-size: 2rem;
}
#thanks-text {
    font-family: BalginDisplayBold;
    color: #0b26ac;
    font-size: 6rem;
}
#modal-thanks-footer {
    background-color: #f6c40e;
}
#mg-image {
    height: 8rem;
}
#modalPatreonDialog,
#modalThanksDialog {
    margin: 20% auto;
}

.social-locker-network {
    color: #f6c40e;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    background: #ffffff;
    border-radius: 50%;
    font-size: 20px;
    line-height: 2rem;
    text-align: center;
    vertical-align: bottom;
}

.comment-list ol {
    list-style: none;
}
.search-form label {
    font-weight: 400;
}
.main {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.sidebar {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.alignnone {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    height: auto;
}
.aligncenter {
    display: block;
    margin: 0.5rem auto;
    height: auto;
}
.alignleft,
.alignright {
    margin-bottom: 0.5rem;
    height: auto;
}

.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia {
    padding: 0;
    background: none;
    border: 0;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-current-item {
    margin: 0;
    height: auto;
    height: 300px;
    background: #000;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-current-item img {
    display: block;
    margin: 0 auto;
    float: none;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks {
    margin: 0;
    max-height: 160px;
    overflow-y: scroll;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-moz-scrollbar-track,
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(11, 38, 172, 0.4);
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-moz-scrollbar,
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-webkit-scrollbar {
    width: 12px;
    background-color: #000;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-moz-scrollbar-thumb,
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-tracks::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(11, 38, 172, 0.8);
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-item {
    border: 0;
    padding: 0;
    background: #0b26ac;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-playing {
    background: #f6c40e;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-playing span {
    font-weight: 400;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-caption {
    color: #ffffff;
    height: 50px;
    font-size: 14px;
    margin: 0;
    max-width: 100%;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-caption img {
    height: 100%;
    width: auto;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-caption span {
    color: #ffffff;
    font-size: 1rem;
}
.wp-playlist.wp-audio-playlist.wp-playlist-sirvelia .wp-playlist-item-artist {
    text-transform: none;
    font-size: 1rem;
}

.page-template-template-search header.banner {
    border-bottom: 6px solid #de4f91;
}

header.banner {
    background: #ffffff;
}
header.banner .logo {
    background: #0b26ac;
    padding: 0.5rem;
}
header.banner .logo img {
    margin: 0 auto;
    padding-left: 40%;
}

.nav {
    position: fixed;
    height: 4.5rem;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}
.nav-open .nav {
    background-color: #f6c40e;
}
/* El panell arrenca EXACTAMENT on acaba la capçalera (oct. 2026).
   Abans eren 60px escrits a mà mentre la capçalera fa 4,5rem (72px amb l'arrel
   per defecte). El panell en tapava els últims 12px: la banda groga del menú
   obert es veia més baixa que la blava de la home i la creu, que va centrada
   dins la banda, quedava massa arran del tall. Com que les dues barres —la
   groga del botó i la blava del logotip— deriven de `rem`, lligar-hi també el
   panell fa que tot es mogui junt sigui quina sigui la mida de lletra base del
   navegador. Mesurat amb arrel 16, 10 i 20px: sempre coincideixen. */
.nav-container {
    position: fixed;
    top: 4.5rem;
    left: 0;
    z-index: 9999;
    overflow-y: auto;
    visibility: hidden;
    width: 100%;
    height: calc(100% - 4.5rem);
    min-height: calc(100% - 4.5rem);
    margin: 0;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transform: translateX(-100%);
    background-color: #e0e0e0;
    -webkit-overflow-scrolling: touch;
    /* La barra de desplaçament, pintada (oct. 2026).
       En obrir un submenú el contingut ja no hi cap i apareix la barra. Als
       navegadors que li donen columna pròpia (els d'escriptori a amplada
       estreta) aquesta columna es pinta damunt del fons del panell, que és
       blau, i es veia una franja blava a la dreta del menú blanc. Als mòbils
       de debò no passa: allà la barra se superposa i no ocupa espai.
       Es pinta el solc de blanc —el mateix color que el menú, així no es veu—
       i el polze de blau de marca, que és l'única cosa que es mou.
       No es pot amagar del tot: sense barra, amb el submenú de Mashups obert,
       el contingut fa 1177px contra els 812 de la pantalla i els últims
       elements (Fiestas, Blog, Contacto) queden fora de l'abast. */
    scrollbar-width: thin;
    scrollbar-color: #0b26ac #ffffff;
}
.nav-container::-webkit-scrollbar {
    width: 8px;
}
.nav-container::-webkit-scrollbar-track {
    background: #ffffff;
}
.nav-container::-webkit-scrollbar-thumb {
    background: #0b26ac;
    border-radius: 4px;
}
/* El farciment superior de 37px feia caure el selector d'idiomes a la part
   baixa de la franja blava i les icones de la dreta a la part alta: no estaven
   ni centrats ni alineats entre ells. Ara la franja la defineixen els marges
   simètrics del selector d'idiomes (18px a dalt i a baix) i les icones s'hi
   centren amb `top: 77px` (vegeu `.nav-open #search-button`). Els dos elements
   queden al mateix centre, 95px. Oct. 2026, detectat pel client. */
.nav-container.is-visible {
    background: #0b26ac;
    visibility: visible;
    transform: translateX(0);
}

/* ════════════════════════════════════════════════════════════════════════
   MENÚ DEL MÒBIL — tot el que és exclusiu d'aquesta amplada va aquí dins.
   El `@media (max-width: 1249.98px)` fa d'assegurança: aquestes regles no
   poden arribar a l'escriptori encara que algú reordeni el fitxer. Fins ara
   només quedaven anul·lades perquè el bloc de `@media (min-width: 1250px)`
   ve més avall, i això és fràgil (ja ens ha passat amb altres regles).
   El límit és 1249,98 perquè encaixi exactament amb el bloc d'escriptori,
   sense cap amplada on no s'apliqui cap dels dos. Oct. 2026. */
@media (max-width: 1249.98px) {
    /* El farciment superior de 37px feia caure el selector d'idiomes a la part
       baixa de la franja blava i les icones de la dreta a la part alta: no
       estaven ni centrats ni alineats entre ells. Ara la franja la defineixen
       els marges simètrics del selector d'idiomes (18px a dalt i a baix) i les
       icones s'hi centren amb `top: 77px` (vegeu `.nav-open #search-button`).
       Els dos elements queden al mateix centre, 95px. */
    .nav-container.is-visible {
        padding-top: 0;
    }
    /* Els 16px de l'esquerra alineen la vora de la pastilla d'idiomes amb el
       text dels enllaços del menú de sota, que comença a 16px pel farciment de
       `.nav-menu .menu-link`.
       `width: auto` és imprescindible: aquest element ve amb `width: 100%` i,
       amb el marge, sobresortia 16px per la dreta. Això feia que el menú es
       pogués desplaçar lateralment i, en obrir un submenú (quan el contingut
       ja no hi cap i apareix la barra de desplaçament), es veiés una franja
       blava a la dreta del menú blanc.
       El selector nomena `.nav-container` perquè més avall al fitxer hi ha un
       altre `.language-selector` amb `width: 100%` que, amb la mateixa
       especificitat i més tard, guanyava: el `width: auto` no s'aplicava i la
       franja blava de la dreta seguia sortint. */
    .nav-container .language-selector {
        margin: 18px 0 18px 16px;
        width: auto;
    }
    /* Centrat real de la icona dins la franja. Abans es col·locava amb
       farciment (1,25rem) dins d'una franja de 4,5rem i, segons com arrodonia
       el navegador, quedava uns píxels amunt: la creu del menú obert no requeia
       on hi havia hagut l'hamburguesa. */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4.5rem;
        padding: 0 1rem;
    }
    /* Sense sagnat a la llista: amb `padding-left: 1rem` les línies separadores
       començaven 16px endins i es veia una franja blanca buida a l'esquerra.
       El text no es mou, perquè la sagnia la posa el farciment de l'enllaç. */
    .nav-menu {
        padding-left: 0;
    }
}
/* Botó del menú al mòbil (oct. 2026, decisió del client).
   El problema era el blanc sobre groc de les barres: 1,64:1 de contrast, molt
   per sota del mínim. El fons groc es manté i el que canvia és la icona, que
   passa a blava (6,79:1 sobre el groc).
   Obert i tancat es veuen igual, per decisió del client: el que indica l'estat
   és la icona, que passa de tres barres a una creu (ho fa el JS del tema amb
   la classe `is-active`), no el color. */
.nav-toggle {
    line-height: 1;
    /* La geometria (flex, alçada i farciment) va al bloc del mòbil de més
       amunt; aquí només hi queden el color i la vora. */
    display: inline-block;
    border: 0;
    background-color: #f6c40e;
}
.modal-open .nav {
    z-index: 1000;
}
.nav-toggle .icon-menu {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 20px;
    vertical-align: middle;
    fill: none;
}
.icon-menu .line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    /* Blau en tots dos estats: es llegeix bé sobre el blanc del repòs i sobre
       el groc del menú obert. Vegeu el comentari de `.nav-toggle`. */
    background-color: #0b26ac;
}
.icon-menu .line-1 {
    top: 0;
}
.is-active .icon-menu .line-1 {
    transform: translateY(8px) translateX(0) rotate(45deg);
}
.icon-menu .line-2 {
    top: 50%;
    margin-top: -2px;
}
.is-active .icon-menu .line-2 {
    opacity: 0;
}
.icon-menu .line-3 {
    bottom: 0;
}
.is-active .icon-menu .line-3 {
    transform: translateY(-8px) translateX(0) rotate(-45deg);
}
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* ── Menú desplegable del mòbil: escala de fons per nivell (oct. 2026) ───────
   Decisió del client. Abans tot el desplegable era gris (#e0e0e0) amb les
   línies separadores blanques, i els tres nivells es distingien poc.
   Ara cada nivell s'enfosqueix una mica i les línies són blaves, com al menú
   de l'escriptori:
     nivell 1 (menú)        #ffffff
     nivell 2 (submenú)     #e5e5e5  ← "Blanc Surda" del sistema gràfic
     nivell 3 (sub-submenú) #cfcfcf
   A l'escriptori només hi ha dos nivells i fan blanc i #e5e5e5, o sigui que el
   segon nivell és el MATEIX color als dos dispositius.
   Els salts són regulars i de la mateixa mida: 1,26 de relació entre el blanc i
   el segon nivell, i 1,24 entre el segon i el tercer. La primera versió feia
   servir #f2f2f2 al segon nivell i els salts quedaven a 1,12: el client els va
   veure massa febles (oct. 2026). Sobre el gris més fosc, el text blau manté
   7,14:1 de contrast. */
.nav-menu {
    background-color: #ffffff;
    /* El sagnat de la llista es treu al bloc del mòbil de més amunt. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-top: solid 1px #0b26ac !important ;
}
.nav-menu .menu-item {
    border-top: 1px solid rgba(11, 38, 172, 0.5);
}
.nav-menu > .menu-item:last-child {
    border-bottom: 1px solid rgba(11, 38, 172, 0.5);
}
.nav-menu .menu-link {
    display: block;
    text-decoration: none;
    color: #0b26ac;
    padding: 0.4rem 1rem;
    font-family: BeniRegular;
    font-size: 1.8rem;
    letter-spacing:.02em;
}
.nav-open .nav-menu > .menu-item > .menu-link {
    font-weight: 500;
    text-transform: uppercase;
}
.nav-dropdown > .menu-item > .menu-link:hover,
.nav-dropdown > .menu-item > .menu-link:focus-visible,
.nav-open .nav-menu > .menu-item > .menu-link:hover,
.nav-open .nav-menu > .menu-item > .menu-link:focus-visible {
    color: #f6c40e;
}
.has-dropdown {
    position: relative;
    cursor: pointer;
}
.has-dropdown > .menu-link {
    display: inline-block;
}
/* Indicador de desplegable: el mateix angle avall que el selector d'idiomes
   (oct. 2026, demanat pel client).
   Abans era el caràcter "›" en gris (#989898), que és tipografia i canvia de
   forma i de gruix segons la lletra que carregui el navegador. Es va provar
   amb un triangle que girava i es va descartar: el gir desplaçava la figura.
   Ara és exactament el mateix dibuix que al desplegable d'idiomes —un chevron
   de línia fina en blau de marca, incrustat com a SVG— i no gira: sempre
   apunta avall, com el d'idiomes.
   Només al mòbil: a l'escriptori el desplegable s'obre amb el cursor i aquest
   indicador ja estava amagat. */
@media (max-width: 1249.98px) {
    /* L'element de llista es reparteix en dues fileres amb flex: a dalt
       l'enllaç i l'angle, i a sota el submenú. Això resol dues coses alhora:

       · L'ANGLE NO ES MOU. Abans anava posicionat sobre l'element de llista
         amb `top: 50%`, i aquest element conté el submenú i creix en obrir-se:
         l'angle baixava al mig del bloc sencer (mesurat, 28px). Com a element
         flex de la primera filera, es queda sempre a la seva filera.
       · EL SUBMENÚ SEGUEIX OBRINT-SE. El JS del tema obre el desplegable quan
         es clica L'ELEMENT DE LLISTA i atura la propagació de qualsevol clic
         sobre els seus fills (app.js, funció `offCanvas`). Es va provar de fer
         l'enllaç de bloc perquè l'angle quedés a la dreta, i aleshores
         l'enllaç ocupava tota la filera i no quedava cap zona de l'element de
         llista per clicar: el submenú deixava d'obrir-se. Amb flex, l'enllaç
         s'estira només fins a l'angle i la zona de l'angle segueix sent de
         l'element de llista, que és qui obre. */
    .has-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .has-dropdown > .menu-link {
        order: 1;
        /* L'enllaç ocupa NOMÉS el seu text (`flex: 0 1 auto`). Tot l'espai
           buit que queda a la dreta segueix sent de l'element de llista, que
           és qui obre el desplegable: així la zona per obrir-lo és tota la
           filera menys el text, com ho era abans. Amb `flex: 1 1 auto`
           l'enllaç s'estirava i només quedaven clicables els 36px de la
           fletxa, que es nota com si no funcionés. */
        flex: 0 1 auto;
        display: block;
    }
    .has-dropdown > .nav-dropdown {
        order: 3;
        flex: 0 0 100%;
    }
    .has-dropdown:after {
        content: "";
        order: 2;
        flex: 0 0 auto;
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        /* `margin-left: auto` empeny la fletxa fins a la vora dreta ara que
           l'enllaç ja no s'estira. Mida 28×20, la mateixa que la fletxa del
           desplegable d'idiomes, perquè les dues es vegin iguals. */
        margin-left: auto;
        width: 28px;
        height: 20px;
        margin-right: 1rem;
        background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b26ac'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    .has-dropdown.is-active:after {
        content: "";
        transform: none;
    }
}
.nav-dropdown {
    display: none;
    background-color: #e5e5e5;
}
.has-dropdown.is-active > .nav-dropdown {
    display: block;
}
/* ── Escala de sagnat del menú del mòbil (oct. 2026, demanat pel client) ─────
   Cada nivell entra 16px respecte del seu pare i la franja que queda a
   l'esquerra es pinta amb el color DEL PARE, de manera que es llegeix de qui
   penja cada cosa i el salt és idèntic a tots els nivells:
     nivell 1 (menú)         0px   · fons blanc
     nivell 2 (submenú)     16px   · franja blanca  + elements #e5e5e5
     nivell 3 (sub-submenú) 32px   · franja #e5e5e5 + elements #cfcfcf
   Per això el color el porten els ELEMENTS i no la llista: la llista només
   pinta el sagnat, amb el color del nivell de sobre.
   Abans només entrava el tercer nivell i el segon quedava enganxat a la vora,
   que és el que el client va veure incoherent.
   Va dins del bloc del mòbil: a l'escriptori el submenú no és una banda
   encaixada sinó un plafó que flota al costat, amb el seu propi farciment. */
@media (max-width: 1249.98px) {
    .nav-dropdown {
        padding-left: 16px;
        background-color: #ffffff;
    }
    .nav-dropdown .menu-item {
        background-color: #e5e5e5;
    }
    .nav-dropdown .nav-dropdown {
        padding-left: 16px;
        background-color: #e5e5e5;
    }
    .nav-dropdown .nav-dropdown .menu-item {
        background-color: #cfcfcf;
    }
    /* Cantonada arrodonida només a DALT A L'ESQUERRA i al BLOC sencer, no a
       cada casella: és el punt on el submenú arrenca i on hi ha el graó, i
       així es llegeix com un bloc que penja del seu pare sense trencar la
       continuïtat de la llista. 12px (decisió del client, oct. 2026). */
    .nav-dropdown .menu-item:first-child {
        border-top-left-radius: 12px;
    }
}
.nav-dropdown .menu-item {
    border-color: rgba(11, 38, 172, 0.5);
    font-weight: 400;
}
/* El fons el posa la llista, no cada element: així el tercer nivell és un sol
   bloc de color i no una suma de caselles. */
.nav-dropdown .nav-dropdown .menu-item {
    background-color: #cfcfcf;
    border-color: rgba(11, 38, 172, 0.5);
}


.language-selector {
        display: block;
        width: 100%;
        float: none;
    }

/* Reinserit: aquestes regles d'escriptori van perdre l'embolcall @media (min-width:1250px)
   durant la reorganització (la regla malformada '.menu-link,' partia el bloc). */
@media (min-width: 1250px) {
    .nav-menu > .menu-item:last-child {
        border: 0;
    }
    .nav-menu .menu-item {
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    }
    .nav-menu .menu-item.current > .menu-link,
    .nav-menu .menu-item.active > .menu-link {
        color: #ffffff;
        background-color:#0b26ac;
    }
    .has-dropdown:after {
        content: "" !important;
    }
    .nav-dropdown {
        text-align: left;
        display: block;
        opacity: 0;
        position: absolute;
        top: 100%;
        width: 180px;
        margin: 0;
        padding: 0.5rem 0;
        background-color: #ffffff;
        visibility: hidden;
        transition: visibility 0s linear 0.25s, opacity 0.25s linear;
        /*margin-top: 2px;
        margin-left: -2px;*/

        padding: 0 10px;
        border-radius: 0 0 15px 15px;
    }
    .has-dropdown:hover > .nav-dropdown {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
    .nav-dropdown .menu-item {
        border: 0;
    }
    /* Línia separadora entre ítems del submenú (blau al 50% d'opacitat),
       igual que al selector d'idiomes. Només entre elements, no sobre el primer.
       Marges negatius (−10px) perquè la línia arribi a les vores de la caixa,
       recuperant el sagnat del text amb el mateix padding. */
    .nav-dropdown .menu-item + .menu-item {
        border-top: 1px solid rgba(11, 38, 172, 0.5);
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav-dropdown .menu-item:hover,
    .nav-dropdown .nav-dropdown .menu-item:hover {
        background: none;
    }
    /* Submenú de segon nivell diferenciat del primer (oct. 2026, client).
       Tres coses alhora, perquè cadascuna sola no n'hi havia prou:
       · FONS: gris "Blanc Surda" (#e5e5e5) contra el blanc del primer nivell.
       · DESNIVELL: baixa 14px, així les línies separadores dels dos menús no
         queden alineades i es llegeix on acaba un i on comença l'altre. Els
         14px no trenquen el pas del cursor: l'element del menú fa més alçada.
       · CANTONS: arrodonits als quatre costats. El primer nivell penja de la
         barra i només els té a baix; aquest flota al costat i ha d'anar tancat.
       El fons va a la llista i no als elements perquè el panell es vegi com un
       sol bloc. */
    .nav-dropdown .nav-dropdown {
        background: #e5e5e5;
    }
    .nav-dropdown .nav-dropdown .menu-item {
        background: transparent;
    }
    .nav-dropdown .nav-dropdown {
        z-index: 9998;
        top: 14px;
        left: 100%;
        border-radius: 15px;
        /* El farciment esquerre el posava la regla del menú del mòbil
           (`padding-left: 0.5rem`), que té més especificitat que el
           `padding: 0 10px` d'aquí i hi guanyava: el panell quedava amb 8px a
           l'esquerra i 10 a la dreta, i les línies sortien 2px per fora. */
        padding-left: 10px;
    }
    /* Línies separadores PER DINS del panell (oct. 2026).
       Al primer nivell van de vora a vora, que és el que toca en una caixa amb
       els costats rectes. Aquí el panell és arrodonit als quatre cantons i una
       línia que arriba a la vora sembla que en surti, que és el que es veia.
       S'anul·len els marges negatius que l'estenien i queda a 10px de cada
       costat; el text no es mou, perquè aquells marges anaven compensats amb
       el mateix farciment. */
    .nav-dropdown .nav-dropdown .menu-item + .menu-item {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .language-selector {
        width: auto;
        margin: 0.5rem auto 0.5rem 0.5rem;
        float: left;
    }
    .language-selector .wpml-ls-legacy-dropdown {
        font-family: BeniRegular;
        width: 8.4rem;
    }
      .language-selector .wpml-ls-legacy-dropdown span {
        font-size: 1.3rem;
        letter-spacing: 0.05rem;
    }
    .head-social {
        float: right;
        display: block;
        list-style: none;
        background: none;
        margin: 0;
        padding: 0;
        padding-right: 1rem;
        text-align: right;
        height: 50px;
        line-height: 40px;
        padding-top: 5px;
    }
    .head-social li,
    .head-social li.presskit {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.2rem;
        width: auto;
        height: auto;
    }
    .head-social li.presskit {
        height: 50px;
        line-height: 40px;
        margin-left: 5px;
    }
    .head-social li.icon a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    .head-social li.icon a svg {
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        fill: #0b26ac;
    }
    .head-social li.icon a:hover svg {
        fill: #f6c40e;
    }
    .head-social li.icon i {
        margin-top: 5px;
        margin-bottom: 0;
    }
    .head-social a {
        letter-spacing: 0.05rem;
        font-size: 1.3rem;
        color: #0b26ac;
        text-decoration: none;
        font-family: BeniRegular;
    }
    .head-social a:hover {
        color: #f6c40e;
    }
}

div.language-selector > div > ul:not(.wpml-ls-sub-menu) > li > a > span.wpml-ls-native:before {
    content: "\f0ac\0020";
    font-family: icomoon;
    color:#0b26ac;
    position: relative;
    top: 1px;
}
/* Selector d'idiomes: una sola caixa blanca arrodonida amb filet blau (capçalera
   + submenú connectats), text blau BeniRegular, globus a l'idioma actual i fletxa avall. */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 101;
  background: #ffffff;
  border: 1px solid #0b26ac;
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
/* Enllaços: text blau pla, sense vora ni píndola */
.wpml-ls-legacy-dropdown a {
  display: block;
  color: #0b26ac;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 0;
}
/* Capçalera (idioma actual): caixa blanca arrodonida amb filet blau; flex per centrar la fletxa */
.wpml-ls-legacy-dropdown .wpml-ls-current-language > a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: #ffffff;
  border: 1px solid #0b26ac;
  border-radius: 10px;
}
/* En obrir (hover): la capçalera connecta amb el submenú (cantons inferiors rectes, sense filet inferior) */
.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  color: #0b26ac;
  background: #ffffff;
}
/* Sense padding a la dreta al toggle (la fletxa gestiona el seu propi marge) */
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
  padding-right: 0px;
}
/* Fletxeta avall (chevron de línia fina, "v", blau de marca), alineada a la
   dreta i centrada verticalment (flex). Selector amb especificitat alta + reset
   de borders/posició per anul·lar el triangle que WPML afegeix per defecte. */
.language-selector .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after {
  content: "";
  margin-left: auto;
  margin-right: 4px;
  width: 28px;
  height: 20px;
  border: none;
  position: relative;
  top: 1px;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b26ac'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Línia separadora entre elements: blau al 50% d'opacitat */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
  border-top: 1px solid rgba(11, 38, 172, 0.5);
}
/* Hover dels idiomes del submenú: groc */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:focus-visible {
  color: #f6c40e;
  background: #ffffff;
}

.menu-link.first-c:first-letter {
    font-size: 1.7rem !important;
    line-height: 1rem;
}



footer.content-info {
    background: #0b26ac;
    padding-top: 5rem;
    padding-bottom: 2rem;
    margin-top: 10rem;
}
body.home footer.content-info {
    margin-top: 0rem;
}
footer.content-info .info p {
    font-size: 0.8rem;
}

footer.content-info .logo-footer img {
    width: 13rem;
}
footer.content-info .footer-social {
    margin: 2rem 0.4rem;
    list-style: none;
    padding: 0;
}
footer.content-info .footer-social li {
    display: inline-block;
    margin-right: 0.7rem;
    margin-top: 0.5rem;
    width: auto;
    height: auto;
}
footer.content-info .footer-social li a {
    display: inline-block;
    font-size: 20px;
}
footer.content-info .footer-social li a:hover svg {
    opacity: 0.8;
}
footer.content-info .footer-social li i {
    margin-top: 9px;
}
footer.content-info .footer-social li a svg {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    fill: #ffffff;
}
footer.content-info .by-sirvelia {
    display: inline-block;
    width: 7rem;
}
footer.content-info .by-sirvelia img {
    max-width: 100%;
}


.footer-legal-nav ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.footer-legal-nav ul li {
    display: inline;
    margin: 0 10px;
}
.footer-legal-nav ul li a {
    color: #fff;
    font-size: 13px;
}

#search-button {
    border: 0;
    position: fixed;
    border-radius: 0;
    right: 0;
    top: 60px;
    z-index: 30000;
}
#search-button:focus {
    box-shadow: none;
}

.page-template-template-search #search-button {
    background-color: #de4f91 !important;
}
#mailchimp-button {
    border: 0;
    position: fixed;
    border-radius: 0;
    right: 50px;
    top: 60px;
    z-index: 30000;
}
#mailchimp-button:focus {
    box-shadow: none;
}

.page-template-template-search #mailchimp-button {
    background-color: #de4f91 !important;
}
/* Les dues icones, enganxades JUST SOTA la capçalera i al mateix lloc sempre
   (oct. 2026, decisió del client).
   S'havia provat de posar-les a dins de la barra blava i es va descartar: a la
   portada quedaven massa a prop dels logotips.
   El valor és `4.5rem`, l'alçada de la capçalera, i no els 60px escrits a mà
   que hi havia: amb 60 quedava un forat de 12px entre la capçalera i les
   icones, i aquest forat creixia o s'encongia segons la mida de lletra base
   del navegador. Ara van sempre arran.
   El mateix valor s'aplica amb el menú obert (vegeu `.nav-open` més avall),
   que és el que evita que les icones saltin en obrir-lo i tancar-lo. */
@media (max-width: 1249.98px) {
    #search-button,
    #mailchimp-button {
        top: 4.5rem;
    }
}
.modal-open #mailchimp-button,
.modal-open #search-button {
    z-index: 1000;
}
/* Amb el menú obert, aquests dos botons ocupaven TOTA l'amplada de la franja
   (`width: 100%`) i només hi col·locaven la icona a la dreta. Com que el fons
   del botó canvia amb el cursor, passar per sobre de la icona pintava la
   franja sencera. Ara cada botó fa l'amplada de la seva icona i es queda al
   seu lloc, com quan el menú està tancat. El `top` els centra amb el selector
   d'idiomes. Oct. 2026, detectat pel client. */
@media (max-width: 1249.98px) {
    .nav-open #mailchimp-button,
    .nav-open #search-button {
        /* MATEIX valor que amb el menú tancat: les icones no es mouen gens en
           obrir-lo. És la decisió del client, assumint que amb el menú obert
           quedin damunt de la franja del selector d'idiomes. */
        top: 4.5rem;
        width: auto;
        text-align: center;
    }
    /* ... però apartades de la barra de desplaçament del menú.
       Els dos botons són fixos i van per damunt del panell (z-index 30000
       contra 9999), així que tapaven la barra i es veia tallada: sobresortia
       per sobre i per sota de les icones. No es pot posar la barra al davant,
       perquè el navegador la pinta amb el seu panell i qualsevol element amb
       més z-index hi passa per sobre; i baixar el z-index de les icones les
       amagaria del tot sota el panell, que ocupa tota l'amplada.
       Per això s'aparten 12px: la barra queda sencera i contínua. 12 perquè
       cobreix tant els 8px que li declarem a Chrome i Safari
       (`::-webkit-scrollbar`) com la barra "fina" de Firefox.
       Als mòbils de debò la barra se superposa i no ocupa espai, així que
       l'únic efecte és que les icones queden 12px endins. */
    .nav-open #search-button {
        right: 12px;
    }
    .nav-open #mailchimp-button {
        right: 62px;
    }
}
/* La icona passa a blava quan el botó es torna groc: blanc sobre groc dona
   1,64:1 de contrast, el mateix problema que tenia el botó del menú. */
#search-button:hover .icon-search,
#search-button:focus-visible .icon-search,
#mailchimp-button:hover .icon-rss-square,
#mailchimp-button:focus-visible .icon-rss-square {
    color: #0b26ac;
}
#buscador #boton-cerrar-modal {
    color: #1b36bc;
}
#buscador #boton-cerrar-modal:hover {
    color: #f6c40e;
    opacity: 1;
}
#buscador .globo-intro {
    margin-bottom: 0;
    margin-top: 1.5rem;
    max-width: 55rem;
}
#buscador #globo-buscador #formula-busqueda {
    font-family: BeniRegular;
    font-size: 51.5101px;
    letter-spacing: 1;
}
#buscador .modal-dialog {
    max-width: 992px;
}
#buscador .modal-content {
    /*border-radius: 0;*/
    padding: 0;
}
#buscador .modal-header {
    border: 0;
    -ms-flex-pack: right;
    justify-content: right;
}
#buscador .modal-header .close {
    color: #ffffff;
    opacity: 1;
    font-weight: 400;
}
#buscador .modal-header .close:hover {
    opacity: 0.5;
}
#buscador .modal-header .logo {
    max-width: 8rem;
    display: block;
    margin: 0 auto;
}
#buscador .modal-body {
    padding: 0;
    margin: 0;
    background: #ffffff;
}
#buscador .modal-body .search-filters,
#buscador .modal-body .search-results {
    padding: 1.5rem 3%;
}

#buscador .modal-body .search-filters {
    background: var(--surda-rosa, #de4f91);
}
#buscador .modal-body .search-filters form {
    max-width: 34.2rem;
    margin: 0 auto;
    padding-bottom: 2rem;
}
#buscador .wpas-submit {
    border: 0;
    margin-top: 0;
    border-radius: 1px;
    padding: 10px;
    background: #000;
}
#buscador .wpas-submit:hover {
    background: #111;
}
#buscador .wpas-submit:focus {
    box-shadow: none;
    outline: 0;
}
#buscador .wpas-checkbox-container {
    margin-top: 1rem;
}
#buscador .wpas-checkbox-container .wpas-checkbox {
    margin-left: 0;
    height: 1rem;
    margin-top: 0.5rem;
    width: 1rem;
}
#buscador .wpas-checkbox-container label {
    font-family: BeniRegular;
    font-size: 1.5rem;
}
#buscador .wpas-multi-select,
#buscador .wpas-number,
#buscador .wpas-text {
    font-family: Open Sans, sans-serif;
    opacity: 1;
    padding: 15px;
    font-weight: 400;
    color: #000;
    box-shadow: none;
    margin-bottom: 0.5rem;
    border-radius: 15px;
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.25;
    background-color: #ffffff;
    background-clip: padding-box;
    border: none;
}
#buscador .wpas-multi-select:focus,
#buscador .wpas-number:focus,
#buscador .wpas-text:focus {
    background-color: #ffffff;
    outline: none;
}
#buscador .wpas-text {
    width: 100%;
}
#buscador .wpas-number {
    vertical-align: middle;
    width: 50%;
    display: inline;
}
#buscador .select2-selection {
    padding: 8px 15px;
    box-shadow: none;
    border: none;
    border-radius: 15px;
}
/* Desplegable de select2: caixa + panell units en una sola forma arrodonida.
   La caixa arrodoneix a dalt i el panell a baix; al mig queden rectes (connectats). */
#buscador .select2-dropdown {
    border: none;
    overflow: hidden; /* retalla les opcions als cantons arrodonits */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
#buscador .select2-dropdown--below {
    border-radius: 0 0 15px 15px;
}
#buscador .select2-dropdown--above {
    border-radius: 15px 15px 0 0;
}
/* Quan és obert, la caixa deixa recte el costat que toca el panell */
#buscador .select2-container--below.select2-container--open .select2-selection {
    border-radius: 15px 15px 0 0;
}
#buscador .select2-container--above.select2-container--open .select2-selection {
    border-radius: 0 0 15px 15px;
}
#buscador .formula-input,
#buscador .select2-container {
    margin-bottom: 0.5rem;
}
/* Input principal amb el mateix look que el formulari de contacte de la home */
#buscador .formula-input {
    font-family: Open Sans, sans-serif;
    color: #0b26ac;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
    padding: 15px;
    border: none;
    border-radius: 15px;
    box-shadow: none;
    background-color: #ffffff;
}
#buscador .select2-search__field {
    color: #000;
    font-weight: 400;
    font-size: 1rem;
}
#buscador .select2-selection__rendered {
    padding: 0;
}
/* Placeholder dels select2 en gris (com el placeholder de l'input); el blau
   queda reservat als valors realment seleccionats. Els filtres són multi-select,
   així que el text de guia és el ::placeholder del camp de cerca intern. */
#buscador .select2-selection__placeholder {
    color: var(--surda-gris-max, #989898) !important;
}
#buscador .select2-search__field::placeholder,
#buscador input::placeholder {
    color: var(--surda-gris-max, #989898) !important;
    opacity: 1;
    font-weight: 400 !important;
}
/* ── Open Sans garantit a TOTS els camps i textos del formulari del cercador ──
   Inclou el text que escriu l'usuari, les etiquetes de valors seleccionats, els
   placeholders i les opcions del desplegable (select2 no declarava cap font i
   l'heretava del contenidor). Els botons (¡Buscar!, ¡Limpiar!, Filtros de
   búsqueda) queden fora expressament: mantenen BeniRegular, la tipografia de
   titular de la marca. */
#buscador input:not([type="submit"]):not([type="button"]),
#buscador textarea,
#buscador select,
#buscador .select2-container,
#buscador .select2-container *,
#buscador .select2-dropdown,
#buscador .select2-dropdown * {
    font-family: "Open Sans", sans-serif;
}
/* Valors seleccionats (tags del multi-select): fons blau, text blanc, arrodonit, sense vora ni ombra */
#buscador .select2-selection__choice {
    background-color: #cacaca;
    color: #0b26ac !important;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    padding: 3px 10px;
    font-weight: 400;
}
#buscador .select2-results__option.select2-results__message {
    background-color: #0b26ac !important;
    color: #ffffff !important;
}
#buscador .select2-selection__choice__remove {
    color: #0b26ac !important;
    margin-right: 4px;
}
#buscador .select2-results__option--highlighted {
    background-color: #0b26ac;
}
#buscador .wpas-submit {
    font-family: BeniRegular;
    font-size: 1.5rem;
}
#buscador .select2-container .select2-search,
#buscador .select2-container .select2-search__field {
    width: 100% !important;
}
#buscador #wpas-load {
    text-align: center;
}
#buscador #wpas-load img#wpas-loading-img {
    position: fixed;
    bottom: 20vh;
    width: 200px;
    max-width: 100%;
    left: calc(50% - 100px);
    height: auto;
    z-index: 2000;
    background: hsla(0, 0%, 100%, 0.5);
    padding: 50px;
    border-radius: 10px;
}

#buscador #wpas-load #wpas-load-btn {
    background: #f6c40e;
    padding: 0.8rem;
    font-family: BeniRegular;
    font-size: 2rem;
    text-decoration: none;
    color: #ffffff;
    border: none;
    width: 34.2rem;
    margin-bottom: 3rem;
    margin-top: 2rem;
}
#buscador #wpas-results {
    overflow-y: auto;
    min-height: 20rem;
}
#buscador #wpas-results img.placeholder {
    height: auto;
    width: 34.2rem;
}
#buscador #wpas-results img.placeholder-noresults {
    max-width: 90%;
}
#buscador #wpas-results img.placeholder2 {
    max-height: 14.5rem;
}
#buscador #wpas-results #wpas-results-inner {
    width: 34.2rem;
    margin: 0 auto;
}

#buscador #wpas-results article .item-title {
    font-weight: 700;
}
#buscador #wpas-results article .item-title a {
    text-decoration: none;
}
#buscador #wpas-results article p span {
    font-size: 0.8rem;
    padding: 5px;
    background: #0b26ac;
    color: #ffffff;
    border-radius: 2px;
    margin-right: 0.5em;
}
#buscador .search-filters .show-filters {
    position: relative;
    background: #f6c40e;
    box-shadow: none;
    font-weight: 400;
    color: #ffffff;
    width: 100%;
    margin: 0.5rem auto;
    display: block;
    border: 0;
    outline: 0;
    text-align: left;
    padding: 15px 40px 15px 15px; /* espai a la dreta per a la fletxa */
    border-radius: 15px;
    font-size: 1rem;
}
/* Fletxa avall (indica que és un desplegable) */
#buscador .search-filters .show-filters::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid currentColor;
}
#search-noresults {
    width: 49rem;
    height: 25rem;
    margin-bottom: 10rem;
    margin-top: 5rem;
}
#search-noresults p.nr-text {
    font-size: 0.9rem;
}
#search-noresults p.nr-again {
    font-size: 1rem;
}

.post-type-archive-producto .content-info {
    margin-top: 0;
}
#tax_bpm {
    width: 50%;
    display: inline;
}
.admin-bar #search-button {
    top: 92px;
}

.admin-bar #mailchimp-button {
    top: 92px;
}

#image_loading {
    z-index: 10000;
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25rem;
}

.globo-intro {
    text-align: center;
    display: block;
    margin: 0 auto 1.4rem;
    max-width: 45rem;
}
.globo-intro text {
    font-family: BeniRegular;
    font-size: 4.5rem;
}

/* Reescrit sense niar (oct. 2026), mateix motiu que .hide-mobile i
   .asi-de-facil: amb el `@media` dins de la regla, els navegadors que no
   entenen CSS Nesting es quedaven sense aquest marge inferior a escriptori. */
@media (min-width: 992px) {
    .home-section {
        margin-bottom: 2rem;
    }
}

#la-formula-surda .extra-bg2 {
    background: url(../images/djsurda_la_formula.png) no-repeat;
    width: 100%;
    height: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 71.2998%;
}
#musica .globo-intro {
    max-width: 49rem;
    margin-top: 2rem;
}

#calendario-section #calendario {
    text-align: center;
}
#calendario-section #calendario a.calendario-completo {
    margin-bottom: 120px;
}
#calendario-section #mashup-mixtape-border {
    border-bottom: 10rem solid #0b26ac;
    margin-top: -5px;
}

#calendario-section #mashup-mixtape {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
#calendario-section #mashup-mixtape .st0 {
    fill: #0b26ac;
}
#calendario-section #mashup-mixtape .st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #ffffff;
}
#calendario-section #mashup-mixtape .st2 {
    fill: #ffffff;
}
#calendario-section #mashup-mixtape .st3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #0b26ac;
}
#calendario-section #mashup-mixtape .st4 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #f6c40e;
}
#calendario-section #mashup-mixtape .st5 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: none;
    stroke: #0b26ac;
    stroke-miterlimit: 10;
}
#calendario-section #mashup-mixtape .st6 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #989898;
    stroke: #989898;
    stroke-miterlimit: 10;
}
#calendario-section #mashup-mixtape a {
    cursor: pointer;
}
/* Transició suau del color de les pastilles */
#calendario-section #mashup-mixtape a .st3,
#calendario-section #mashup-mixtape a .st4 {
    transition: fill 0.15s ease;
}
/* Pastilles MASHUPS/MIXTAPES (vectorials): en hover, groc→blau i text blau→groc */
#calendario-section #mashup-mixtape a:hover .st4,
#calendario-section #mashup-mixtape a:focus-visible .st4 {
    fill: #0b26ac;
}
#calendario-section #mashup-mixtape a:hover .st3,
#calendario-section #mashup-mixtape a:focus-visible .st3 {
    fill: #f6c40e;
}
/* Etiquetes REMIXES/SETS/MUSIC-BIOGRAPHY: dues imatges apilades al SVG — groga (.lbl-yellow)
   darrere i blava (.lbl-blue) davant. En hover, la blava s'esvaeix i deixa veure la groga,
   amb el groc EXACTE #f6c40e (els PNG s'han recolorit amb Pillow, no és un filtre aproximat). */
#calendario-section #mashup-mixtape .lbl-blue {
    transition: opacity 0.15s ease;
}
#calendario-section #mashup-mixtape a.remix:hover .lbl-blue,
#calendario-section #mashup-mixtape a.remix:focus-visible .lbl-blue,
#calendario-section #mashup-mixtape a.sets:hover .lbl-blue,
#calendario-section #mashup-mixtape a.sets:focus-visible .lbl-blue,
#calendario-section #mashup-mixtape a.musicbiography:hover .lbl-blue,
#calendario-section #mashup-mixtape a.musicbiography:focus-visible .lbl-blue {
    opacity: 0;
}
#calendario-section .content {
    border-bottom: 1rem solid #0b26ac;
    margin-bottom: 0;
}
#calendario-section .evento {
    margin-bottom: 4rem !important;
}
#calendario-section .evento .evento-home {
    margin: 0 3rem;
}
.evento {
    margin-bottom: 5rem;
}
.evento:last-child {
    margin-bottom: 7rem;
}
.evento a {
    text-decoration: none;
}
/*.evento h2 {
    color: #0b26ac;
    font-family: BeniRegular;
    margin-bottom: 1rem;
    font-size: 2.8rem;
    line-height: 0.85em;
}*/

.calendario-bottom {
    height: 25rem;
    background-image: url(../images/calendario-bottom.png);
    background-size: cover;
    background-position: bottom;
    margin-bottom: 2rem;
}
/*.page-template-template-calendario #calendario {
    border-top: 4rem solid #0b26ac;
}*/
.page-template-template-calendario .globo-intro {
    margin-top: 4rem;
    max-width: 50rem;
}
.page-template-template-calendario #tienda {
    padding-top: 0;
}
/* Layout net de l'esdeveniment: 2 columnes (data | títol+flyer) amb flex i gap,
   anul·lant els marges negatius de .row de Bootstrap i les amplades/paddings antics. */
.page-template-template-calendario .evento {
    padding: 0 15px;
    margin-bottom: 4.5rem;
    margin-top: 20px;
}
.page-template-template-calendario .evento .row {
    margin: 0;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1.5rem;
}







.page-template-template-calendario .evento .evento-esquerra {
    -ms-flex: 0 0 180px;
    flex: 0 0 180px;
    max-width: 180px;
    width: 180px;
    padding: 0;
    margin: 0;
    padding-top: 20px;
}
.page-template-template-calendario .evento .evento-dreta,
.page-template-template-calendario .evento .evento-dreta-titol {
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    /*padding: 0;*/
    margin: 0;

    background: #ffffff;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}
.page-template-template-calendario .evento .evento-dreta-titol {
    border-radius: 20px 20px 0 0;
    padding-bottom: 0;
}

.page-template-template-calendario .evento .evento-dreta-titol .new-post-title {
  background: transparent;
  padding: 0px;
  margin: 0px;
  border-radius:0px;
}
.page-template-template-calendario .evento:last-child {
    margin-bottom: 8rem;
}
/* (Bloc antic de .fecha eliminat — el disseny nou del globus de data viu més avall,
   al bloc "Calendari: globus de data".) */

.page-template-template-calendario .evento .evento-dreta .calendar-img:not(:first-of-type) img {
    margin-top: 1rem;
}
.page-template-template-calendario .evento .evento-dreta .calendar-img img {
    margin-bottom: 3rem;
}

#clubes {
    padding-bottom: 0rem;
}
#clubes .white {
    margin-top: 2rem;
}

#clubes a.directorio {
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto 2rem;
}
#clubes a.directorio img {
    display: block;
    max-width: 95%;
    margin: 0 auto;
}
#clubes .radios {
    width: auto;
    max-width: 20rem;
    display: block;
    margin: 0 auto;
}
#clubes .radios img {
    display: block;
    max-width: 100%;
    margin: 1rem auto;
}
#clubes .radios p {
    margin-top: -10px;
}
#clubes #globo-clubes {
    margin-top: 4rem;
}

#fiestas .proyectos-top {
    height: 6rem;
    background-image: url(../images/top-proyectos.png);
    background-size: cover;
    background-position: top;
    width: 100%;
    margin-bottom: -0.3rem;
}
#fiestas .blue-bg {
    padding-bottom: 7rem;
}
#fiestas .globo-intro text {
    font-size: 3.8rem;
}
#fiestas .proyectos-1 {
    margin-top: -30px;
    margin-bottom: 20px;
}
#fiestas .proyectos-2 {}
#fiestas .proyectos-2 .proyecto {
  margin-bottom: -10px;
}
#fiestas .proyectos p {
    font-size: 1rem;
}
#fiestas .newBtn {
    margin-top: 50px;
    margin-top: 47px;

}
#contacto {
    background: #f6c40e;
}
#contacto .red-bg {
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-top: 3rem;
    margin-top: -2rem;
}

#contacto .red-bg {
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-top: 3rem;
    margin-top: -2rem;
}
#contacto .red-bg .globo-intro text {
    font-size: 3.8rem;
}
#contacto .contact-left {
    /*margin-left: -2rem;*/
    /*max-width: 640px;*/
}
/*

*/
#contacto #contact-message {
    /*margin-top: -2.5rem;*/
    font-family: BeniRegular;
    font-size: 1.6rem;
}
.home #contact-form {
  margin-top: -4px;
}
#contacto #contact-form .form-txt {
    font-family: Open Sans, sans-serif;
    opacity: 1;
    padding: 10px;
    font-weight: 400;
    color: #000;
    box-shadow:none;
    margin-bottom: 0.5rem;
    border-radius: 15px;
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    background-color: #ffffff;
    background-clip: padding-box;
    border:none;
    width: 100%;
    padding: 15px;
}
#contacto #contact-form .form-txt:focus {
    background-color: #ffffff;
    outline: none;
}
#contacto #contact-form .comment-form input[type="email"],
#contacto #contact-form .comment-form input[type="text"],
#contacto #contact-form .comment-form input[type="url"],
#contacto #contact-form .comment-form textarea,
#contacto #contact-form .form-control,
#contacto #contact-form .search-form .search-field,
.comment-form #contacto #contact-form input[type="email"],
.comment-form #contacto #contact-form input[type="text"],
.comment-form #contacto #contact-form input[type="url"],
.comment-form #contacto #contact-form textarea,
.search-form #contacto #contact-form .search-field {
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
    padding: 10px;
}
#contacto #contact-form label.form-control-label {
    font-family: BeniRegular;
    color: #ffffff;
    font-size: 1.7rem;
}
#contacto #contact-form input[type="submit"] {
    letter-spacing: 0.08rem;
    font-family: BeniRegular;
    font-size: 2rem;
    background: #0b26ac;
    color: #ffffff;
    cursor: pointer;
    border-radius: 15px;
    &:hover {
        /*opacity: .85;*/
        background: #ffffff;
        color: #0b26ac;
    }
}
.boton-dark {
    color: #ffffff !important;
    background-color: #0b26ac !important;
    &:hover {
        background: #ffffff !important;
        color: #0b26ac !important;
    }
}
#mc_embed_signup_scroll #mc-embedded-subscribe {
    letter-spacing: 0.06rem;
    margin-top: 0.5rem;
    background: #0b26ac;
    color: #ffffff;
    display: block;
    text-align: center;
    width: 100%;
    font-family: BeniRegular;
    font-size: 2rem;
    border-radius: 20px;
    &:hover {
        /*opacity: .85;*/
        background: #ffffff;
        color: #0b26ac;
    }
}
#btn-buscar,
#btn_clear {
    height: 4rem;
    letter-spacing: 0.06rem;
    background: #0b26ac;
    color: #ffffff;
    display: block;
    text-align: center;
    width: 100%;
    font-family: BeniRegular;
    font-size: 2rem;
    border-radius: 20px;
    &:hover {
        background: #f6c40e!important;
        color: #0b26ac!important;
    }
}

#contacto .red-bg > .container {
    max-width: 55rem;
}
/* El text de l'asterisc ("* Sólo para fines promocionales") sempre a 18px del
   bloc anterior (oct. 2026).
   Abans no portava marge propi i l'aire depenia del que arrossegués el bloc de
   sobre: 18px després d'un bloc de fan art (mashup, video) i 0 després d'un
   bloc de text com el tracklist (mixtape), que és el cas que es veia enganxat.
   Com que els marges verticals de germans es fonen, declarar-lo aquí no suma
   res allà on ja n'hi havia 18: segueix sent 18 a mashup i video, i passa de
   0 a 18 a mixtape. Verificat als tres. */
.promocionales {
    font-size: 1rem;
    margin-top: 18px;
    /*margin-bottom: 3rem;*/
}
/* Caixa d'icones de compartir buida: fora (oct. 2026).
   Els posts de vídeo no porten aquestes icones, però el <div> es pinta igual,
   buit i amb alçada 0. Com que és un contenidor flex, els seus marges no es
   fonen amb els dels veïns: hi sumava 16px per sobre i 25 per sota, i el buit
   entre el vídeo i el bloc "Info:" quedava a 41px en lloc dels 25 de la resta
   de posts.
   `:not(:has(*))` el detecta sense dependre del tipus de post: vol dir "sense
   cap element a dins". `:empty` no serveix perquè el div conté un salt de
   línia. Amb `display:none` els marges del vídeo i del bloc de text es fonen i
   queden els 25px de sempre. Verificat a un post de vídeo i que no toca
   mashup ni mixtape, on la caixa sí que té icones.
   El selector nomena `.entry-content` a propòsit: unes quantes regles més
   avall hi ha `.social-posts { display: flex }`, que té la mateixa
   especificitat i ve després, o sigui que guanyava i aquesta regla no feia
   res. Amb la classe del pare per davant, guanya aquesta. */
.entry-content .social-posts:not(:has(*)) {
    display: none;
}
/* Botons de compartir — paleta Surda (design system). Tots en blau de marca,
   hover groc amb text blau (blanc sobre groc té poc contrast). Radi no-píndola. */
.social-more a,
.social-share a {
    vertical-align: baseline;
    text-align: center;
    text-decoration: none;
    padding: 0.5rem;
    width: 25%;
    background: var(--surda-blau);
    display: inline-block;
    color: #ffffff;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
    border-radius: 0.5rem; /* radi de marca: ni píndola (100%) ni angle recte */
    transition: background 0.2s ease, color 0.2s ease;
}
.social-more a:hover,
.social-share a:hover {
    background: var(--surda-groc);
    color: var(--surda-blau);
}

.social-more a.grid,
.social-share a.grid {
    width: 30%;
}
.social-more a.more,
.social-share a.more {
    margin-right: 0;
    width: 10%;
    background: #00a1dc;
}
.social-more a.more:hover,
.social-share a.more:hover {
    background: var(--surda-groc);
    color: var(--surda-blau);
}
/* ── Separació estàndard abans de les opcions de compartir ─────────────────
   `.social-share` hi és SEMPRE, així que és el lloc lògic per centralitzar
   aquest espai: així no depèn de quins elements opcionals (descàrrega,
   continguts relacionats) hi hagi a sobre.
   55px és la referència: és l'espai que ja quedava quan hi havia el bloc de
   continguts relacionats (venia del seu `margin-bottom`, que guanyava al 3rem
   d'abans en col·lapsar). Quan faltaven descàrrega i relacionats, el buit queia
   als 48px del 3rem —l'espai normal entre paràgrafs— i quedava massa just. */
.social-share {
    margin-top: 55px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}
.social-share .more .icon-plus {
  top: 2px;
  position: relative;
}
/* Logos inline (X i Threads) als botons de compartir: hereten el color del
   botó (blanc normal, blau al hover) i s'escalen amb el text. */
.social-share .twitter svg,
.social-share .threads svg,
.social-share .copy svg,
.social-more .twitter svg,
.social-more .threads svg {
  height: 1.2em;
  width: auto;
  fill: currentColor;
  vertical-align: -0.2em;
}
/* Copiar: la icona és més alta de proporció; la reduïm ~85% amb padding
   (box-sizing border-box) en lloc de scale per no deformar-la. */
.social-share .copy svg {
  padding: 0.09em 0;
}
/* VK: icona sola (sense text), la fem més gran per equiparar-la a la de X. */
.social-more .vk .icon-vk {
  font-size: 1.4em;
  vertical-align: -0.15em;
}
.social-more {
    text-align: center;
    margin-top: 1rem;
}
/* Flex igual que .social-share: així els salts de línia del HTML no compten com
   a espai i la separació entre botons és exactament la dels marges (10px),
   idèntica a la de la primera fila.
   IMPORTANT: .social-more és un .collapse de Bootstrap, que s'amaga amb
   `display: none`. El flex s'ha d'aplicar NOMÉS als estats visibles (.show i
   .collapsing); si es posa a la regla base, custom.css guanya a vendors.css i
   el panell queda sempre obert. */
.social-more.collapse.show,
.social-more.collapsing {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
}
/* Mateixa amplada que els botons de la primera fila (.grid) */
.social-more a {
    width: 30%;
}
.social-posts {
    margin: 1rem auto 2rem;
    margin-bottom: 25px;
}
/* ── Logos de xarxes del post: maquetació amb flex ─────────────────────────
   ABANS: icones `inline-block` amb `margin: 0 0.12rem`. El buit real entre
   icones era de 8px, però no venia només dels marges: 1,92 + 1,92 de marge
   MÉS ~4,2px de l'espai que generen els salts de línia del HTML entre elements
   inline. Per això retocar el 0.12 tenia tan poc efecte.
   ARA: `column-gap` fixa el buit de manera explícita (els salts de línia
   deixen de comptar) i `row-gap` controla la separació entre files.
   Motiu principal del canvi: amb marges NO es pot evitar que la primera icona
   d'una segona fila arrossegui marge esquerre —no existeix cap selector per al
   "primer element d'una fila"—. Amb `gap` l'espai va entre elements, així que
   cap fila comença desplaçada.
   Calibrat perquè la disposició no canviï: verificat icona per icona amb
   desplaçament vertical 0 i deriva horitzontal màxima de 0,15px acumulada. */
.social-posts {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: end;
    align-items: flex-end;   /* equival al `vertical-align: bottom` d'abans */
    column-gap: 8px;
    row-gap: 8px;            /* mateixa separació que entre icones */
}
.social-posts .social-p {
    text-decoration: none;
    margin-right: 0;
    margin-left: 0;
    display: inline-block;
}
.social-posts .social-p i {
    font-size: 2rem;
    vertical-align: bottom;
}
.social-posts .social-p .icon-promodj {
    font-size: 1.6rem;
}
.social-posts .social-p svg {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: bottom;
    fill: #0b26ac;
    transition: fill 0.2s ease;
}
/* Força el blau a tots els SVG inline, encara que portin fill propi o
   classes internes (.st0) que col·lisionen entre icones diferents. */
.social-posts .social-p svg,
.social-posts .social-p svg * {
    fill: #0b26ac !important;
}

.social-posts .social-p:hover svg,
.social-posts .social-p:hover svg * {
    fill: #f6c40e !important;
}


/* Compensació òptica de mida per icona.
   Totes es renderitzen a 2rem; ajusta el scale de cada xarxa perquè
   es vegin visualment iguals. >1 augmenta, <1 redueix. No cal tocar cap SVG. */
.social-posts .social-p svg {
    transform-origin: center;
}

.social-posts .social-p--remixaudio svg  { padding:0.025em; }
.social-posts .social-p--soundcloud svg  { transform: scale(1.15);width:2.65rem; }
.social-posts .social-p--bandcamp svg    { padding:0.025em; }
.social-posts .social-p--spotify svg     { padding:0.025em; }
.social-posts .social-p--ivoox svg       { transform: translateY(-3px); padding:0.0em; }
.social-posts .social-p--hearthis svg    { padding:0.025em; }
.social-posts .social-p--youtube svg     { transform: scale(1.1); }
.social-posts .social-p--vimeo svg       { transform: scale(1.05); padding: 1px; }
.social-posts .social-p--dailymotion svg { padding:0.1em; }
.social-posts .social-p--streamable svg  { transform: scale(1.1);width:2.2rem;  }
.social-posts .social-p--instagram svg   { padding:0.1em; }
.social-posts .social-p--tiktok svg      { transform: translateY(1px); padding:0.05em; }
.social-posts .social-p--facebook svg    { padding:0.025em; }
.social-posts .social-p--vk svg          { transform: translateY(1px) scale(1.20); }



/* Ajustos per xarxa. Amb el canvi a flex ara són DIFERÈNCIES respecte del
   `column-gap` de 8px, no marges absoluts. Cada valor és l'antic menys la base
   de 0.12rem que abans portaven totes; així els buits queden idèntics.
   (p. ex. SoundCloud: 0.30 − 0.12 = 0.18) 
.social-posts .social-p--soundcloud { margin-left: 0.18rem; margin-right: 0.12rem; }
.social-posts .social-p--youtube { margin-left: 0.04rem; margin-right: 0.07rem; }
.social-posts .social-p--vimeo { margin-left: -0.07rem; margin-right: -0.18rem; }
.social-posts .social-p--tiktok { margin-left: -0.20rem; margin-right: -0.20rem; }
.social-posts .social-p--vk { margin-left: 0.06rem; margin-right: 0.06rem; }
/* iVoox: compensació òptica.
   El logo és una X que s'estreny per la cintura, de manera que deixa llenç
   buit DINS de la seva pròpia caixa: mesurat, un 13,8% a cada costat a mitja
   alçada (uns 4,4px), mentre que spotify, bandcamp i mixcloud hi tenen la
   tinta tocant la vora (0%). Amb el mateix `gap` de 8px, doncs, el buit que
   es VEIA entre spotify i iVoox era de 12,4px contra els 8px dels altres.
   Aquests -2,5px per banda el redueixen a ~9,9px (opció triada pel client
   entre -2,5 / -3,5 / -4,4).
   No s'iguala del tot a propòsit: la X és estreta a dalt (43% de buit) i
   ampla a baix (6%), així que cap valor únic pot equilibrar-la a totes les
   alçades; passar-se deixaria la part baixa escanyada. *
.social-posts .social-p--ivoox { margin-left: -2.5px; margin-right: -2.5px; }



/* (Eliminat `.social-p:first-child { margin-left: 0 }`: amb `gap` cap icona
   porta marge esquerre de base, així que ja no cal. A més, aquella regla només
   arreglava la primera icona del conjunt, no la primera de la segona fila —que
   és justament el que es volia corregir.) */





#pedido,
#tienda {
    margin-top: 2rem;
}


#version-incluida-descarga .box-title {
  margin-top: 25px !important;
}
/* Bloc "Fan art cover" i companyia: títol + contingut.
   JERARQUIA (oct. 2026). Abans el títol quedava a 11,2px del bloc anterior i a
   18 de la seva pròpia imatge: estava més a prop del que NO li pertany que del
   que descriu. Ara:
     · 25px per sobre → el separa del bloc anterior, com la resta de blocs de text
     · 10px fins a la seva imatge → s'hi agrupa
   Mateix criteri que al títol i subtítol de la fitxa d'un set. */
.fan-art-cover .other-title {
    margin-bottom: 10px !important;
}
/* Quan el bloc no porta imatge sinó TEXT (p. ex. "Música:" i "Vídeo:" als
   posts de vídeo), el títol s'hi enganxa igual que "Info:" al seu text:
   13,8px de la tinta del títol al cim de la primera línia (oct. 2026).
   Abans n'hi havia 23,8 i el títol es veia despenjat. Detectat pel client.
   Calen les dues regles, perquè els 10px de dalt no són l'únic marge en joc:
   el paràgraf que genera l'editor en porta 8 de propis, i com que els marges
   verticals es fonen, el buit era el més gran dels dos. Treure només un no
   movia gairebé res (23,8 → 21,8).
   El cas de la imatge queda fora amb `:not(:has(+ a))`: allà els 10px sí que
   fan falta i el buit ja és correcte. Verificat a video, mashup i set. */
.fan-art-cover:not(:has(+ a)) .other-title {
    margin-bottom: 0 !important;
}
.fan-art-cover > div > p:first-child {
    margin-top: 0;
}
.fan-art-cover {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
/* Només quan el bloc va seguit de la SEVA imatge (la portada alternativa va en
   un <a> germà, no a dins). En els posts sense imatge, el marge inferior es
   queda com estava perquè allà separa del text de l'asterisc.
   El valor és negatiu i el número és rar perquè surt d'una resta, no d'un
   criteri: vegeu el bloc de sota. */
.fan-art-cover:has(+ a) {
    margin-bottom: -2.6px !important;
}
/* Compensació de l'espai intern del text.
   Aquest bloc de vegades acaba amb una IMATGE (portades alternatives) i de
   vegades amb un PARÀGRAF de text (p. ex. la descripció dels sets). Una imatge
   acaba exactament on acaba la seva caixa, però un text hi arrossega l'espai
   dels descendents i l'interlineat de l'última línia: mesurat, 7,2px. Amb els
   mateixos 25px de marge, el buit fins al "* Sólo para fines promocionales" es
   veia de 25px després d'una imatge i de 32,2px després de text.
   `:not(:has(img))` aplica la compensació NOMÉS quan no hi ha imatge, així que
   s'ajusta sola a cada pàgina i no toca cap altre espaiat.
   Verificat: buit visual de 25,4px (text) contra 25,0px (imatge).
   Cal !important per guanyar la regla de sobre.
   `:not(:has(+ a))` exclou el cas del bloc seguit de la seva portada, que es
   resol a la regla de sobre: la imatge va en un <a> GERMÀ, o sigui que el bloc
   tampoc té cap <img> a dins i, sense aquesta exclusió, aquesta regla (que ve
   després) li guanyaria. */
.fan-art-cover:not(:has(img)):not(:has(+ a)) {
    margin-bottom: 18px !important;
}
/* Títol del bloc enganxat a la seva imatge, igual que un títol de text ho està
   del seu text (oct. 2026).
   REFERÈNCIA: a "Mezcla de:" hi ha 13,8px de buit entre la tinta del títol i el
   cim de la primera línia de text. Al bloc de fan art n'hi havia 24,4 fins a la
   imatge: el títol es veia despenjat del que descriu. Detectat pel client.
   D'aquests 24,4 només se'n poden retallar 8 amb marges positius; a partir
   d'aquí hi ha un terra de 16,4px que no el posa cap marge, sinó les caixes de
   text: l'espai per sota de la línia del títol i el que la caixa de línia de
   l'enllaç reserva per sobre de la imatge. Per això el valor és negatiu: -2,6px
   és exactament la resta que falta (16,4 - 13,8).
   Verificat a /mashup/013-djsurda-tonight-i-got-devil-hangover/. */
/* .social-locker-link eliminada (set. 2026): el <div> que la portava era un
   embolcall inútil dins del botó de descàrrega i ja no existeix. */
#sociallocker-link i {
    font-size: 3rem;
    vertical-align: text-bottom;
    margin-right: 10px;
    /*display: block;*/
}
.contenido-relacionado {
    margin-bottom: 55px;
    margin-top: 20px;
}



#pedido .globo-intro,
#tienda .globo-intro {
    max-width: 45rem;
}
#pedido a:focus-visible path.a,
#pedido a:hover path.a,
#tienda a:focus-visible path.a,
#tienda a:hover path.a {
    fill: #cf5d64;
}
#pedido {
    margin-top: 0;
}
#pedido .globo-intro {
    max-width: 50rem;
}
#pedido .globo-intro text {
    font-size: 4rem;
}
.post-type-archive-producto .col-producte {
    margin-bottom: 4rem;
}
.post-type-archive-producto .product-thumb img {
    display: block;
}
.post-type-archive-producto .product-thumb:hover img {
    opacity: 0.85;
}
.post-type-archive-producto #shopping-cart {
    width: 11rem;
    right: 4.3rem;
    top: calc(50% - 4rem);
    position: fixed;
    z-index: 1040;
}

.post-type-archive-producto #tienda {
    margin-top: 5rem;
    margin-bottom: 3.3rem;
    margin-left: 4rem;
}

.post-type-archive-producto .main-producto .globo svg text {
    font-family: BalginDisplayBold;
}
.post-type-archive-producto .main-producto .globo svg text.title {
    font-size: 36px;
    fill: #0b26ac;
}
.post-type-archive-producto .main-producto .globo svg text.precio {
    font-size: 52px;
    fill: #ffffff;
}
.post-type-archive-producto .main-producto .globo svg text.precio-alt {
    font-size: 52px;
    fill: #0b26ac;
}
.post-type-archive-producto .main-producto .globo svg text.ofertas {
    font-family: BeniRegular;
    font-size: 40px;
    letter-spacing: 0.035em;
    fill: #0b26ac;
}
.post-type-archive-producto .back-table thead {
    position: relative;
    z-index: -1;
}
.post-type-archive-producto #envia-tu-pedido {
    height: auto;
    min-height: auto;
    font-size: 2.5rem;
    margin-bottom: 3.75rem;
}
.post-type-archive-producto #contact-message-pedido {
    margin-top: 3rem;
    font-family: BeniRegular;
    font-size: 1.6rem;
}
.post-type-archive-producto #contact-form-pedido {
    margin-top: 4.2rem;
}
.post-type-archive-producto #contact-form-pedido .form-txt {
    opacity: 1;
    padding: 10px;
    font-weight: 400;
    color: #000;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    border-radius: 1px;
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    width: 100%;
}
.post-type-archive-producto #contact-form-pedido .form-txt:focus {
    background-color: #ffffff;
    outline: none;
}
.post-type-archive-producto .producto-table {
    margin-bottom: 2rem;
}
.post-type-archive-producto .producto-table .products-form {
    width: 95%;
    margin-left: 5%;
}
.post-type-archive-producto .producto-table td,
.post-type-archive-producto .producto-table th {
    text-align: center;
}
.post-type-archive-producto .producto-table .add-producto,
.post-type-archive-producto .producto-table .remove-producto {
    font-family: BeniRegular;
    margin-top: -5px;
    background: none;
    color: #f6c40e;
    font-weight: 700;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 0;
    border: 0;
}
.post-type-archive-producto .producto-table .add-producto:hover,
.post-type-archive-producto .producto-table .remove-producto:hover {
    color: #992d34;
}
.post-type-archive-producto .producto-table .add-producto {
    position: relative;
    font-size: 4rem;
    top: -2rem;
    margin-right: 0.1rem;
    float: right;
}

.post-type-archive-producto .producto-table input,
.post-type-archive-producto .producto-table select {
    text-align: center;
}
.post-type-archive-producto .product-form {
    margin-bottom: -50px;
}
.post-type-archive-producto .pedido-table {
    margin-bottom: 0.5rem;
    width: 100%;
    font-family: BeniRegular;
    font-size: 1.5rem;
}

.post-type-archive-producto .pedido-table input,
.post-type-archive-producto .pedido-table select {
    font-size: 1rem;
    padding: 0;
}
.post-type-archive-producto .pedido-table input {
    padding: 2px 5px;
}
.post-type-archive-producto .pedido-table thead {
    border: 1px solid #0b26ac;
    border-width: 0 1px;
    background: #0b26ac;
    color: #ffffff;
    letter-spacing: 0.08rem;
}
.post-type-archive-producto .pedido-table thead th {
    border-right: 1px solid #0b26ac;
}
.post-type-archive-producto .pedido-table thead th:last-child {
    border-right: 0;
}
.post-type-archive-producto .pedido-table tbody {
    border: 1px solid #f6c40e;
}
.post-type-archive-producto .pedido-table tbody td {
    background: #ffffff;
    border: 1px solid #0b26ac;
    border-width: 0 0 1px 1px;
}
.post-type-archive-producto .pedido-table tbody td:last-child {
    border-width: 0 1px 1px;
}
.post-type-archive-producto #final-table {
    background: #ffffff;
    margin-bottom: 3rem;
    margin-top: 2.25rem;
}
.post-type-archive-producto #final-table thead {
    background: #0b26ac;
}
.post-type-archive-producto #final-table thead tr {
    color: #ffffff;
}
.post-type-archive-producto #final-table thead tr th {
    letter-spacing: 0.1rem;
    border: 1px solid #0b26ac;
    text-align: center;
    font-family: BeniRegular;
    font-size: 1.5rem;
}
.post-type-archive-producto #final-table tbody tr td {
    border: 1px solid #0b26ac;
    text-align: center;
    font-family: BeniRegular;
    font-size: 1.5rem;
    color: #464a4c;
}
.post-type-archive-producto #final-table tbody tr td:first-child {
    border-left: 1px solid #0b26ac;
}
.post-type-archive-producto #final-table tbody tr td:last-child {
    border-right: 1px solid #0b26ac;
}
.post-type-archive-producto .pedido-form {
    background: #f6c40e;
    padding-bottom: 5rem;
    padding-top: 3rem;
}
.comment-form .post-type-archive-producto .pedido-form input[type="email"],
.comment-form .post-type-archive-producto .pedido-form input[type="text"],
.comment-form .post-type-archive-producto .pedido-form input[type="url"],
.comment-form .post-type-archive-producto .pedido-form textarea,
.post-type-archive-producto .pedido-form .comment-form input[type="email"],
.post-type-archive-producto .pedido-form .comment-form input[type="text"],
.post-type-archive-producto .pedido-form .comment-form input[type="url"],
.post-type-archive-producto .pedido-form .comment-form textarea,
.post-type-archive-producto .pedido-form .form-control,
.post-type-archive-producto .pedido-form .search-form .search-field,
.search-form .post-type-archive-producto .pedido-form .search-field {
    border-radius: 1px;
    padding: 10px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
}
.post-type-archive-producto .pedido-form input[type="submit"] {
    background: #0b26ac;
    padding: 10px;
    font-family: BeniRegular;
    font-size: 2rem;
    color: #ffffff;
    letter-spacing: 0.06rem;
}
.post-type-archive-producto .after-pedido {
    font-size: 1rem;
    margin-top: 1rem;
}
/*.tax-title {
    margin-top: 2rem;
    text-align: center;
    background: #f6c40e;
    font-family: BeniRegular;
    font-size: 2rem;
    border-radius: 5px;
    color: #0b26ac;
}

.tax-title a,
.tax-title a:active,
.tax-title a:focus,
.tax-title a:hover {
    color: #0b26ac;
}

.tax-title-remix {
    margin-top: 2rem;
    text-align: center;
    background: #f6c40e;
    font-family: BeniRegular;
    font-size: 3rem;
    border-radius: 5px;
    color: #ffffff;
}

.tax-title-remix a,
.tax-title-remix a:active,
.tax-title-remix a:focus,
.tax-title-remix a:hover {
    color: #ffffff;
}

*/



div.release {
    /*margin-top: 1rem;*/
    margin-bottom: 40px;
}
/* Aire entre fileres a /set/. Valor propi, validat en pantalla pel client:
   les targetes de sets acaben en el llistat de temes i no en portada, i aquí
   el buit que es veu bé no és el mateix número que a mashups.
   Es declara com a variable perquè la compensació de l'última filera
   (`.post-type-archive-set .archive-grid-a`, més avall) el segueixi sol: si
   anessin per separat, canviar-ne un i oblidar l'altre desquadra el buit fins
   al formulari de newsletter. */
.post-type-archive-set {
    --surda-esp-filera-set: 54px;
}
.post-type-archive-set div.release {
    margin-bottom: var(--surda-esp-filera-set, 54px);
}
div.release img {
  display: block;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
div.release > a {
    text-decoration: none;
}
div.release > a:hover,
div.release > a:hover h2 {
    color: #f6c40e;
}
div.release h2 {
    text-align: center;
    color: #0b26ac;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: 0em;
    line-height: 0.95em;
    text-transform: uppercase;
    margin: 0;


}
div.release h2 .white-title {
    font-size: 2.2rem;
}
/* ── Curated sets: .release s'hi usa per heretar la tipografia del títol
   (div.release h2 → Bebas Neue), però la regla `div.release img` està pensada
   per a la portada de l'any de MASHUPS i aquí també atacava el reproductor:
   inflava les miniatures 40×40 de la playlist a width:100% i afegia 2rem de
   marge a la portada. Ho anul·lem només dins del contingut del reproductor. */
.post-type-archive-set div.release .entry-content img {
    margin-top: 0;
    margin-bottom: 0;
}
.post-type-archive-set div.release .playlist .playlist-cover img {
    width: auto;
}




/* Separació subtítol → graella. El buit visible és aquest marge + els 16px de
   marge inferior del subtítol, per això es resta 16 a la variable.
   Verificat: dona 72px, igual que a /musicbiography/. */
.archive-grid-a {
    margin-top: calc(var(--surda-esp-bloc, 72px) - 16px);
}
/* (La regla que hi havia aquí per al llistat de temes de la graella de sets ha
   passat a la regla base de `.playlist`, perquè el mateix buit mort es donava
   també a la pàgina de cada set. Vegeu-la allà.) */
.post-type-archive-set .archive-grid-a {
    /* El `margin-top` surt de la regla general `.archive-grid-a`: aquí hi
       havia un 60px propi que feia que /set/ tingués 76px de separació on la
       resta en tenen 72. Eliminat (oct. 2026). */

    /* Separació fins al formulari de newsletter (set. 2026).
       El marge inferior de `div.release` és l'aire ENTRE fileres; a l'última
       filera sobra, perquè allà ja no separa res. Fins ara el tapava la barra
       separadora, però s'ha tret d'aquesta pàgina (vegeu archive-set.php) i el
       buit fins al formulari se'n anava massa avall.
       Amb aquest marge negatiu s'anul·la el de l'última filera i torna a
       l'estàndard del web: 144px des de la pastilla blanca (128px del
       formulari + 16px de la pastilla).
       Va lligat a la variable: si canvia l'aire entre fileres, aquesta
       compensació el segueix sola. */
    margin-bottom: calc(var(--surda-esp-filera-set, 54px) * -1);
}

.mini-cover {
    width: 33.333%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Columnes de la graella de sets (oct. 2026 — reescrit).
   ABANS això eren dues regles: una amb els `@media` NIATS a dins (sintaxi CSS
   Nesting) i `width: 100% !important`, i una segona amb `width: 50%` sense
   !important. Els navegadors que no entenen el niat descartaven els dos
   `@media`, es quedaven amb el 100% !important —que la segona regla no podia
   guanyar— i la graella es veia d'UNA SOLA COLUMNA. CSS Nesting no va arribar a
   Safari fins al maig de 2023, així que a macOS High Sierra (Safari 13 com a
   molt) passava sempre.
   Ara són media queries normals, compatibles amb qualsevol navegador, i ja no
   calen !important perquè no competeixen entre elles. El comportament als
   navegadors moderns és idèntic al d'abans: 1 columna fins a 768px,
   2 de 769 a 1239 i 3 a partir de 1240. */
.post-type-archive-set .mini-cover {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 769px) {
    .post-type-archive-set .mini-cover {
        width: 50%;
    }
}
@media (min-width: 1240px) {
    .post-type-archive-set .mini-cover {
        width: 33.333%;
    }
}
.tax-mashup-release .mini-cover {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
}

.mini-cover-content {
    /*background-color: #fff;
    padding: 20px;
    border-radius: 20px;*/
}
.mini-cover-content .release h2 {
    margin-bottom: 35px;
}


.mini-cover-content .archive-grid-a-title {
    background-color: #ffffff;
    padding: 20px;
    padding-bottom: 9px;
    padding-top: 13px;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.post-type-archive-set .mini-cover-content .archive-grid-a-title {
    background-color: transparent;
    padding: 0px;
    border-radius:0px;
    margin-bottom: 1rem;
    display: contents;
}

/* Títols en píndola blanca dels arxius de REMIXES i de RÀDIO.
   .white-title és `display: inline` amb `padding: 20px` i fons blanc. En un
   element inline el padding NO eixampla l'alçada de línia, de manera que en un
   títol de dues línies —com "Extended Versions"— es dibuixa UN rectangle blanc
   PER LÍNIA i el de sota es pinta a sobre del de dalt, menjant-se'n la meitat.
   Amb `inline-block` la píndola passa a ser una sola caixa que creix en alçada
   segons les línies que calguin, i el fons blanc es manté intacte. */
/* (La píndola centrada de la ràdio s'ha eliminat: ara segueix el mateix patró
   de banda blanca que mashup, remix i set — vegeu el bloc de sota.) */

/* ── Graella d'arxius: banda blanca del títol unida a la portada ────────────
   Patró establert a /set/ (`a.link-set`): el títol va sobre una banda blanca
   que ocupa TOTA l'amplada de la cel·la, amb els cantons de dalt arrodonits, i
   que TOCA la portada de sota.
   A mashup i remix el fons blanc el portava el <span> interior, que s'encongia
   al text i quedava centrat, i a més la portada hi afegia 2rem de marge
   superior (de `div.release img`). Aquí es trasllada el fons blanc a l'<h2>
   —que ja ocupa tota l'amplada— i s'anul·la el marge superior de la imatge. */
.post-type-archive-mashup .mini-cover h2,
.post-type-archive-remix .mini-cover h2,
.page-template-template-radio .mini-cover h2 {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 12px;
    margin: 0;
}
/* Cantons de BAIX també arrodonits (oct. 2026, decisió del client).
   La cel·la són dues peces: la banda blanca del títol a dalt (regla de sobre) i
   la portada a sota, que és qui toca la vora inferior. Per això el radi va a la
   imatge i no a cap contenidor: el <div> de la cel·la no té fons ni retalla res.
   Mateix radi que a dalt, 20px, perquè la cel·la quedi simètrica.
   La ràdio no hi entra: el client ha demanat mashups i remixos. El dia que
   s'unifiqui la seva graella, s'hi afegeix el selector i prou. */
.post-type-archive-mashup .mini-cover img,
.post-type-archive-remix .mini-cover img {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
/* Mashup i remix fan servir `archive-grid-a-title`: el marcatge de les dues
   graelles és idèntic a propòsit (oct. 2026). Remix feia servir `white-title`
   i es va unificar.
   La ràdio encara porta `white-title` perquè la seva plantilla no s'ha tocat;
   el dia que s'unifiqui, només cal canviar-la allà i treure-la d'aquí. */
.post-type-archive-mashup .mini-cover .archive-grid-a-title,
.post-type-archive-remix .mini-cover .archive-grid-a-title,
.page-template-template-radio .mini-cover .white-title {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: block;
}
/* Només el marge SUPERIOR: el de sota (2rem) segueix separant les files. */
.post-type-archive-mashup .mini-cover img,
.post-type-archive-remix .mini-cover img,
.page-template-template-radio .mini-cover img {
    margin-top: 0;
}

.set-header {
    text-align: center;
}
/* Bloc blanc del títol + subtítol: ha de fer de "capçalera" de la targeta i
   TOCAR la portada de sota, sense separació.
   · `block` (abans inline-block) perquè ocupi sempre tota l'amplada de la
     cel·la, també quan el títol és curt.
   · Només s'arrodoneixen els cantons de dalt; els de baix han de quedar
     rectes per unir-se amb la imatge.
   · margin-bottom a 0 (abans 0.25rem). */
.post-type-archive-set a.link-set {
    background:#ffffff;
    display: block;
    padding: 16px 20px 12px;
    border-radius: 20px 20px 0 0;
    margin-bottom: 0;
}
/* L'altra meitat del buit: .entry-content hi posava 16px de marge superior. */
.post-type-archive-set .mini-cover .entry-content {
    margin-top: 0;
}










.page-template .clubes .club {
    margin-bottom: 3rem;
    text-align: center;
}
.page-template .clubes .club a {
    text-decoration: none;
}
.page-template .clubes .club a img {
    display: block;
}

#fiestas .proyectos h2,
.page-template .clubes .club .club-name h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 0.95em;
}
#fiestas .proyectos h2 {
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 12px;
}
.page-template .clubes .club .club-name {
    display: inline-block;
    margin-top: -0px;
    font-size: 1.6rem;
}
.page-template .clubes .club .club-name h2 {
    font-size: 2.2rem;
    margin-bottom: 3px;
}
.page-template .clubes .club .city {
    font-family: Open Sans, sans-serif;
    display: block;
    font-size: 1rem;
}

.pedido .custom-page-header {
    padding-top: 1.5rem;
}
.pedido main.main {
    background: #f6c40e;
    padding-bottom: 5rem;
}
.pedido footer.content-info {
    margin-top: 0;
}
.post-type-archive-producto .tax-title {
    margin-bottom: 3rem;
}

.post-type-archive-set .entry-title,
.tax-programa .entry-title {
    text-align: center;
    font-family: BeniRegular;
    margin-bottom: 0.5rem;
    font-size: 2.2rem;
}
.tax-programa .subtitle {
    color: #0b26ac;
    text-align: center;
    font-size: 1rem;
    max-width: 120%;
    width: 120%;
    margin-left: -10%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.post-type-archive-set .archive-grid-a-subtitle {
    color: #0b26ac;
    text-align: center;
    font-size: 1rem;
    margin-top: 0.35rem;
}
.post-type-archive-set .wp-playlist-current-item,
.tax-programa .wp-playlist-current-item {
    height: 100% !important;
}
.error404 .wrap .btn-link {
    transition: color 0.2s ease;
}
.error404 .wrap .btn-link:focus-visible,
.error404 .wrap .btn-link:hover {
    text-decoration: none;
    color: #f6c40e;
}
.error404 .wrap .btn-link,
.error404 .wrap .btn-link:active,
.error404 .wrap .btn-link:focus,
.error404 .wrap .btn-link:hover {
    outline: 0;
    box-shadow: none;
    border: 0;
}
.error404 .wrap .btn-link:hover .globo .d {
    fill: #f6c40e;
}
.error404 .wrap .text {
    padding-top: 3rem;
}
.error404 .wrap .globo {
    display: inline-block;
    width: 6rem;
    max-width: 100%;
    margin-top: 53px;
}

.error404 .wrap .back-previous .globo {
    transform: rotate(180deg);
    margin-top: 55px;
}
.error404 .wrap #tienda {
    margin-top: 1rem;
}
.open-tracklist {
    transition: font-size 0.5s ease;
    font-size: 0.75rem;
    color: #0b26ac;
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 0.5;
    margin-top: 1.1rem;
}
.open-tracklist .tracklist-img {
    width: 2rem;
    transition: width 0.5s ease;
}
/* La icona ara és un SVG incrustat i no una imatge (oct. 2026), i això demana
   dues coses que l'<img> no necessitava: `height:auto` perquè l'alçada la
   calculi la proporció del viewBox, i `display:block` + marges automàtics
   perquè quedi centrada sense dependre de la línia de text — un SVG en línia
   recolza sobre la línia base i arrossega l'espai dels descendents.
   El color no es declara enlloc: el `fill="currentColor"` del fitxer fa que
   hereti el de l'enllaç, o sigui blau en repòs i groc on hover, amb la regla
   `.open-tracklist:hover` que ja hi havia. */
.open-tracklist svg.tracklist-img {
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.open-tracklist.collapsed {
    font-size: 1.1rem;
    margin-top: 1.5rem;
}
/* La zona clicable s'ajusta al contingut i no va de banda a banda (oct. 2026).
   L'enllaç és de bloc i, sense això, ocuparia tota l'amplada de la columna:
   el cursor canviava de forma molt abans d'arribar al text. Amb `fit-content`
   es queda a l'ample de la frase (161px aquí) i els marges automàtics que ja
   hi havia el mantenen centrat. `max-width` evita que es desbordi si algun dia
   la frase es tradueix per una de molt llarga en una columna estreta. */
.open-tracklist {
    width: fit-content;
    max-width: 100%;
}
/* Sense subratllat (oct. 2026). Això no és un enllaç dins d'un text sinó un
   botó: icona i frase junts, centrats i amb la zona clicable ajustada. El
   canvi de color ja diu que reacciona, i el subratllat hi feia nosa.
   Cal nomenar `.white` perquè la regla que el subratlla és `.white a`, que
   d'altra manera guanya per especificitat. Els enllaços dins dels textos del
   post no es toquen: segueixen subratllats, com es va decidir. */
.white a.open-tracklist,
a.open-tracklist {
    text-decoration: none;
}
/* La frase va sota la icona, dins del mateix enllaç. Els marges reprodueixen
   els que abans posava la separació entre els dos enllaços: 1,5rem amb el
   tracklist plegat i 1,1rem amb el tracklist obert, que és la mida que té la
   icona a cada estat. */
.open-tracklist .tracklist-label {
    display: block;
    margin-top: 1.1rem;
}
.open-tracklist.collapsed .tracklist-label {
    margin-top: 1.5rem;
}
/* Els 3rem de separació fins a l'asterisc eren farciment DE L'ENLLAÇ, o sigui
   que formaven part de la zona clicable: es podia clicar 48px per sota del
   text, on no hi ha res. Ara són marge.
   El número no és 48 sinó 66 perquè el farciment se sumava als 18px de marge
   de l'asterisc, mentre que dos marges es fonen i només compta el més gran.
   66 = els 48 d'abans + aquells 18. Mesurat: el buit visible no es mou. */
.open-tracklist.collapsed.tracklist-text {
    padding-bottom: 0;
    margin-bottom: 66px;
}
.open-tracklist.collapsed .tracklist-img {
    width: 3rem;
}
.open-tracklist:hover {
    color: #f6c40e;
}
/* La icona i la frase s'encenen alhora perquè ara són UN SOL enllaç (vegeu el
   comentari a templates/content-single-mixtape.php). La regla amb `:has()`
   que ho vinculava quan eren dos enllaços germans s'ha tret: ja no cal, i
   així també funciona als navegadors sense `:has()`. */

.admin-bar.post-type-archive-producto #shopping-cart svg {
    max-width: 100%;
}
.page-template-template-musicbiography article.set h1,
.single-set h1 {
    text-align: center;
    margin-bottom: 0.5rem;
}
.page-template-template-musicbiography article.set .subtitle,
.single-set .subtitle {
    text-align: center;
}
.page-template-template-musicbiography article.set .wp-playlist .mejs-container,
.page-template-template-musicbiography article.set .wp-playlist .mejs-container .mejs-controls,
.page-template-template-musicbiography article.set .wp-playlist .mejs-embed,
.page-template-template-musicbiography article.set .wp-playlist .mejs-embed body,
.single-set .wp-playlist .mejs-container,
.single-set .wp-playlist .mejs-container .mejs-controls,
.single-set .wp-playlist .mejs-embed,
.single-set .wp-playlist .mejs-embed body {
    left: 21.75%;
    top: 24% !important;
}
.page-template-template-musicbiography article.set .playlist,
.single-set .playlist {
    margin-bottom: 1.5rem;
}
.apariciones {
    margin-top: 3rem;
    margin-bottom: 0rem;
}
.updated-mashup {
    width: 90%;
    margin-left: 5%;
    margin-top: 1.5rem;
}
.updated-mashup img {
    margin-top: 1rem;
}
.redirection {
    font-size: 1rem;
    margin-bottom: 2rem;
    margin-top: -1.5rem;
}
.gorra-img img {
    width: 90%;
}

.page-template-template-guide img {
    margin: 0.5rem auto 1rem !important;
    display: block;
}

.single-preview h1.entry-title {
    margin-top: 7rem;
}
h1.set-title {
    margin-bottom: 0.5rem;
}
.set-link {
    margin-top: 0.5rem;
    font-size: 0.95rem;
}
.set-link a {
    color: var(--surda-blau, #0b26ac);
    text-decoration: underline;
    opacity: 0.75;
}
.set-link a:hover {
    opacity: 1;
}
.single-audience .back-title {
    margin-bottom: 4rem;
}
.single-audience .entry-content {
    margin-top: 0;
}
.single-audience iframe {
    margin: 0 auto;
}
/* Títol de secció que ve després de la barra separadora.
   El −2rem compensa els 2rem de marge inferior que porta la caixa blanca de la
   barra (`.archive-grid-a .white:has(> hr.end)`), de manera que el buit fins a
   la pastilla groga és el que toca i no la suma dels dos.
   Hi havia només `#all-mashups`: a `/remix/` faltava i el títol quedava 32px
   més avall que a mashups (125px contra 93px, mesurat en viu). Les dues
   pàgines han de ser idèntiques. */
#all-mashups,
#all-remixes {
    margin-top: -2rem;
}
.playlist-audio.mejs-audio {
    margin-bottom: 0;
    margin-top: 0;
}

/* ── Reproductor d'àudio (MediaElement) — base: reproductor dels POSTS ───────
   Fons blau, icones de l'sprite blanc i tipografia per defecte (llegible).
   Els SETS tenen el seu propi bloc d'excepcions just a sota (fons clar i
   colors invertits); aquí s'hi va unificar la tipografia, que als sets duia
   BeniRegular i icones dibuixades a mà de difícil lectura.

   Codi de colors de la barra de progrés:
     · gris     = encara no reproduït   (.mejs-time-total, el carril)
     · blanc    = carregat, pendent     (.mejs-time-loaded)
     · blau cel = ja reproduït          (.mejs-time-current)

   L'!important és necessari perquè wp-mediaelement.css s'encua tard (des de la
   plantilla) i pot carregar-se després d'aquest full. */
.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-time-total {
  background: var(--surda-gris-max, #989898) !important;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-time-loaded {
  background: #ffffff !important;
}
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-time-current {
  background: var(--surda-blau-clar, #00a1dc) !important;
}
/* Fora el tirador blanc de posició (als posts no n'hi havia) */
.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-time-rail .mejs-time-handle-content,
.mejs-time-handle,
.mejs-time-handle-content {
  display: none !important;
}
/* Volum: carril gris i nivell actual blanc */
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-horizontal-volume-total {
  background: var(--surda-gris-max, #989898) !important;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-horizontal-volume-current {
  background: #ffffff !important;
}

/* ── Gruix de les barres — ELS DOS REPRODUCTORS (oct. 2026) ────────────────
   Les mides de sèrie de MediaElement (progrés 10px, volum 8px) quedaven primes
   al costat del temps i les icones. Es pugen a 14px i 11px.
   Es va provar primer només al reproductor blanc i després el client ho va
   voler als dos, així que viu aquí, al bloc comú, i no duplicat a l'excepció
   dels sets.
   CENTRAT: totes dues barres són `position: absolute` dins d'una franja de
   40px, i el `top` s'ha de recalcular en canviar l'alçada perquè el centre
   segueixi a 20px:
     progrés → top = 20 − 14/2 = 13px (i `margin-top: 0`, que de sèrie són 5px)
     volum   → top = 20 − 11/2 = 14,5px; s'hi deixa 14px, que és el valor que
               va triar el client i deixa la barra mig píxel per sobre del
               centre exacte — imperceptible i evita un decimal al CSS
   Les capes interiors (carregat, reproduït, hover) passen a `height: 100%`
   perquè portaven l'alçada antiga escrita a mà i quedarien curtes. */
.mejs-controls .mejs-time-rail .mejs-time-total {
  height: 14px !important;
  top: 13px !important;
  margin-top: 0 !important;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-time-rail .mejs-time-hovered,
.mejs-controls .mejs-time-rail .mejs-time-buffering {
  height: 100% !important;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  height: 11px !important;
  top: 14px !important;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  height: 100% !important;
}
/* Números de temps: MATEIXA tipografia i mida que el tracklist dels sets
   (Big Shoulders Display 400 a 1,2rem = 19,2px). S'aplica als dos reproductors,
   posts i sets, perquè la fila de reproducció es vegi igual a tot arreu.

   AMPLADA — no creix: aquesta família és molt estreta i el bloc "00:00" ocupa
   32,5px, exactament el mateix que l'Helvetica 13px d'abans. La caixa té
   `width: auto`, així que ni la barra de progrés ni els botons es mouen.

   CENTRAT VERTICAL — MediaElement posa `padding: 16px 6px 0` comptant amb una
   lletra de 11px. Amb 19,2px la tinta quedava 5,3px massa avall respecte del
   centre de la barra (centre de la tinta a 25,3px en una barra de 40px).
   Amb `line-height: 1` i 10,7px de farciment superior la tinta queda centrada
   a 20,0px, igual que les icones, la barra de progrés i el volum (verificat en
   viu). ATENCIÓ: aquest valor depèn de la tipografia i de la mida; si es canvia
   cap de les dues, cal recalcular-lo. */
.mejs-controls .mejs-time {
  font-family: "Big Shoulders Display", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  padding: 10.7px 6px 0 !important;
}
/* El text viu dins d'un <span>, que porta la seva pròpia `font-family` al full
   d'estils de MediaElement i per tant NO hereta la del pare. Cal declarar-l'hi. */
.mejs-controls .mejs-time .mejs-currenttime,
.mejs-controls .mejs-time .mejs-duration {
  font-family: "Big Shoulders Display", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}
/* Icones de play/pausa i volum: els MATEIXOS dibuixos i la mateixa mida que al
   reproductor dels sets, però en blanc perquè aquí el fons és blau.
   Abans aquest reproductor feia servir l'sprite de MediaElement i els sets uns
   SVG propis: la caixa del botó era igual (20×20) però el dibuix de dins tenia
   mida i forma diferents. Ara els dos fan servir aquests SVG.

   MIDA DEL DIBUIX (set. 2026) — el `background-size` NO és la mida de la icona.
   Els SVG tenen viewBox de 24×24 i el traç només n'ocupa una part, així que a
   `background-size: 20px` el dibuix quedava clarament més petit que l'sprite
   original de MediaElement i el client ho va notar (sobretot el triangle).
   Mesurat l'sprite original (mejs-controls.svg, cel·les de 20×20):
     play 12,5×15,3   ·   pausa 14×16   ·   altaveu 16,8×15,5
   Amb els valors d'aquí la tinta torna a aquestes mides:
     26px → play 12,0×15,2 i pausa 13,0×15,2   ·   21px → altaveu 15,8×15,3
   El fons és més gran que la caixa de 20×20, però com que el dibuix va centrat
   i no arriba a les vores, no es retalla res. Si es canvien els SVG cal
   recalcular aquests valors. */
.mejs-controls .mejs-playpause-button button,
.mejs-controls .mejs-volume-button button,
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.mejs-controls .mejs-playpause-button.mejs-play button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M8%205v14l11-7z'/%3E%3C/svg%3E") !important;
  background-size: 26px 26px !important;
}
.mejs-controls .mejs-playpause-button.mejs-pause button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M6%205h4v14H6zm8%200h4v14h-4z'/%3E%3C/svg%3E") !important;
  background-size: 26px 26px !important;
}
.mejs-controls .mejs-volume-button button,
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") !important;
  background-size: 21px 21px !important;
}
/* Es manté la barra vermella dels posts protegits amb contrasenya (fons groc).
   Cal aquesta especificitat extra perquè les regles de sobre no se la mengin. */
.post-password-required .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #a32424 !important;
}

/* ── Excepció: reproductor dels SETS (playlist) ───────────────────────────────
   Els sets van sobre FONS CLAR, amb icones i temps blaus. Codi de colors:
     · blau cel = ja reproduït   · blau fosc = carregat   · gris = no reproduït
   (Als posts el "ja reproduït" també és blau cel; la diferència és que allà el
   "carregat" és blanc, perquè el fons és blau.)
   S'identifica amb :has(.playlist-audio) —la classe de l'<audio> de la playlist—,
   que cobreix archive-set, taxonomy, musicbiography i playlist-sets.
   Va DESPRÉS del bloc global i amb selectors més específics, per guanyar-lo. */

/* Fons clar */
.mejs-container:has(.playlist-audio),
.mejs-container:has(.playlist-audio) .mejs-controls,
.mejs-container:has(.playlist-audio) .mejs-embed,
.mejs-container:has(.playlist-audio) .mejs-embed body {
  background: #ffffff !important;
}
/* Barra de progrés */
.mejs-container:has(.playlist-audio) .mejs-controls .mejs-time-rail .mejs-time-total {
  background: var(--surda-gris-max, #989898) !important;
}
.mejs-container:has(.playlist-audio) .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: var(--surda-blau, #0b26ac) !important;
}
.mejs-container:has(.playlist-audio) .mejs-controls .mejs-time-rail .mejs-time-current {
  background: var(--surda-blau-clar, #00a1dc) !important;
}
/* Volum */
.mejs-container:has(.playlist-audio) .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  background: var(--surda-gris-max, #989898) !important;
}
.mejs-container:has(.playlist-audio) .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  background: var(--surda-blau, #0b26ac) !important;
}

/* Temps en blau i un punt més gruixut (oct. 2026).
   La tipografia, la mida i el centrat vertical els posa el bloc global de
   dalt; aquí només es canvia el color i el gruix.
   GRUIX: el mateix traç que sobre el fons blau es veu prou sòlid, sobre fons
   blanc queda massa fi. Es puja de 400 a 600 NOMÉS en aquest reproductor
   (el blau i el tracklist es queden a 400, que és com han de ser).
   El pes 600 es descarrega de debò —és a l'@import de dalt de tot—, així que
   no és una negreta falsejada pel navegador. */
.mejs-container:has(.playlist-audio) .mejs-currenttime,
.mejs-container:has(.playlist-audio) .mejs-duration,
.mejs-container:has(.playlist-audio) .mejs-time {
  color: var(--surda-blau, #0b26ac) !important;
  font-weight: 600 !important;
}
/* Icones blaves: l'sprite de MediaElement és BLANC i sobre fons clar no es veu.
   Fem servir SVG incrustats (nítids a qualsevol mida i amb el blau exacte de
   marca), en comptes de les formes dibuixades amb border/box-shadow d'abans. */
.mejs-container:has(.playlist-audio) .mejs-playpause-button button,
.mejs-container:has(.playlist-audio) .mejs-volume-button button,
.mejs-container:has(.playlist-audio) .mejs-mute button,
.mejs-container:has(.playlist-audio) .mejs-unmute button {
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Mateixes mides de dibuix que al reproductor dels posts (vegeu el comentari
   d'allà): 26px per al play/pausa i 21px per a l'altaveu. */
.mejs-container:has(.playlist-audio) .mejs-playpause-button.mejs-play button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%230b26ac'%20d='M8%205v14l11-7z'/%3E%3C/svg%3E") !important;
  background-size: 26px 26px !important;
}
.mejs-container:has(.playlist-audio) .mejs-playpause-button.mejs-pause button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%230b26ac'%20d='M6%205h4v14H6zm8%200h4v14h-4z'/%3E%3C/svg%3E") !important;
  background-size: 26px 26px !important;
}
.mejs-container:has(.playlist-audio) .mejs-volume-button button,
.mejs-container:has(.playlist-audio) .mejs-mute button,
.mejs-container:has(.playlist-audio) .mejs-unmute button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%230b26ac'%20d='M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") !important;
  background-size: 21px 21px !important;
}
ol.track-list {
    list-style-type: none;
    counter-reset: a;
    text-indent: -2.4rem;
    padding-left: 2.4rem;
}
ol.track-list li:before {
    counter-increment: a;
    content: counter(a, decimal-leading-zero) ".";
    margin-right: 0.25em;
}
body#tinymce {
    margin: 12px !important;
}
#buscador .search-filters .show-filters {
    position: relative;
    background: #0b26ac;
    box-shadow: none;
    font-weight: 400;
    color: #fff;
    width: 100%;
    margin: 0.5rem auto;
    display: block;
    border: 0;
    outline: 0;
    text-align: left;
    padding: 15px 40px 15px 15px;
    border-radius: 15px;
    font-size: 1rem;
}
#buscador .search-filters .show-filters:hover,
#buscador .search-filters .show-filters:focus-visible {
    background: #f6c40e;
    color: #0b26ac;
}
#buscador .select2-container .select2-search,
#buscador .select2-container .select2-search__field {
    width: 100% !important;
}
#buscador .select2-search__field {
    color: #000;
    font-weight: 400;
    font-size: 1rem;
}
.select2-container--default .select2-search--inline .select2-search__fiel {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield;
}
.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    padding: 0;
}
/*# sourceMappingURL=main.css.map */




/* new code 2025 by xescopastor.com */


/* (Eliminat: bloc h1–h6 amb Lexend. Estava dins d'un comentari no tancat,
   per tant inert. Les mides dels encapçalaments les fixen les regles clamp
   de sota.) */

/* Encapçalaments responsive (clamp) — topall de desktop = mides actuals. 2026-06-16 */
h1 { font-size: clamp(1.9rem, 1.4rem + 2.5vw, 2.5rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2rem); }
h3 { font-size: clamp(1.4rem, 1.15rem + 1.3vw, 1.75rem); }
h4 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); }
h5 { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem); }
h6 { font-size: 1rem; }







.home #calendario .new-title {
    padding-top: 102px;
}

.home #clubes .new-title {
    padding-top: 116px;
}

.new-title .title,
.new-title .tax-title {
    margin-top:20px;


    font-family: BeniBold;
    font-size: 3.3em !important;
    line-height: .9em;
    height: auto;
    border-radius: 18px;
    display:inline-block;
    padding: 12px 22px;
    letter-spacing: 0.025em;
}
/* Separació títol → subtítol, a totes les pàgines (oct. 2026).
   El buit real és aquest marge + 45,5px que vénen de dins del bloc del títol
   (35,5 de farciment per sota de la pastilla i 10 del seu marge inferior), per
   això es resten 45,5 a la variable. Amb la variable a 40px el marge surt
   negatiu, que és correcte: el subtítol puja cap al títol.
   Mateixa regla per al títol de la capçalera i per als títols de secció que
   apareixen després de la barra separadora, perquè la cadena és la mateixa.
   Verificat en viu: el valor de la variable és el buit que es mesura. */
.presentacio {
    margin-top: calc(var(--surda-esp-titol-subtitol, 40px) - 45.5px);
}
/* Subtítol de les pàgines de categoria de remix (oct. 2026).
   Hi havia 60px, que amb els 16px de la caixa blanca del post donaven 76px de
   separació on la referència (/musicbiography/) en té 72. Ara el subtítol porta
   els mateixos 16px que a la resta de pàgines i la diferència la posa el marge
   de l'article, com a tot arreu.
   S'ha tret `.tax-mashup_release` del selector: des que taxonomy.php pinta el
   post del set amb la seva plantilla, aquelles pàgines ja no tenen `.presentacio`
   (comprovat a y2012 i y2020), de manera que aquella meitat de la regla era
   codi mort. */
.tax-remix_type .presentacio {
    margin-bottom: 16px;
}
.presentacio-home {
}
.presentacio-home-2 {
    margin-top: 25px;
}
.presentacio-home-5 {
  margin-top: 30px;
  margin-bottom: -5px;
  margin-bottom: 5px;
}
.new-title.title-yellow .title,
.tax-title {
    background-color: #f6c40e;
    color: #0b26ac;
}
.new-title.title-blue .title,
.tax-title {
    background-color: #0b26ac;
    color: #f6c40e;
}
.new-title.title-blue-white .title {
    background-color: #0b26ac;
    color: #ffffff;
    letter-spacing: 0.025em;
}
.new-title.title-white .title {
    background-color: #ffffff;
    color: #f6c40e;
}
.new-title.title-pink .title {
    background-color: #de4f91;
    color: #ffffff;
}
/* Post protegit amb contrasenya: indicació vermella sobre la pastilla groga */
.new-title .title.red-title,
.new-title .title.red-title a {
    color: #a32424 !important;
}
.new-title .title a {
    color: inherit;
    text-decoration: none;
}

/* (Eliminat: bloc .post-title amb Lexend. També estava comentat i inert.) */
.post-title a {
    color: inherit;
    text-decoration: none;
}
.post-title.red-title {
    background: transparent;
    color: #a32424;
}
.post-title.red-title a {
    color: #a32424;
}
.post-subtitle {
    font-weight: 400;
    color: #0b26ac;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.back-title {
    letter-spacing: 0.06rem;
    font-size: 3.4em !important;
    background: url(../images/back-title.png) no-repeat;
    background-size: cover;
    font-family: BeniRegular;
    background-position: bottom; 
    min-height: 8rem;
    color: #0b26ac;
    padding-top: 1.5rem;
    margin-bottom: 3rem;
}


.new-title {
    display: block;
    text-align: center;
    padding: 70px 20px;
    margin-bottom: 10px;
}
.home .new-title {
    padding-top: 92px;
    padding-bottom: 42px;
}
/* Cercador: menys marge superior al títol (el modal ja té la seva capçalera) */
#buscador .new-title {
    padding-top: 20px;
}

/* NEW SUBSECTION */
.new-title.sub-section {
    padding-top: 108px;
    padding-bottom: 50px;
}
/* mobile mod */
@media (max-width: 782px) {
    .home .new-title {
        padding-top: 36px;
        padding-bottom: 10px;
    }
    .new-title.sub-section {
        padding-top: 64px;
        padding-bottom: 18px;
    }
    .new-title {
        padding: 30px 20px;
    }
}
/* Títol intermedi de secció. 2026-06-16 */
.new-title-2 {
    font-family: BeniRegular;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 2.8rem);
    line-height: 1;
    letter-spacing: 0;            /* explícit (el -0.025em que hi havia a h1–h6 ja no existeix) */
    color: #0b26ac;
    text-align: center;
    font-weight: 400;
    margin-bottom: 15px;
}


.get-info-extra {
    font-family: BeniRegular;
    font-size: 52px;
    color: #0b26ac;
    /*@media (min-width:782px) {
        font-size: 44px;
    }
    @media (min-width:992px) {
        font-size: 60px;
    }*/
}
/* Reescrit sense niar (oct. 2026). Els dos `@media` anaven DINS de la regla
   (sintaxi CSS Nesting, Safari 16.5+). Un navegador que no l'entén els
   descartava i es quedava amb `margin-left: -202px` a totes les amplades, de
   manera que l'element quedava desplaçat a tauleta i escriptori.
   El `margin-left: -12px` que hi havia abans del -202px no feia res: la
   declaració de sota el guanyava sempre. S'ha tret. */
.asi-de-facil {
    margin-bottom: -4px;
    margin-top: -58px;
    margin-left: -202px;
}
@media (min-width: 576px) {
    .asi-de-facil {
        margin-left: -252px;
    }
}
@media (min-width: 768px) {
    .asi-de-facil {
        margin-left: -300px;
    }
}
.containerBtn {
    margin: 0 auto;
    width:400px;
    max-width: 80%;
    position: relative;
    display: block;
    text-align: center;
}
.newBtn {
    margin:16px;
    font-family: BalginDisplayBold;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1em;
    height: auto;
    border-radius: 1em;
    display: inline-block;
    padding: 18px 20px 15px;
    border: solid 3px;
    /* Per defecte: RECTE */
}

/* Botó destacat: una mica més gran + inclinat; s'endreça en hover */
.newBtn.destacat {
    font-size: 1.6rem;
    transform: rotate(-4deg);
}
.newBtn.destacat:hover {
    animation: straightenBtn 0.5s ease forwards;
}

/* Animación */
@keyframes straightenBtn {
    0% {
        transform: rotate(-4deg);
    }
    45% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.newBtn.btnBlue {
    background-color: #0b26ac;
    color: #ffffff;
    border-color:#ffffff;
    border-radius: 20px;
    &:hover {
        /*opacity: 0.85;*/
        background-color:#f6c40e;
        color: #0b26ac;
        border-color:#f6c40e;
    }
}
/* NOTA: aquí hi havia `.newBtn.btnBlue a { color:#fff; &:hover{color:#0b26ac} }`.
   S'ha eliminat (set. 2026) perquè fixava un color absolut a l'enllaç intern amb
   un :hover propi, i això feia que en passar pel botó canviés el fons però no el
   text (tres estats visibles). Ara l'element clicable ÉS el botó a tot el web
   (peu, calendari, presskit, descàrregues i productes), així que no hi ha cap
   enllaç imbricat que necessiti color propi. */
.newBtn.btnWhite {
    background-color: #ffffff;
    color: #0b26ac;
    border-color:#0b26ac;
    &:hover {
        /*opacity: 0.9;*/
        background-color:#f6c40e;
        color: #0b26ac;
    }
}
.newBtn.btnYellow {
    background-color: #f6c40e;
    color: #0b26ac;
    &:hover {
        opacity: 0.85;
        /*background-color:#0b26ac;
        color: #ffffff;*/
    }
}

/*
.type-mixtape .entry-title,
.type-video .entry-title,
.type-remix .entry-title,
.type-mashup .entry-title {
    font-family: BalginDisplayBold;
    background-color: transparent;
}
*/


.page-content {
    color:#0b26ac;
}
/* Mateix aire que en un post entre la vora de la pastilla i la primera línia
   (oct. 2026).
   L'1rem que porta `.entry-content` existeix per separar el cos del post de la
   seva capçalera, i aquestes pàgines no en tenen: el text arrenca directament.
   Amb aquell marge el buit era de 43,4px; traient-lo, de 27,4. La referència
   és un post, on de la vora al títol n'hi ha 21,7.
   El valor és negatiu i amb decimal perquè surt d'una resta, no d'un criteri:
   27,4 − 21,7 = 5,7. Són els píxels que la caixa de línia d'un paràgraf
   reserva per sobre de les majúscules, que a la referència no hi són perquè
   allà el primer element és un títol. Mesurat a les tres pàgines: totes
   arrenquen amb un paràgraf de 17,6px i totes queden a 21,7. */
.entry-content.page-content {
    margin-top: -5.7px;
}
/* Pàgines de text llarg sense plantilla pròpia (avís legal, privacitat,
   galetes), oct. 2026. El text ve enganxat d'un document i porta
   encapçalaments h2/h3 que el navegador pinta a la seva mida per defecte
   (32px el h2), molt per sobre de l'escala del web. Aquí es posen a una
   escala coherent amb el cos de text (17,6px) i amb el mateix ritme vertical
   que els blocs d'un post: 25px per sobre del títol i 13,8 fins al seu text,
   les mateixes mides que ja fèiem servir a "Info:" i companyia. */
.page-content h2,
.page-content h3 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #0b26ac;
    margin-top: 25px;
    margin-bottom: 0;
}
.page-content h2 {
    font-size: 1.5rem;
}
.page-content h3 {
    font-size: 1.2rem;
}
/* El primer encapçalament no ha de separar-se de la vora de la pastilla: el
   farciment de la caixa ja fa aquesta feina. */
.page-content > h2:first-child,
.page-content > h3:first-child {
    margin-top: 0;
}



i.icon-headphones{
  display:inline-block;
  width:1em;height:1em;
  vertical-align:-0.125em;
  background-color:currentColor;
  -webkit-mask: url("../icons/headphones.svg") no-repeat center / contain;
          mask: url("../icons/headphones.svg") no-repeat center / contain;
}
i.icon-headphones2{
  display:inline-block;
  width:1em;height:1em;
  vertical-align:-0.125em;
  background-color:currentColor;
  -webkit-mask: url("../icons/headphones2.svg") no-repeat center / contain;
          mask: url("../icons/headphones2.svg") no-repeat center / contain;
}

/* Scrollbar overlay — evita que el contenido se desplace al aparecer la barra */
html {
    overflow-y: scroll;           /* reserva siempre el espacio del scrollbar */
    scrollbar-gutter: stable;     /* soporte moderno (Chrome 94+, Firefox 97+) */
}

/* Scrollbar personalizada superpuesta — Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(11, 38, 172, 0.35);   /* azul del tema con opacidad */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 38, 172, 0.6);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 38, 172, 0.35) transparent;
}

/* Bootstrap modal: cancelar el padding-right automático que añade al abrir.
   scrollbar-gutter: stable ya reserva el espacio permanentemente,
   así que la compensación de Bootstrap es innecesaria y causa el desplazamiento. */
body.modal-open {
    padding-right: 0 !important;
}
/* Bootstrap JS also adds padding-right inline to .modal itself — neutralize it */
.modal {
    padding-right: 0 !important;
}



/* Reescrit sense niar (oct. 2026). Abans el `@media` anava DINS de la regla
   (sintaxi CSS Nesting, Safari 16.5+). Un navegador que no l'entén descartava
   el bloc i es quedava només amb `display: none`, de manera que aquest
   contingut no es veia MAI, ni a mòbil ni a escriptori. */
.hide-mobile {
    display: none;
}
@media (min-width: 576px) {
    .hide-mobile {
        display: block;
    }
}

@media (min-width: 576px) {
.back-title:before {
        background: url(../images/back-title-left.png) no-repeat;
        background-size: contain;
        background-position: 100%;
        margin-right: 20px;
    }
    .back-title:after,
    .back-title:before {
        content: "";
        display: inline-block;
        width: 5rem;
        height: 3rem;
        vertical-align: middle;
    }
    .back-title:after {
        background: url(../images/back-title-right.png) no-repeat;
        background-size: contain;
        background-position: 0;
        margin-left: 20px;
    }

.back-title-search:before {
        background: url(../images/back-title-left.png) no-repeat;
        background-size: contain;
        background-position: 100%;
        margin-right: 20px;
    }
    .back-title-search:after,
    .back-title-search:before {
        content: "";
        display: inline-block;
        width: 5rem;
        height: 3rem;
        vertical-align: middle;
    }
    .back-title-search:after {
        background: url(../images/back-title-right.png) no-repeat;
        background-size: contain;
        background-position: 0;
        margin-left: 20px;
    }

.single-cover {
        height: 270px;
        background-color: #000000;
    }

.page-template-template-musicbiography .wp-playlist-current-item,
    .single-set .wp-playlist-current-item {
        height: 270px !important;
    }

.main {
        padding-right: 15px;
        padding-left: 15px;
    }

.main {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sidebar-primary .main {
        -ms-flex: 0 0 66.6666666667%;
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }

.sidebar {
        padding-right: 15px;
        padding-left: 15px;
    }

.sidebar {
        -ms-flex: 0 0 33.3333333333%;
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }

.alignleft {
        float: left;
        margin-right: 0.5rem;
    }
    .alignright {
        float: right;
        margin-left: 0.5rem;
    }

.post-type-archive-producto .main-producto {
        padding-top: 7rem;
        margin-top: -7rem;
    }
    .post-type-archive-producto .main-producto#producto-gorra {
        margin-top: -9rem;
    }
    .post-type-archive-producto .main-producto#producto-camisetas-de-colores {
        margin-top: -13rem;
    }
    .post-type-archive-producto .main-producto#producto-camiseta-bn {
        margin-top: -15rem;
    }
    .post-type-archive-producto .main-producto#producto-pack {
        margin-top: -10rem;
    }

.back-title:before {
        background: url(../images/back-title-left.png) no-repeat;
        background-size: contain;
        background-position: 100%;
        margin-right: 20px;
    }
    .back-title:after,
    .back-title:before {
        content: "";
        display: inline-block;
        width: 5rem;
        height: 3rem;
        vertical-align: middle;
    }
    .back-title:after {
        background: url(../images/back-title-right.png) no-repeat;
        background-size: contain;
        background-position: 0;
        margin-left: 20px;
    }
}

@media (min-width: 768px) {
.single-cover {
        height: 370px;
    }

.page-template-template-musicbiography .wp-playlist-current-item,
    .single-set .wp-playlist-current-item {
        height: 370px !important;
    }

.modal-md {
        max-width: 650px;
    }

.main {
        padding-right: 15px;
        padding-left: 15px;
    }

.sidebar {
        padding-right: 15px;
        padding-left: 15px;
    }

#buscador #wpas-load img#wpas-loading-img {
        width: 400px;
        left: calc(50% - 200px);
    }

.globo-intro text {
        font-size: 4rem;
    }

#calendario-section #mashup-mixtape-border {
        z-index: -1;
        padding-top: 50px;
        margin-top: -35px;
        background: url(../images/taca-blava.png) no-repeat;
        background-size: cover;
        background-position: bottom;
    }
/*
#contacto .contact-left {
        margin-left: -5.6rem;
    }
*/
.post-type-archive-producto .producto-table .add-producto {
        top: -4.8rem;
    }

.post-type-archive-producto .pedido-table {
        position: relative;
        top: -50px;
    }

.tax-title {
        border-radius: 20px;
    }

.tax-title {
        background: url(../images/back-tax.png) no-repeat;
        background-position: 50%;
        background-size: contain;
        padding: 50px 90px 35px;
    }

.tax-title-remix {
        border-radius: 20px;
    }

.tax-title-remix {
        background: url(../images/remixes.png) no-repeat;
        background-position: 50%;
        background-size: contain;
        padding: 60px 90px 35px;
    }

.page-template .clubes .club {
        margin-bottom: 4rem;
        padding: 2rem auto;
    }

.page-template .clubes {
        margin: 5rem auto -4rem;
        margin-bottom: 20px;
    }

.post-type-archive-producto .tax-title {
        background: none;
        background: url(../images/back-producto.png) no-repeat;
        background-position: 50%;
        background-size: contain;
        padding: 10px 40px;
    }

.post-type-archive-producto .tax-title.camiseta-bn,
    .post-type-archive-producto .tax-title.camisetas-de-colores {
        background: none;
        background: url(../images/back-producto-L.png) no-repeat;
        background-position: 50%;
        background-size: contain;
        padding: 10px 60px;
    }
}

@media (min-width: 992px) {
.single-cover {
        height: 360px;
    }

.page-template-template-musicbiography .wp-playlist-current-item,
    .single-set .wp-playlist-current-item {
        height: 360px !important;
    }

.main {
        padding-right: 15px;
        padding-left: 15px;
    }

.sidebar {
        padding-right: 15px;
        padding-left: 15px;
    }

.footer-legal-nav ul {
        text-align:right;
    }
    .footer-legal-nav ul li {
        display: inline;
        margin: 0px;
        margin-left: 20px;
    }

#buscador .modal-body .search-filters,
    #buscador .modal-body .search-results {
        padding: 1.5rem 200px;
    }
}

@media (min-width: 1200px) {
.back-title {
        min-height: 14rem;
        padding-top: 3.25rem;
    }

.back-title-search {
        min-height: 14rem;
        padding-top: 3.25rem;
    }

.single-cover {
        height: 429px;
    }

.page-template-template-musicbiography .wp-playlist-current-item,
    .single-set .wp-playlist-current-item {
        height: 429px !important;
    }

.main {
        padding-right: 15px;
        padding-left: 15px;
    }

.sidebar {
        padding-right: 15px;
        padding-left: 15px;
    }

.error404 .wrap .back-container {
        /*display: -ms-flexbox;
        display: inline-flex;*/
        padding: 42px;
        margin-bottom: 24px;
    }
    .error404 .wrap .back-container .back-home {
        position: relative;
        /*bottom: -2rem;*/
    }

.back-title {
        min-height: 14rem;
        padding-top: 3.25rem;
    }
}

@media (max-width: 1500px) and (min-width: 1250px) {
.nav-menu a.menu-link {
        font-size: 1.8rem;
        padding: 0.4rem 0.6rem;
    }
    .head-social li,
    .head-social li.presskit {
        margin-right: 0.1rem;
    }
}

@media (min-width: 1250px) {
header.banner {
        border-bottom: 6px solid #0b26ac;
        position: fixed;
        display: block;
        width: 100%;
        z-index: 950;
        top: 0;
        left: 0;
        height: 7rem;
    }
    header.banner .logo {
        height: 100%;
        width: 30%;
        float: left;
    }

header.banner .logo {
        width: 35%;
    }

header.banner .logo a {
        height: 100%;
        display: block;
    }
    header.banner .logo img {
        max-width: 100%;
        max-height: 100%;
        padding-left: 27%;
    }

.admin-bar header.banner {
        top: 32px;
    }

.nav {
        width: 70%;
        float: right;
        height: 100%;
    }

.nav {
        width: 65%;
    }

.nav,
    .nav-container,
    .nav-open .nav {
        background: none;
    }
    .nav,
    .nav-container,
    .nav-container.is-visible {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        transform: translateX(0);
    }
    .nav-container,
    .nav-container.is-visible {
        visibility: visible;
        height: auto;
        min-height: 0;
        overflow-y: visible;
    }
    .nav-menu {
        clear: both;
        text-align: left;
        background: none;
        font-family: BeniRegular;
        margin-bottom: 0;
    }
    .nav-menu a.menu-link {
        font-size: 1.8rem;
        text-decoration: none;
        font-weight: 400;
    }
    .nav-menu a.menu-link:hover {
        color: #f6c40e;
    }
    .nav-toggle {
        display: none;
    }
    .nav-menu > .menu-item,
    .nav-menu > .menu-item.is-active {
        display: inline-block;
        background: none;
        border: 0;
    }
    .nav-menu .menu-item.active,
    .nav-menu .menu-item.active:hover {
        background: #ffffff;
    }
    /* L'opció activa del menú (text blanc sobre pastilla blava) no reaccionava
       al cursor: es quedava blanca. Ara passa a groc com la resta d'opcions.
       Sobre el blau el groc compleix de sobres el contrast (6,79:1).
       Detectat pel client, oct. 2026.

       El `:hover` va a l'ENLLAÇ, no a l'element de llista. Abans anava a la
       llista (`.menu-item.active:hover > .menu-link`) i, com que el desplegable
       hi viu a dins, "Música" es quedava groc mentre el cursor passejava pels
       seus submenús, com si encara el tinguéssim a sobre. Amb el `:hover` a
       l'enllaç, el groc només surt quan el cursor és realment damunt la
       paraula; en baixar al desplegable torna a blanc i el groc passa a
       l'opció del submenú que toqui. Verificat amb el cursor a /musicbiography/
       (oct. 2026). */
    .nav-menu > .menu-item.active > .menu-link:hover,
    .nav-menu > .menu-item.current > .menu-link:hover {
        color: var(--surda-groc, #f6c40e);
    }

    #search-button {
        right: 0;
        top: 7rem;
    }

#mailchimp-button {
        right: 50px;
        top: 7rem;
    }

.admin-bar #search-button {
        top: calc(7rem + 32px);
    }

.admin-bar #mailchimp-button {
        top: calc(7rem + 32px);
    }

.wrap {
        margin-top: 7rem;
    }
.calendario-margin-top {
    padding-top: 7rem;
}
.page-template-template-calendario .wrap {
        margin-top: 0;
    }
.home-section {
        padding-top: 10rem;
        margin-top: -10rem;
    }

#la-formula-surda {
        padding-top: 8rem !important;
        margin-top: -8rem !important;
    }

#musica {
        padding-top: 8rem !important;
        margin-top: -8rem !important;
    }

#calendario-section #calendario {
        padding-top: 5.5rem !important;
        margin-top: -5.5rem !important;
    }

.evento h2 {
        font-size: 2.3rem;
    }

#clubes {
        padding-top: 9rem !important;
        margin-top: -9rem !important;
    }

#fiestas.home-section {
        padding-top: 3.3rem !important;
        margin-top: -3.3rem !important;
        padding-bottom: 3em;
        z-index: 10;
    position: relative;
    }

#contacto-section {
        padding-top: 4rem !important;
        margin-top: -4rem !important;
        z-index: 9;
    position: relative;
    }
    #contacto {
        padding-top: 8rem !important;
        margin-top: -8rem !important;
    }
    .hack-section {
      height: 100px;
      width: 100%;
      display: block;
    margin-bottom: -180px;
}

#nolike,
    #yeslike {
        padding-top: 9rem !important;
        margin-top: -9rem !important;
    }

.page-template-template-guide #mc-embedded-subscribe-form {
        padding-top: 12rem !important;
        margin-top: -12rem !important;
    }

.new-title .title,
    .new-title .tax-title {
        border-radius: 20px;
    }
}

@media (max-width: 1250px) {
header.banner {
        border-bottom: none;
        height: 66px;
    }
    .logo {
        text-align: center;
        position: fixed;
        display: block;
        width: 100%;
        z-index: 950;
        top: 0;
        left: 0;
        height: 4.5rem;
    }
    .logo img {
        max-height: 100%;
        width: auto;
        padding-left: 0 !important;
    }

.admin-bar header.banner nav.nav {
        top: 32px;
    }

.admin-bar header.banner div.logo {
        top: 32px;
    }

.head-social {
        display: none!important
    }

.admin-bar header.banner .nav-container {
        background-color: #ffffff;
        top: 92px;
        height: calc(100% - 92px);
        min-height: calc(100% - 92px);
    }

.post-type-archive-producto #shopping-cart {
        top: 8rem;
        width: 5.5rem;
        right: 0;
    }

.admin-bar.post-type-archive-producto #shopping-cart {
        top: calc(32px + 8rem);
    }
}

@media (max-width: 1000px) {
#buscador #wpas-results {
        min-height: 0;
    }

#search-noresults {
        width: 16rem;
        height: 8rem;
        margin-bottom: 22rem;
        margin-top: 1rem;
    }
    #search-noresults p.nr-text {
        font-size: 1rem;
        margin-top: 3rem;
    }
    #search-noresults p.nr-again {
        font-size: 1.5rem;
    }

#image_loading {
        width: 10rem;
    }
}



@media (max-width: 782px) {
.admin-bar header.banner nav.nav {
        top: 46px;
    }

.admin-bar header.banner div.logo {
        top: 46px;
    }

.admin-bar header.banner .nav-container {
        top: 106px;
        height: calc(100% - 106px);
        min-height: calc(100% - 106px);
    }

.admin-bar #search-button {
        top: 105px;
    }

.admin-bar #mailchimp-button {
        top: 105px;
    }
}

@media (max-width: 767px) {
.mini-cover {
        width: 50%;
        padding-right: 2rem;
        padding-left: 2rem;
    }

footer.content-info .info {
        text-align: center;
    }

.page-template-template-calendario .evento .row {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
    }
.page-template-template-calendario .evento .evento-esquerra {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
.page-template-template-calendario .evento .evento-dreta {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }

.social-more a,
    .social-share a {
        font-size: 0.8rem;
    }

.social-more a {
        width: 30%;
    }
}

@media (max-width: 575px) {
.post-type-archive-set .mini-cover,
    .tax-programa .mini-cover {
        width: 100%;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media (max-width: 1750px) and (min-width: 1500px) {
.nav-menu a.menu-link {
        padding: 0.4rem 0.6rem;
    }
}

@media (min-width: 1700px) {
.head-social li.icon a svg {
        width: 2rem;
        height: 2rem;
        fill: #0b26ac;
    }
    .head-social li.icon i {
        margin-top: 9px;
        margin-bottom: 0;
    }
}

@media (min-width: 782px) {
.new-title .title,
    .new-title .tax-title {
        display:inline;
    }
}

/* ================================================================
 * Beni: forçar font-weight 400 (evita faux/synthetic bold que
 * deforma BeniBold/BeniRegular). Petició 2026-06-16.
 * Bloc consolidat i reversible — no s'editen les regles originals.
 * ================================================================ */
.back-title-store,
.back-title,
.back-title-search,
#mc_embed_signup_scroll label,
/* (.playlist-time i .playlist-title s'han tret d'aquesta llista: ara usen
   Big Shoulders Display amb pes 200, i aquest `font-weight: 400 !important`
   els el sobreescrivia.) */
.red-box .enter-protected,
#btn-buscar,
.text-BeniRegular,
.nav-menu .menu-link,
.language-selector .wpml-ls-legacy-dropdown,
.head-social a,
#buscador #globo-buscador #formula-busqueda,
#buscador .wpas-checkbox-container label,
#buscador .wpas-submit,
#buscador #wpas-load #wpas-load-btn,
.globo-intro text,
.page-template-template-calendario .evento .fecha,
.page-template-template-calendario .evento .fecha .dia-num,
#fiestas .proyectos h2,
#contacto #contact-message,
#contacto #contact-form label.form-control-label,
.post-type-archive-producto .main-producto .globo svg text.ofertas,
.post-type-archive-producto #contact-message-pedido,
.post-type-archive-producto .producto-table .add-producto,
.post-type-archive-producto .producto-table .remove-producto,
.post-type-archive-producto .pedido-table,
.post-type-archive-producto #final-table thead tr th,
.post-type-archive-producto #final-table tbody tr td,
.post-type-archive-producto .pedido-form input[type="submit"],
.post-type-archive-set .entry-title,
.tax-programa .entry-title,
.new-title .title,
.new-title .tax-title,
.get-info-extra,
.nav-menu {
  font-weight: 400 !important;
}




/* ================================================================
 * Calendari: globus de data (estètica còmic, bombolles solapades).
 *   - .fecha-dia      → pastilla blava (dia setmana sencer), text groc, Balgin.
 *   - .fecha-num      → globus groc (globus1.svg) amb número (.num) + mes (.mes).
 *   - .fecha-hora     → globus gris (globus2.svg) amb l'horari "de Xh a Yh".
 *   - .fecha-etiqueta → pastilla magenta opcional (TARDEO/vespreig/afterwork),
 *                       cantonades arrodonides via CSS (no SVG escalat).
 * Els SVG són només la forma; el text va a sobre. Petició client 2026-06.
 * Posicions/mides ajustables; primera passada per revisar visualment.
 * ================================================================ */
/* l'<a> embolcall del bloc de data ha de ser block perquè els globus (margin auto)
   se centrin respecte la columna i no respecte l'amplada de l'enllaç inline */
.page-template-template-calendario .evento .evento-esquerra > a {
  display: block;
}

.page-template-template-calendario .evento .fecha {
  width: 100%;
  padding-top: 5px;
  margin: 0 auto;
  text-align: center;
  line-height: 1;
}
/* mobile mod */
@media (max-width: 782px) {
    .evento-esquerra-row {
        background-color: #ffffff;
    }
    .page-template-template-calendario .evento .fecha {
            margin-bottom: -12px;
    }
}
/* Dia de la setmana */
.page-template-template-calendario .evento .fecha .fecha-dia {
  position: relative;
  z-index: 4;
  display: inline-block;
  background: #0b26ac;
  color: #f6c40e;
  font-family: BalginDisplayBold;
  font-weight: 400;
  font-size: 1.32rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 10px;
  transform: rotate(-4deg);
  margin-left: -1.6rem;
}

/* Globus groc: número + mes */
.page-template-template-calendario .evento .fecha .fecha-num {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96%;
  aspect-ratio: 214 / 186;
  margin: -8px auto -10px;
  padding-bottom: 14%; /* puja el text al cos de la bombolla (cua avall-dreta) */
  background: url(../images/globus1.svg) no-repeat center center;
  background-size: contain;
  color: #0b26ac;
  font-family: BalginDisplayBold;
  font-weight: 400;
  transform: rotate(-15deg);
}
.page-template-template-calendario .evento .fecha .fecha-num .num {
  font-size: 3.8rem;
  line-height: 0.85;
  margin-left: -1.85rem;
  margin-top: 1.7rem;
}
.page-template-template-calendario .evento .fecha .fecha-num .mes {
  font-family: BeniRegular, sans-serif;
  font-size: 2.7rem;
  line-height: 1;
  text-transform: uppercase;
  margin-left: -1.75rem;
  margin-top: -0.4rem;
  letter-spacing: 0.02em;
}

/* Globus gris: horari */
.page-template-template-calendario .evento .fecha .fecha-hora {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75%;
  aspect-ratio: 168 / 102;
  margin: -15px auto 0px 40px;
  padding: 0 10% 0 0; /* posició del text al cos del globus (cua a la dreta, reflex a dalt) */
  background: url(../images/globus2.svg) no-repeat center center;
  background-size: contain;
  color: #0b26ac;
  font-family: BalginDisplayBold;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.15;
  transform: rotate(-5deg);
}

/* Etiqueta magenta opcional */
.page-template-template-calendario .evento .fecha .fecha-etiqueta {
  position: relative;
  z-index: 5;
  display: inline-block;
  margin-top: -12px;
  background: #de4f91;
  color: #ffffff;
  font-family: BeniRegular, sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 4px 8px 2px 10px;
  border-radius: 10px;
  transform: rotate(5deg);
  margin-left: -3.2rem;
}

/* La columna de data té amplada fixa (200px), així que el globus és idèntic a tots
   els amples de 2 columnes — no cal reduir-ne les mides per breakpoint. */

/* Títol de l'esdeveniment — pastilla blava (= the_title), font Beni (punt 2).
   El TEXT s'alinea amb l'inici del flyer; la pastilla sobresurt per l'esquerra
   el seu padding (punt 3). Gap petit cap al flyer (punt 1). */
.new-post-title,
h1.post-title,
h2.post-title,
h1.single-post-title {
  display: inline-block;
  text-align: left;
  color: #0b26ac;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 700;
  font-size: 2.47rem;
  letter-spacing: 0em;
  line-height: 0.95em;
  text-transform: uppercase;
  border-radius: 12px;
  margin: 0 0 22px;
}
/* Títol del post com a enllaç (oct. 2026).
   En repòs va sense subratllar, com fins ara. En passar-hi el cursor se
   subratlla, perquè el títol porta a la pàgina del post i cal que es vegi que
   és clicable.

   EL COLOR NO CANVIA: l'únic senyal és el subratllat. Tot i així cal declarar
   el color aquí, perquè `vendors.css` porta una regla global
   `a:hover { color: #f6c40e }` que, si no la guanyem, pinta el títol de groc.
   Sobre fons blanc el groc dona un contrast d'1,64:1 quan el mínim per a text
   gran és 3:1, o sigui que mentre hi tens el cursor el títol es fa
   pràcticament il·legible. Sobre el blau del menú o del peu el groc sí que
   funciona (6,79:1); el problema és el groc sobre fons clar.
   Es va provar el blau clar de marca (2,94:1) i es va descartar per decisió
   del client: només subratllat.

   ABAST: NOMÉS els títols que són enllaç, aquí i a les graelles d'arxiu.
   DUES MARCACIONS: el títol d'un post és `h1.single-post-title` a
   /musicbiography/ i a les pàgines d'any, i `h2.post-title` a la resta
   d'arxius (mixtape, video, mashup, remix, tipologies de remix). Totes dues
   han d'anar a les regles, o el subratllat només surt a la meitat de les
   pàgines (oct. 2026).

   El `!important` del primer bloc és el que anul·la el subratllat que Bootstrap
   posa de sèrie, i cal que segueixi guanyant en repòs. */
/* Aire simètric al voltant del títol d'un post (oct. 2026).
   Amb 16px el buit visible queda a 22,2px per sobre de les majúscules (fins a
   la vora de la pastilla blanca) i 22,0px per sota (fins a la portada).

   ATENCIÓ A COM ES MESURA. Bebas Neue deixa molt espai buit dins la seva
   pròpia caixa, per sobre i per sota de les majúscules, així que les mesures
   de caixa (getBoundingClientRect, alçades de línia) enganyen: donen simetria
   quan visualment no n'hi ha. Cal mesurar des de la LÍNIA BASE REAL, i la
   línia base real s'obté amb un `<span style="display:inline-block;
   width:0;height:0;vertical-align:baseline">` inserit dins el títol (la seva
   vora inferior hi recolza), no amb els valors de fontBoundingBox del canvas,
   que a aquesta tipografia no hi coincideixen.
   Des d'allà: alçada de majúscula = actualBoundingBoxAscent de 'H' (28,3px),
   i els accents pugen fins a 34,7px, o sigui 6,4px més amunt — per això un
   títol amb Ó sembla una mica més enganxat a dalt que un sense.

   NO afecta els posts amb subtítol (els sets): allà el títol porta el seu
   propi marge de 6px, declarat amb un selector més específic, i aquesta regla
   no el guanya. Verificat a /set/mashups-2012/. */
h1.single-post-title,
h2.post-title {
    margin-bottom: 16px;
}
/* Posts SENSE portada: el mateix buit sota el títol que els que en tenen
   (oct. 2026).
   A /video/ hi conviuen els dos casos i es veien diferents: 22px sota el
   títol quan el post té portada i 36px quan no en té. El motiu és que la
   portada va DINS del <header>, o sigui que sota el títol només hi ha el seu
   marge; quan no hi ha portada, el següent element ja és `.entry-content`,
   que hi suma els seus 16px de marge superior.
   Aquí es neutralitza aquest segon marge. Els 2px que es deixen compensen
   l'espai de la caixa de text on viu l'iframe del vídeo, i amb ells el buit
   queda a 22,1px, igual que als posts amb portada. Verificat a /video/.
   ABAST: només els headers sense imatge i sense subtítol, o sigui els posts
   de vídeo sense portada. Els sets (que porten subtítol) i la resta d'arxius
   (mashup, remix, mixtape, musicbiography) tenen tots portada al header i no
   entren a la regla. Comprovat pàgina per pàgina. */
article header:not(:has(img)):not(:has(.post-subtitle)) + .entry-content {
    margin-top: 2px;
}
.single-post-title a,
.post-title a {
    text-decoration: none!important;
}
/* `:focus-visible` i NO `:focus` (oct. 2026).
   Amb `:focus`, en clicar el títol l'efecte es quedava enganxat fins que es
   clicava en un altre lloc, encara que el cursor ja no hi fos a sobre. Amb
   cmd+clic era permanent, perquè la pestanya original es quedava amb el focus.
   `:focus-visible` només s'activa quan el navegador considera que cal mostrar
   l'enfocament —navegació amb tabulador o teclat—, no en un clic de ratolí.

   CRITERI DEL CLIENT (oct. 2026): els títols que són enllaç passen a GROC en
   passar-hi el cursor, i SENSE subratllat. Es va provar el subratllat mantenint
   el blau i es va descartar.
   Constància tècnica, per si algun dia es revisa: groc sobre fons blanc dona un
   contrast d'1,64:1 quan el mínim recomanat per a text gran és 3:1. Sobre el
   blau del menú actiu sí que compleix (6,79:1). La decisió és del client i està
   presa amb aquesta dada sobre la taula. */
.single-post-title a:hover,
.single-post-title a:focus-visible,
.post-title a:hover,
.post-title a:focus-visible {
    color: var(--surda-groc, #f6c40e);
}
/* Mateix comportament als títols de les graelles d'arxiu (sets, anys de
   mashups, categories de remix). Allà l'enllaç no és el títol sol:
     · /set/ → embolcalla títol i subtítol
     · /mashup/ i /remix/ → embolcalla títol i portada
   Per això el subratllat es posa al <h2> del títol i no a l'enllaç sencer, que
   subratllaria també el subtítol.
   El color no canvia: es manté el blau de repòs, igual que als títols dels
   posts. La declaració hi és només per guanyar el groc de `vendors.css`. */
/* Mateix criteri que als títols de post: groc en passar-hi el cursor, sense
   subratllat. El subtítol de la targeta es queda en blau, perquè qui és enllaç
   és el títol.
   NOTA: hi havia una regla `div.release > a:hover` que ja feia això, però va
   deixar de funcionar quan es va afegir `.mini-cover-content` dins de la
   targeta: demanava que l'enllaç fos fill DIRECTE i va deixar de ser-ho. Es
   manté aquesta, que no depèn de l'estructura interna. */
.archive-grid-a a:hover h2,
.archive-grid-a a:focus-visible h2,
.archive-grid-a a:hover .archive-grid-a-title,
.archive-grid-a a:hover .white-title {
    color: var(--surda-groc, #f6c40e);
}
.archive-grid-a a:hover h3 {
    color: var(--surda-blau, #0b26ac);
}
/* ── Sets: títol i subtítol centrats ─────────────────────────────────────
   Els noms dels sets solen ser molt breus i queden millor centrats.
   El títol és `display: inline-block` amb `text-align: left`, i amb això el
   `text-align: center` només centraria el text DINS d'una caixa que seguiria
   a l'esquerra; per això el passem a `block`, perquè ocupi tota l'amplada.
   És segur: no té fons, ni vora, ni farciment (verificat en viu).

   ON S'APLICA (actualitzat oct. 2026): a QUALSEVOL post de set, surti on
   surti. `article.type-set` és la classe que WordPress posa a l'article del
   post, de manera que cobreix la pàgina pròpia del set, les pàgines d'any
   (/mashup_release/…) i /musicbiography/.
   Abans el selector era `.archive article.type-set` i es va haver d'ampliar:
   musicbiography és una plantilla de PÀGINA i no porta la classe `.archive`,
   així que els sets que hi surten es quedaven amb el títol a l'esquerra.
   `.single-set` es manté perquè a la pàgina pròpia el centrat del subtítol
   depèn d'aquella classe. */
.single-set h1.single-post-title,
article.type-set h1.single-post-title {
  display: block;
  text-align: center;
}
.single-set .post-subtitle,
article.type-set .post-subtitle {
  text-align: center;
}

/* ── Separació entre el títol de la pàgina i el post incrustat (oct. 2026) ──
   A /mashup/ el ritme vertical és: pastilla groga → 20px → subtítol →
   91px → graella. Els 20px són curts a propòsit, perquè el subtítol forma
   part del títol; els 91px són la distància al COS de la pàgina.
   A /mashup_release/yXXXX/ no hi ha subtítol i el post venia directament
   darrere del títol, però amb només 26px: la distància curta, la del
   subtítol. No era una decisió de disseny, era el marge que quedava.

   QUINA ÉS LA DISTÀNCIA BONA. A /mashup/ n'hi ha DUES de diferents després
   d'un subtítol, i cal triar la que correspon:
     · subtítol de dalt → graella d'anys .... 91px
     · subtítol de baix → caixa blanca del post .... 32px
   Aquí el que segueix el títol és un POST, no una graella, així que la bona és
   la de 32px. En un primer intent es van aplicar els 91 i el client ho va
   veure massa gran, amb raó: a més de ser la referència equivocada, la caixa
   blanca del post té 20px de farciment abans del títol, de manera que la
   TINTA arribava a 111px mentre que a la graella de /mashup/ hi arriba a 91.
   Les caixes quedaven igualades però l'ull no mesura caixes.

   VALOR. Només cal canviar aquest número; la resta de la regla no es toca.
   Compte: 10px es perden sempre en el col·lapse de marges amb la capçalera,
   per això el número escrit no és el buit que es veu. Equivalències mesurades
   en viu:
     margin-top: 16px → 32px fins a la caixa blanca, 52px fins al text del títol
                        (són els dos valors de la distància subtítol→post
                        de /mashup/)
     margin-top: 75px → 91px fins a la caixa, 111px fins al text
                        (91 és la distància subtítol→graella de /mashup/)
   Ara hi ha 75px, decidit pel client després de veure les dues opcions.

   SELECTOR. Acotat a les pàgines d'any de mashups, que és on es dona el cas de
   títol seguit directament de contingut.
   Es van descartar dos intents previs: `article.type-set`, que només cobria
   y2012 (l'únic any que comença amb el post recopilatori del set), i
   `.page-header + article`, que depenia de l'ordre exacte del marcatge.

   SEPARACIÓ ENTRE POSTS. Els 75px són NOMÉS per al primer post, el que va
   just sota del títol de la pàgina. La resta van a 40px, que és el que fa
   servir /musicbiography/ i dona 72px de buit entre caixes blanques. Quan els
   75px s'aplicaven a tots, aquest buit era de 107px i no quadrava amb
   musicbiography.
   `:first-of-type` vol dir "el primer <article> d'entre els seus germans".
   No serveix `:first-child`, perquè el primer fill del <main> és el
   <div class="page-header">, no l'article. */
/* Entre posts: el buit visible és aquest marge + 16px de la caixa blanca de
   sobre + 16px de la de sota, per això es resten 32 a la variable.
   Sense aquesta regla els articles dels arxius no tenen cap marge i el buit es
   queda en 32px, contra els 72 de /musicbiography/.

   SELECTOR GENERAL (oct. 2026): val per a QUALSEVOL arxiu. Abans hi havia la
   llista de les quatre pàgines que s'havien anat detectant —mashup, remix i les
   dues taxonomies— i cada cop que es revisava una pàgina nova en sortia una
   altra que s'havia quedat fora (mixtapes, vídeos…). Amb `.archive article` hi
   entren totes, incloses les que es creïn més endavant.
   Les graelles (/set/, /radio/) no s'hi veuen afectades perquè no tenen
   articles, i /musicbiography/ tampoc perquè és una plantilla de pàgina i porta
   la seva pròpia regla amb el mateix valor. */
.archive article {
  margin-top: calc(var(--surda-esp-bloc, 72px) - 32px);
}
/* El primer post va enganxat a la capçalera i no a una altra caixa blanca:
   allà el buit és el marge + 16px, per això es resten només 16. */
.archive.tax-mashup_release article:first-of-type {
  margin-top: calc(var(--surda-esp-bloc, 72px) - 52px);
}

/* ── Espaiat títol/subtítol (fitxa del set I resultats de cerca) ───────────
   El subtítol s'ha d'agrupar amb el títol, no amb la imatge de sota. Abans era
   a l'inrevés: 22px fins al subtítol i només 16px fins a la portada. Ara 6px a
   dalt i 24px a baix (proporció 1:4).
   La pàgina de resultats reutilitza el mateix partial, però hi conviuen tipus
   de contingut barrejats i NOMÉS els sets tenen subtítol. Per això s'hi fa
   servir `:has(.post-subtitle)`: sense aquesta guarda, els títols sense
   subtítol (remixes, mixtapes…) perdrien el seu marge i quedarien enganxats
   al contingut. */
.single-set h1.single-post-title,
article.type-set h1.single-post-title,
.page-template-template-search header:has(.post-subtitle) h1.single-post-title {
  margin-bottom: 6px;
}
.single-set .post-subtitle {
  margin-bottom: 24px;
}
/* El post incrustat a l'arxiu NO porta aquest marge inferior a propòsit.
   A la pàgina del set, aquest 24px queda anul·lat per `.white p:last-child`
   { margin-bottom: 0 }, que té més especificitat, i el buit fins a la portada
   acaba sent els 16px del `margin-top` de .entry-content. Si aquí hi
   afegíssim el 24px amb un selector més específic, guanyaria i el buit
   passaria a 24px: es veuria diferent de la pàgina del post, que és
   justament el que volem evitar. Verificat en viu: 16px als dos llocs. */
/* NOTA: als resultats de cerca NO s'hi posa aquest marge inferior perquè allà
   el subtítol és l'últim <p> de la caixa blanca i mana `.white p:last-child`
   { margin-bottom: 0 }, que té més especificitat. L'espai fins a la portada
   hi són els 16px del `margin-top` de .entry-content — prou per agrupar el
   subtítol amb el títol (6px), que és l'objectiu. */
/* Mòbil: sense marge esquerre negatiu */
@media (max-width: 767px) {
  .new-post-title { margin-left: 0; }
}

/* ── Norma general: cap caixa ni element mostra contorn (outline) en interactuar ──
   Elimina l'anell de focus per defecte del navegador a tot el lloc. */
*:focus,
*:focus-visible,
input:focus,
textarea:focus,
select:focus,
button:focus,
.form-control:focus,
[contenteditable]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ================================================================
 * Espai header → contingut. Referència: 80px.
 * TODO (DESIGN SYSTEM): aquesta distància s'ha d'IGUALAR a la resta
 * de seccions/pàgines perquè tot el web tingui el mateix espai blanc
 * entre el final del header i el principi del contingut.
 * ================================================================ */
.single .content {
  padding-top: 80px;
}

/* ── Text introduït a QUALSEVOL formulari → blau corporatiu ──
   Regla global (aplica a tots els formularis, presents i futurs). L'!important és
   necessari per guanyar a les regles específiques (#contacto, #buscador, newsletter…)
   que fixaven color #000/#333. Els botons (submit/button) i els placeholders NO s'hi inclouen. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select,
.select2-search__field,
.select2-selection__rendered {
    color: #0b26ac !important;
    font-weight: 700 !important;
    font-weight: 400 !important;
}

/* ── Aspecte unificat dels camps de formulari (patró de #buscador) ──
   Mateixos valors que els camps del cercador: Open Sans, padding 15px,
   cantons de 15px, sense vora ni ombra i fons blanc. S'apliquen als altres
   formularis de la web (contacte de la home, newsletter i comanda de
   productes). Va al final del fitxer perquè, amb la mateixa especificitat que
   les regles originals de cada formulari, guanya per ordre.
   NOTA: no toquem `width` ni `margin`, que són de maquetació de cada formulari. */
#contacto #contact-form .form-txt,
#mc_embed_signup_scroll .email,
.post-type-archive-producto #contact-form-pedido .form-txt,
.post-type-archive-producto .pedido-form .form-control,
.post-type-archive-producto .pedido-form input[type="text"],
.post-type-archive-producto .pedido-form input[type="email"],
.post-type-archive-producto .pedido-form textarea {
    font-family: "Open Sans", sans-serif;
    opacity: 1;
    padding: 15px;
    font-size: 1rem;
    line-height: 1.25;
    border: none;
    border-radius: 15px;
    box-shadow: none;
    background-color: #ffffff;
    background-clip: padding-box;
}
/* Placeholders grisos, com al cercador (l'!important és per guanyar a la regla
   global de color blau del text introduït). */
#contacto #contact-form .form-txt::placeholder,
#mc_embed_signup_scroll .email::placeholder,
.post-type-archive-producto #contact-form-pedido .form-txt::placeholder,
.post-type-archive-producto .pedido-form .form-control::placeholder,
.post-type-archive-producto .pedido-form input[type="text"]::placeholder,
.post-type-archive-producto .pedido-form input[type="email"]::placeholder,
.post-type-archive-producto .pedido-form textarea::placeholder {
    color: var(--surda-gris-max, #989898) !important;
    opacity: 1;
    font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   BOTÓ DE LA TENDA ("Viste el Surda Style") — OCULT A TOT ARREU
   ──────────────────────────────────────────────────────────────────────
   El botó viu a templates/footer.php (<div id="tienda" class="tienda-globo">)
   i es mostra a totes les pàgines excepte l'arxiu de productes i el 404.
   L'amaguem només amb CSS i NO tocant el markup, perquè hi ha JavaScript
   que actua sobre #tienda i .append-here: així el JS segueix trobant els
   elements i no peta.

   ▸ PER TORNAR A MOSTRAR EL BOTÓ: comenta o esborra aquest bloc.

   (La classe .tienda-globo només s'usa en aquest element, i cap altra regla
   de #tienda declara `display`, per això no cal !important.)
   ══════════════════════════════════════════════════════════════════════ */
.tienda-globo {
    display: none;
}

/* ── Botó de descàrrega (social locker) ──────────────────────────────────
   L'aspecte íntegre el dona .newBtn.btnBlue, igual que la resta de botons del
   web. L'únic ajust propi és més aire vertical: .newBtn porta margin:16px i
   aquí es dobla a 32px (l'horitzontal es manté). */
.download-btn {
    margin-top: 32px;
    /* 25px (no 32) perquè el buit total fins a les opcions de compartir es
       mantingui EXACTAMENT als 80px d'ara: 25 + els 55 de `.social-share`.
       La descàrrega és una botonera i demana més aire que la resta d'elements;
       si es canvia el 55 de sobre, cal recalcular aquest valor. */
    margin-bottom: 25px;
}