:root {
  --color-green: #2f8f46;
  --color-green-dark: #17642b;
  --color-orange: #f28c28;
  --color-yellow: #ffd34d;
  --color-red: #e8563f;
  --color-blue: #2774ae;
  --color-sky: #dff4ff;
  --color-playful-band: #fff4bf;
  --color-mint: #edf9e9;
  --color-cream: #fff8d7;
  --color-lilac: #f0e8ff;
  --color-ink: #1d2522;
  --color-muted: #5f6b66;
  --color-line: #dcebdd;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-neutral: #f9f8f6;
  --color-brand-soft: #f9fbf7;
  --color-soft: #eef9e8;
  --font-body: "Geist", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Geist", system-ui, sans-serif;
  --font-card-title: "Plus Jakarta Sans", "Geist", system-ui, sans-serif;
  --text-xs: clamp(.76rem, .72rem + .18vw, .86rem);
  --text-sm: clamp(.86rem, .82rem + .2vw, .98rem);
  --text-base: clamp(1rem, .96rem + .22vw, 1.12rem);
  --text-md: clamp(1.08rem, 1rem + .45vw, 1.32rem);
  --text-lg: clamp(1.12rem, 1.04rem + .38vw, 1.36rem);
  --text-card: clamp(1.04rem, .98rem + .22vw, 1.16rem);
  --text-h2: clamp(1.55rem, 1.36rem + .78vw, 2.12rem);
  --text-h1: clamp(2.08rem, 1.66rem + 1.9vw, 3.45rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --page-gutter: clamp(1rem, 2.4vw, 2rem);
  --space-stack: clamp(1.25rem, 2.2vw, 2rem);
  --space-section: clamp(2.25rem, 4vw, 4rem);
  --space-panel: clamp(1rem, 2vw, 1.75rem);
  --space-grid: clamp(1rem, 1.6vw, 2.5rem);
  --radius-sm: .5rem;
  --radius-md: .9rem;
  --radius-lg: 1.35rem;
  --shadow-soft: 0 12px 32px rgb(29 37 34 / .09);
  --shadow-card: 0 2px 8px rgb(29 37 34 / .06);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;
  --container: 1600px;
  --z-header: 30;
  --z-menu: 60;
  --z-overlay: 50;
  --z-ad: 20;
  --sticky-header-offset: 156px;
  --header-nav-pill-height: 56px;
  --header-nav-pill-font: var(--text-base);
}

* {
  box-sizing: border-box;
}

strong, b {
  font-weight: inherit;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Las banderas del selector WPML deben compartir línea con su etiqueta. */
#wpadminbar img.icl_als_iclflag {
  display: inline-block;
}

/* Prevent iOS auto-zoom on input focus */
input, select, textarea {
  font-size: max(1rem, 16px);
}

img.lazyload,
img.lazyloading {
  background: #e8e8e8;
  background-image: linear-gradient(90deg, #e8e8e8 0, #f5f5f5 45%, #e8e8e8 90%);
  background-size: 200% 100%;
  animation: sortir-lazy-skeleton 1.2s ease-in-out infinite;
}

img.lazyloaded:not(.footer-cloud):not(.footer-train) {
  background: none;
  animation: none;
}

/* Fade-in acotat a imatges de contingut (no SVGs decoratius del footer) */
.content-card img.lazyload,
.content-card img.lazyloading,
.article-body img.lazyload,
.article-body img.lazyloading {
  opacity: 0;
}

.content-card img.lazyloaded,
.article-body img.lazyloaded {
  opacity: 1;
  transition: opacity 320ms ease;
}

@keyframes sortir-lazy-skeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.lazyload,
  img.lazyloading {
    animation: none;
  }
}

a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

button, input, select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container));
  margin-inline: auto;
}

/* Filas SiteOrigin nativas (campaña/AdSense): no traen .container propio com els widgets
   Samn. El JS de SiteOrigin actualitza `left` en cada scroll; usar `left: auto !important`
   generava una vibració perquè CSS i JS lluitaven cada frame. Amb `position: static` el
   `left` inline no té cap efecte i l'oscil·lació desapareix. */
/* SiteOrigin custom container defaults. */
.panel-layout > div {
  position: static !important;
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container)) !important;
  max-width: var(--container);
  margin: 0 auto var(--space-section) !important;
  overflow: clip;
}

/* El hero-search desplega el panel de resultats (.hero-autocomplete) en
   position:absolute per sota de la caixa, sortint del bloc de la fila. El
   `overflow: clip` de dalt (necessari per als carrusels/banners SiteOrigin)
   el retallava i els resultats no es veien mai encara que la cerca anés bé. */
.panel-layout > div:has(.hero-search) {
  overflow: visible;
}

.panel-layout > div:first-child {
  margin-top: 0 !important;
}

.panel-layout > div:last-child {
  margin-bottom: 0 !important;
}

.panel-layout > .panel-grid.samn-so-row--no-bottom-margin {
  margin-bottom: 0 !important;
}

.panel-layout > .panel-grid > .panel-row-style,
.panel-layout > .panel-grid > .siteorigin-panels-stretch {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
}

body.siteorigin-panels-before-js .panel-layout > .panel-grid > .siteorigin-panels-stretch {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.panel-layout > .panel-grid .container {
  width: 100%;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset: 1rem auto auto 1rem;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-ink);
  color: white;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  transform: none;
  transition: transform var(--duration-base) var(--ease-emphasized);
}

.site-header {
  position: relative;
  z-index: var(--z-header);
  background: rgb(255 255 255 / .94);
  border-bottom: 1px solid var(--color-line);
}

.topbar {
  display: none;
  background: var(--color-green);
  color: white;
  font-size: var(--text-sm);
  padding: 0.5rem 0;
}

.topbar__inner, .header-main, .featured-nav__scroller {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.topbar__tagline {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .88;
  font-size: var(--text-xs);
}

.topbar__sep {
  opacity: .45;
  flex-shrink: 0;
  font-size: var(--text-xs);
}

.topbar__date {
  margin: 0;
  flex-shrink: 0;
  color: var(--color-yellow);
  font-weight: 700;
  font-size: var(--text-xs);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.topbar__social a {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: white;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.topbar__social a:hover { background: rgba(255, 255, 255, .35); }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.topbar__link {
  color: white;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  padding: .2rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.topbar__link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.topbar__link.is-highlighted { background: var(--color-orange); border-color: var(--color-orange); }
.topbar__link.is-highlighted:hover { background: #d4760f; border-color: #d4760f; }

.topbar p { margin: 0; }
.topbar a, .featured-nav a { text-decoration: none; }
.topbar nav, .featured-nav__scroller { display: flex; gap: var(--space-4); }
.topbar__nav a[aria-current="true"] {
  color: white;
  font-weight: 800;
  opacity: 1;
  border-bottom: 2px solid rgba(255,255,255,.6);
  padding-bottom: 1px;
}

.header-main {
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: max-content;
}

.brand__logo {
  width: clamp(132px, 18vw, 210px);
  height: auto;
}

.mobile-menu__head .brand__logo {
  width: 152px;
}

.header-search {
  display: none;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.icon-button:hover {
  transform: translateY(-1px);
  background: var(--color-soft);
}

.header-main .menu-toggle {
  display: none !important;
}

.desktop-nav {
  display: none;
  min-width: 0;
  font-family: var(--font-body);
}

.featured-nav {
  border-top: 1px solid var(--color-line);
  overflow: hidden;
  font-family: var(--font-body);
}

.featured-nav__scroller {
  justify-content: flex-start;
  overflow-x: auto;
  padding-block: .65rem;
  scrollbar-width: none;
  white-space: nowrap;
}

.featured-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .45rem .72rem;
  border: 1px solid var(--color-soft);
  border-radius: 999px;
  background: var(--color-soft);
  white-space: nowrap;
  font-size: clamp(.78rem, .72rem + .18vw, .9rem);
  font-weight: 700;
  color: var(--color-green-dark);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.featured-nav a:hover, .featured-nav a:focus-visible {
  transform: translateY(-1px);
  background: var(--color-cream);
  border-color: #e8d17a;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(29 37 34 / .48);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.menu-open .mobile-overlay {
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  width: min(92vw, 420px);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-surface);
  font-family: var(--font-body);
  transform: translateX(-102%);
  transition: transform var(--duration-slow) var(--ease-emphasized);
  box-shadow: var(--shadow-soft);
}

.menu-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.mobile-menu nav {
  flex: 1 1 auto;
  min-height: 0;
}

.mobile-panels {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.mobile-panel {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  transform: translateX(0);
  transition: transform var(--duration-base) var(--ease-emphasized), visibility var(--duration-base) linear;
}

.mobile-panel[aria-hidden="true"] {
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(100%);
}

.mobile-panel:has(.mobile-panel[aria-hidden="false"]) {
  overflow: hidden;
}

.mobile-panel__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 62px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.mobile-panel__bar strong {
  font-family: var(--font-body);
  font-size: 1.2rem;
}

.mobile-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: 0 .95rem 0 .7rem;
  border: 1px solid var(--color-green);
  border-radius: 999px;
  background: var(--color-soft);
  color: var(--color-green-dark);
  font-weight: 800;
  cursor: pointer;
}

.mobile-back:hover, .mobile-back:focus-visible {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #ffffff;
}

.mobile-level {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
}

.mobile-view-all {
  border-bottom: 1px solid var(--color-line);
}

.mobile-view-all a {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: .9rem .6rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
}

.mobile-view-all a:hover, .mobile-view-all a:focus-visible {
  background: var(--color-soft);
  color: var(--color-green-dark);
}

.mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.mobile-row a {
  flex: 1;
  padding: .9rem .6rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-row button:not(.mobile-row__trigger) {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mobile-row>.mobile-row__trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100% !important;
  height: auto !important;
  min-height: 52px;
  padding: .9rem .6rem;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.mobile-row>.mobile-row__trigger span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
}

.mobile-row>.mobile-row__trigger i {
  flex: 0 0 auto;
  color: var(--color-green-dark);
}

.mobile-row>.mobile-row__trigger:hover, .mobile-row>.mobile-row__trigger:focus-visible {
  color: var(--color-green-dark);
  background: var(--color-soft);
}

.mobile-row a,
.mobile-row__trigger span,
.mobile-view-all a {
  line-height: 1.18;
}

.mobile-row a small,
.mobile-row__trigger small,
.mobile-view-all small,
.desktop-slide-panel small {
  display: block;
  width: 100%;
  margin-top: .12rem;
  color: var(--color-muted);
  font-size: .78em;
  font-weight: 600;
  line-height: 1.15;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.button:hover {
  background-color: var(--color-green-dark);
}

.event-search .button {
  max-width: 200px;
  width: 100%;
}

.button--primary {
  background: var(--color-green);
  color: white;
}

.button--primary:hover, .button--primary:focus-visible {
  background: var(--color-green-dark);
}

.button--soft {
  background: var(--color-soft);
  color: var(--color-green-dark);
  border: 2px solid var(--color-green);
  transition: all var(--duration-fast) var(--ease-standard);
}

.button--soft:hover {
  background: var(--color-green);
  color: white;
  border-color: var(--color-green);
}

.button--ghost {
  background: transparent;
  color: var(--color-green-dark);
  border-color: var(--color-line);
  width: 100%;
}

.button--ghost:hover, .button--ghost:focus-visible {
  background: var(--color-soft);
  border-color: var(--color-green-dark);
  color: var(--color-green-dark);
}

.text-link {
  color: var(--color-green-dark);
  font-weight: 700;
}

.samn-slot {
  display: grid;
  place-items: center;
}

.samn-slot:empty {
  display: none;
}

.samn-slot__inner {
  width: 100%;
}

/* AdSense unfilled: oculta el <ins> i col·lapsa el slot si queda buit. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.samn-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]:only-child) { display: none; }

/* Placeholder de AdSense en entornos dev (samn_adsense_placeholder): caja dimensionada. */
.samn-adph {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 1rem;
  border: 1px dashed #b9c6d6;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, #f6f9fc, #f6f9fc 12px, #eef3f9 12px, #eef3f9 24px);
  color: #5b6b7d;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

.samn-slot--wide {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container));
  max-width: var(--container);
  margin: var(--space-stack) auto var(--space-section);
}

/* Billboard bajo el menú, encima del hero: ocupa el ancho completo del layout. */
.samn-slot--billboard {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container));
  margin: var(--space-stack) auto;
}

.samn-slot--billboard .samn-adph {
  max-width: none;
}

.samn-slot--billboard img, .samn-slot--billboard ins.adsbygoogle {
  width: 100%;
}

.samn-slot--flow {
  margin-block: var(--space-stack);
  min-height: 120px;
}

/* Slot inline dentro de un card-grid (publi posición 6 de listados): fila entera. */
.card-grid > .samn-slot--flow {
  grid-column: 1 / -1;
}

.samn-slot--box {
  min-height: 300px;
}

.samn-slot--col {
  width: 160px;
  min-height: 600px;
}

.hero {
  padding-bottom: 4px;
}

.hero__grid {
  display: grid;
  gap: var(--space-grid);
  align-items: center;
}

.hero__grid--centered {
  max-width: var(--container);
  justify-items: center;
  text-align: center;
}

.hero__grid--centered .hero__content {
  width: 100%;
}

.hero__grid--centered .hero__lead {
  margin-inline: auto;
}

.hero__grid--centered .quick-filters {
  margin-top: var(--space-stack);
  text-align: left;
}

.hero-intro {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.hero-intro__copy {
  min-width: 0;
}

.hero-intro__mascot {
  display: block;
  width: 170px;
  margin-bottom: -24px;
  position: relative;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.hero-search-scene {
  position: relative;
  width: 100%;
  margin-top: var(--space-3);
}

.hero-search-scene .hero-search {
  margin-top: 0;
}

.hero h1, .listing-hero h1, .article-hero h1, .article-header h1 {
  margin: .25rem 0 .75rem;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 800;
  text-wrap: balance;
}

.hero h1 {
  color: var(--color-green-dark);
}

body[data-page="home"] .hero h1 {
  font-size: var(--text-h2);
}

@media (min-width: 900px) {
  body[data-page="home"] .hero h1 {
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

.hero__lead, .listing-hero p, .article-summary {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.hero__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasized);
}

.eyebrow {
  margin: 0 0 .55rem;
  color: var(--color-red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--text-xs);
}

.hero .eyebrow {
  color: var(--color-green-dark);
  font-size: clamp(.78rem, .72rem + .3vw, .95rem);
  letter-spacing: .1em;
}

.event-search, .filters, .quick-filters {
  display: grid;
  gap: clamp(1.15rem, 2.2vw, 2rem);
  padding: clamp(1.35rem, 3vw, 2.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.event-search {
  background: linear-gradient(135deg, #fff8d7 0%, #ffffff 50%, #edf9e9 100%);
  border: 2px solid var(--color-green);
  box-shadow: 0 20px 60px rgb(47 143 70 / .15), 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: clamp(2rem, 4vw, 3.5rem);
}

.quick-filters__grid {
  display: grid;
  gap: clamp(.9rem, 1.5vw, 1.25rem);
}

.quick-filters__query {
  min-width: 0;
}

.quick-filters__actions {
  display: grid;
  gap: var(--space-3);
  align-self: end;
  grid-column: 1 / -1;
}

.quick-filters__actions button {
  width: 100%;
}

.quick-filters__actions button:last-child {
  display: none;
}

.quick-filters__feedback {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.quick-filters__summary {
  margin: 0;
  color: var(--color-green-dark);
  font-weight: 800;
}

.quick-filters__insights {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-filters__insights li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #fafbf8;
  border: 1px solid #e7ece5;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.filter-loader {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.filter-loader span {
  width: 18px;
  height: 18px;
  border: 3px solid var(--color-line);
  border-top-color: var(--color-green);
  border-radius: 999px;
  animation: filter-spin .7s linear infinite;
}

.quick-filters__results {
  display: grid;
  gap: var(--space-stack);
}

.quick-filters__results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.quick-filters__results-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.1;
  font-weight: 600;
  text-wrap: balance;
}

.quick-filters__results-head span {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.quick-results {
  margin-bottom: var(--space-section);
}

@keyframes filter-spin {
  to {
    transform: rotate(360deg);
  }
}

.field {
  display: grid;
  gap: .35rem;
}

.field label, .date-filter legend {
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.field label i {
  color: var(--color-green);
  font-size: 1.1rem;
  font-weight: 700;
}

.button i {
  font-size: 1.15rem;
  font-weight: 700;
}

.field input, .field select {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--color-line);
  border-radius: 999px;
  padding: 0 1.05rem;
  background: white;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.field input:focus, .field select:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(47, 143, 70, 0.1);
  outline: none;
}

.autocomplete-field {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  gap: .25rem;
  max-height: 260px;
  margin: 0;
  padding: .45rem;
  overflow-y: auto;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.autocomplete-list[hidden] {
  display: none;
}

.autocomplete-list button {
  display: grid;
  width: 100%;
  gap: .1rem;
  padding: .62rem .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.autocomplete-list button:hover,
.autocomplete-list button:focus-visible,
.autocomplete-list button[aria-selected="true"] {
  background: var(--color-soft);
  color: var(--color-green-dark);
}

.autocomplete-list span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.input-icon {
  position: relative;
}

.input-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-green);
  font-weight: 700;
  font-size: 1.2rem;
}

.input-icon input {
  padding-left: 2.6rem;
}

.date-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.date-filter legend {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.date-filter legend i {
  color: var(--color-green);
  font-size: 1.1rem;
  font-weight: 700;
}

.date-filter label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  border: 2px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-cream);
  transition: all var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}

.date-filter input:checked {
  accent-color: var(--color-green);
}

.date-filter label:has(input:checked) {
  border-color: var(--color-green);
  background: #fff4bf;
  color: var(--color-green-dark);
  font-weight: 800;
}

.form-status {
  margin: 0;
  color: var(--color-green-dark);
  font-weight: 700;
}

.page-grid, .article-layout {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  align-items: start;
}

.content-flow {
  display: grid;
  gap: var(--space-section);
  min-width: 0;
}

body[data-page="category"] .content-flow {
  gap: var(--space-stack);
}

body[data-page="category"] .content-flow>.section {
  margin-top: 0;
}

.section {
  min-width: 0;
}

body[data-page="home"] .samn-cards-widget--layout-featured > .section {
  background: var(--color-cream);
}

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-stack);
}

.section__head .eyebrow {
  margin-bottom: .7rem;
}

.section__head--listing-results {
  margin-bottom: 0;
}

.section h2, .side-panel h2, .booking-card h2, .prose h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}

.band {
  padding: clamp(1.25rem, 2.8vw, 2.5rem);
  margin-inline: 0;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

/* Band como contenedor de primer nivel (portada SiteOrigin): el margin-inline:0 de
   .band machaca el auto de .container y la deja pegada a la izquierda. Recentrar.
   No afecta a .band dentro de .content-flow (ahí es .band sin .container). */
.container.band {
  margin-inline: auto;
}

.card-grid {
  display: grid;
  gap: var(--space-grid);
  align-items: stretch;
}

.card-carousel {
  position: relative;
  min-width: 0;
}

.card-carousel .swiper {
  padding: .25rem .15rem 2.1rem;
}

.card-carousel .swiper-wrapper {
  align-items: stretch;
}

.card-carousel .swiper-slide {
  width: min(82vw, 310px);
  height: auto;
  display: flex;
}

.card-carousel .content-card {
  width: 100%;
}

.carousel-controls {
  position: absolute;
  inset: 42% .5rem auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  pointer-events: none;
  transform: translateY(-50%);
}

.carousel-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-green-dark);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.carousel-button:hover, .carousel-button:focus-visible {
  background: var(--color-green);
  color: white;
}

.carousel-button.swiper-button-disabled {
  opacity: .42;
  cursor: not-allowed;
}

.card-carousel .swiper-scrollbar {
  left: .15rem;
  bottom: .25rem;
  width: calc(100% - .3rem);
  height: 6px;
  background: rgb(23 100 43 / .12);
  border-radius: 999px;
}

.card-carousel .swiper-scrollbar-drag {
  background: var(--color-green);
  border-radius: 999px;
}

.promo-slider {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-neutral);
  box-shadow: var(--shadow-card);
}

.promo-slider .swiper,
.promo-slider .swiper-wrapper,
.promo-slider .swiper-slide {
  height: 100%;
}

.promo-slider__link {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(180px, 22vw, 320px);
}

.promo-slider__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-slider__controls {
  position: absolute;
  inset: 50% .75rem auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.promo-slider .swiper-pagination {
  bottom: .65rem;
}

.promo-slider .swiper-pagination-bullet {
  background: white;
  opacity: .65;
}

.promo-slider .swiper-pagination-bullet-active {
  background: var(--color-yellow);
  opacity: 1;
}

.layout-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.layout-slider .swiper,
.layout-slider .swiper-wrapper,
.layout-slider .swiper-slide {
  min-height: var(--samn-layout-slider-height, 320px);
}

.layout-slider__slide {
  position: relative;
  min-height: var(--samn-layout-slider-height, 320px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.layout-slider__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.layout-slider__content {
  position: relative;
  z-index: 2;
  min-height: inherit;
}

.layout-slider .panel-layout > div {
  width: 100% !important;
  max-width: none;
  margin-bottom: 0 !important;
}

.layout-slider .swiper-pagination {
  bottom: .65rem;
}

.layout-slider .swiper-pagination-bullet {
  background: white;
  opacity: .65;
}

.layout-slider .swiper-pagination-bullet-active {
  background: var(--color-yellow);
  opacity: 1;
}

.bc-random-banner-swiper {
  width: 100%;
  overflow: hidden;
}

.bc-random-banner-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-random-banner-swiper .bc_random_banner,
.bc-random-banner-swiper .bc_random_banner a,
.bc-random-banner-swiper .bc_random_banner img {
  display: block;
  max-width: 100%;
}

.bc-random-banner-swiper .bc_random_banner img {
  height: auto;
}

.bc-random-banner-swiper .swiper-pagination {
  position: static;
  margin-top: .5rem;
}

.content-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  will-change: transform;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.content-card[hidden], .swiper-slide[hidden] {
  display: none;
}

.content-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.content-card__image {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  background: #e8e8e8;
}

/* La imatge ocupa la card; les etiquetes s'hi superposen sense dimensionar la grid. */
.content-card__image img {
  grid-column: 1;
  grid-row: 1;
}

.content-card__image img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasized);
}

.content-card__badges {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  z-index: 1;
}

.content-card__badges > .samn-badge,
.content-card__badges > .samn-pin {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.content-card:hover img {
  transform: scale(1.03);
}

.content-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-panel);
}

.samn-badge {
  display: inline-flex;
  width: fit-content;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: var(--color-cream);
  color: #7d4a00;
  font-weight: 800;
  font-size: var(--text-xs);
  text-decoration: none;
}

/* Xinxeta destacada (inc/pins.php): mateix pill que .samn-badge però verda */
.samn-pin {
  display: inline-flex;
  width: fit-content;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: var(--color-green);
  color: #fff;
  font-weight: 800;
  font-size: var(--text-xs);
  text-decoration: none;
}

/* Badge de categoria + xinxeta en línia al hero de single (el content és grid) */
.article-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.content-card h3 {
  margin: 0;
  min-height: 2.35em;
  font-family: var(--font-card-title);
  font-size: var(--text-card);
  line-height: 1.16;
  font-weight: 800;
  text-wrap: balance;
}

.content-card h3 a {
  text-decoration: none;
}

.content-card p {
  display: -webkit-box;
  min-height: 3.1em;
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-meta {
  display: grid;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
  min-height: 4.6em;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  align-self: start;
}

.card-meta div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem;
  min-width: 0;
  max-width: 100%;
}

.card-meta dt, .card-meta dd {
  margin: 0;
}

.card-meta dd {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar {
  display: grid;
  gap: max(1rem, var(--space-grid));
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.side-panel, .sponsored-card, .booking-card {
  padding: var(--space-panel);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.date-list, .clean-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.date-list li {
  display: grid;
  gap: .2rem;
}

.date-list time {
  color: var(--color-red);
  font-weight: 800;
}

.sponsored-card span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sponsored-card h2 {
  margin: .35rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.08;
  text-wrap: balance;
}

.link-cloud, .category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-cloud a, .category-grid a {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .72rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.link-cloud a:hover, .category-grid a:hover {
  transform: translateY(-2px);
  background: var(--color-soft);
  border-color: #b8d8bd;
}

.category-grid i {
  color: var(--color-green);
  font-size: var(--text-lg);
}

.category-children {
  --category-child-size: clamp(8.5rem, 15vw, 12rem);
  margin: var(--space-section) 0;
}

.category-children__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--category-child-size)), var(--category-child-size)));
  justify-content: start;
  gap: clamp(1rem, 3vw, 2rem);
}

.category-children__item {
  min-width: 0;
}

.category-children__item a {
  display: grid;
  justify-items: center;
  gap: .75rem;
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
}

.category-children__item figure {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-soft);
  box-shadow: 0 10px 24px rgb(29 37 34 / .1);
}

.category-children__placeholder span {
  color: var(--color-green-dark);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
}

.category-children__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.category-children__item .title {
  max-width: 16ch;
  color: var(--color-green-dark);
  font-family: var(--font-card-title);
  font-size: var(--text-card);
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
}

.category-children__item a:hover figure,
.category-children__item a:focus-visible figure {
  box-shadow: var(--shadow-card);
}

.category-children__item a:hover img,
.category-children__item a:focus-visible img {
  transform: scale(1.04);
}

.editorial-links {
  display: grid;
  gap: var(--space-grid);
}

.editorial-links ul {
  display: grid;
  gap: var(--space-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial-links article {
  padding: var(--space-panel);
  background: var(--color-surface);
  border-left: 5px solid var(--color-yellow);
  border-radius: var(--radius-md);
}

.editorial-links a {
  font-family: var(--font-card-title);
  font-size: var(--text-md);
  font-weight: 800;
  text-decoration: none;
}

.editorial-links p {
  margin: .35rem 0 0;
  color: var(--color-muted);
}

/* === Related Categories (Tambe et pot interessar) =========== */
.related-categories {
  background: var(--color-neutral);
  padding-block: var(--space-section);
  margin-top: var(--space-section);
  margin-bottom: calc(-1 * var(--space-section));
}

.related-categories .card-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .related-categories .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .related-categories .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.related-categories__item {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.related-categories__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.related-categories__item > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-categories__item .img-container {
  display: block;
  overflow: hidden;
  background: var(--color-soft);
  aspect-ratio: 16 / 10;
}

.related-categories__item .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasized);
}

.related-categories__item:hover .img-container img {
  transform: scale(1.03);
}

.related-categories__item .text-container {
  display: block;
  padding: var(--space-5) var(--space-panel) var(--space-3);
  font-family: var(--font-card-title);
  font-size: var(--text-card);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-green-dark);
}

.related-categories__item .cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-panel) var(--space-4);
  list-style: none;
}

.related-categories__item .cat li {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.related-categories__item .cat li::before {
  content: "›";
  flex-shrink: 0;
  color: var(--color-green);
  font-size: 1.1em;
  line-height: 1;
}

.related-categories__item .cat a {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.related-categories__item .cat a:hover {
  color: var(--color-green-dark);
}

.prose {
  max-width: 78ch;
}

.prose p {
  color: var(--color-muted);
  font-size: var(--text-md);
}

.breadcrumb {
  max-width: 100%;
  overflow-x: auto;
  padding-inline: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .32rem;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: .55rem 1.1rem;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.2;
  background: #fafbf8;
  border: 1px solid #e7ece5;
  border-radius: 999px;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: .32rem;
  color: #9aa8a0;
}

.breadcrumb li {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumb li[aria-current="page"] {
  white-space: nowrap;
}

.breadcrumb a {
  color: #4c6157;
  font-weight: 700;
  white-space: nowrap;
}

.listing-hero {
  display: grid;
  gap: clamp(.75rem, 1.3vw, 1rem);
  width: 100%;
  max-width: none;
  padding: clamp(.35rem, 1vw, .65rem) 0 clamp(.35rem, 1.2vw, .8rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.listing-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--color-green-dark);
  font-size: clamp(1.85rem, 1.48rem + 1.05vw, 2.45rem);
  line-height: 1.12;
}

.listing-hero__desc {
  width: 100%;
  max-width: none;
}

.listing-hero__desc,
.listing-hero__desc p {
  color: var(--color-muted);
  font-size: clamp(1rem, .95rem + .18vw, 1.1rem);
  line-height: 1.56;
}

.listing-hero__desc h2,
.listing-hero__desc h3 {
  margin: clamp(.5rem, 1vw, .7rem) 0 .35rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(1.12rem, 1.02rem + .26vw, 1.28rem);
  line-height: 1.25;
  font-weight: 800;
}

.listing-hero__desc p {
  margin: 0;
}

.listing-hero__desc p + p {
  margin-top: .42rem;
}

.article-hero {
  padding: clamp(1.25rem, 3vw, 2.75rem);
  background: var(--color-playful-band);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.filters {
  margin-top: 0;
}

.chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chips button {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: .45rem .7rem;
  background: var(--color-green-dark);
  color: white;
  cursor: pointer;
}

.empty-state {
  padding: var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.error-404-page {
  padding-bottom: var(--space-section);
}

.error-404-layout {
  display: block;
  max-width: 980px;
}

.error-404-content {
  max-width: 860px;
  margin-inline: auto;
}

.error-404-content .article-header {
  text-align: center;
}

.error-404-content .article-header__content {
  margin-inline: auto;
}

.error-404-body {
  max-width: 760px;
  margin-inline: auto;
}

.error-404-body .featured-image {
  max-width: 520px;
  margin: var(--space-6) auto var(--space-7);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: transparent;
}

.error-404-body .featured-image img {
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}

.error-404-body h2 {
  margin-top: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.error-404-body ul {
  margin-block: var(--space-4) var(--space-6);
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-stack);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: white;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.pagination a.page-numbers:hover {
  transform: translateY(-1px);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.pagination .page-numbers.current,
.pagination [aria-current="page"] {
  border-color: var(--color-green);
  background: var(--color-green);
  color: white;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-stack);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fafbf8;
}

.page-links a,
.page-links .post-page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: .45rem .8rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-green-dark);
  font-weight: 800;
  text-decoration: none;
}

.page-links .current {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #ffffff;
}

.page-links a:hover,
.page-links a:focus-visible {
  background: var(--color-soft);
  border-color: var(--color-green);
}

.article {
  display: grid;
  gap: var(--space-stack);
  min-width: 0;
}

.article-header {
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
}

.article-hero {
  display: grid;
  position: relative;
  align-items: end;
  min-height: clamp(360px, 52vw, 520px);
  margin-top: 0;
  overflow: hidden;
  isolation: isolate;
}

.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgb(250 251 248 / .98) 0%, rgb(250 251 248 / .88) 44%, rgb(250 251 248 / .22) 100%),
    linear-gradient(90deg, rgb(250 251 248 / .96) 0%, rgb(250 251 248 / .72) 48%, rgb(250 251 248 / .08) 100%);
}

.article-hero__content,
.article-header__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
  min-width: 0;
}

.article-hero__content h1,
.article-hero__content .article-summary,
.article-header__content h1,
.article-header__content .article-summary {
  margin-inline: 0;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.article-byline time { font-weight: 600; }

.article-byline--footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--space-4);
}

.meta-strip span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-weight: 700;
}

.featured-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  box-shadow: none;
}

.article-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.toc strong {
  margin-right: auto;
}

/* === EZ Table of Contents ================================ */
#ez-toc-container {
  padding: var(--space-panel) !important;
  background: var(--color-soft) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  width: 100%; 
  margin-bottom: var(--space-5);
}

#ez-toc-container .ez-toc-title:empty {
  display: none;
}

#ez-toc-container .ez-toc-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-green-dark);
}

/* Toggle label */
#ez-toc-container .ez-toc-cssicon-toggle-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--space-3);
  cursor: pointer;
  user-select: none;
}

#ez-toc-container .ez-toc-icon-toggle-span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* Override plugin inline orange on SVGs */
#ez-toc-container svg {
  fill: var(--color-muted) !important;
  color: var(--color-muted) !important;
}

/* Hide native checkbox */
#ez-toc-container>input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Collapse nav when checkbox checked */
#ez-toc-container>input[type="checkbox"]:checked~nav {
  display: none;
}

/* List resets */
#ez-toc-container .ez-toc-list,
#ez-toc-container .ez-toc-list-level-3 {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Level 1 */
#ez-toc-container .ez-toc-list-level-1 {
  display: grid;
  gap: .1rem;
}

#ez-toc-container .ez-toc-list-level-1>li>.ez-toc-link {
  display: block !important;
  padding: .38rem .55rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.35;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

#ez-toc-container .ez-toc-list-level-1>li>.ez-toc-link:hover {
  background: var(--color-surface) !important;
  color: var(--color-green-dark) !important;
}

/* Level 3 (nested) */
#ez-toc-container .ez-toc-list-level-3 {
  margin: .2rem 0 .35rem .55rem !important;
  border-left: 2px solid var(--color-line);
  padding-left: .6rem !important;
  display: grid;
  gap: .05rem;
}

#ez-toc-container .ez-toc-list-level-3 .ez-toc-link {
  display: block !important;
  padding: .28rem .4rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none !important;
  line-height: 1.4;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

#ez-toc-container .ez-toc-list-level-3 .ez-toc-link:hover {
  color: var(--color-green-dark) !important;
  background: var(--color-surface) !important;
}

/* Disable plugin counters */
#ez-toc-container .ez-toc-link::before {
  content: none !important;
}

.article-body.side-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.article-body__grid {
  display: grid;
  gap: var(--space-grid);
}

.article-body__grid--split {
  align-items: start;
}

@media (min-width: 960px) {
  .article-body__grid--split {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.article-body__info {
  display: grid;
  gap: var(--space-grid);
  position: sticky;
  top: var(--space-4);
}

.article-body__info .booking-card {
  position: static;
}

.article-body p {
  font-size: var(--text-md);
}

.article-body h5 {
  font-size: var(--text-md);
  line-height: 1.35;
}

.article-body img,
.article-body video,
.article-body iframe {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.article-body img.size-full-100 {
  width: 100%;
  height: auto;
  display: block;
}

.article-body img,
.article-body video {
  height: auto;
}

.article-body figure {
  margin-inline: 0;
}

.article-body figure img {
  width: 100%;
}

.article-body .wp-block-image,
.article-body .wp-block-embed,
.article-body .wp-block-video,
.article-body .wp-caption {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.article-body .wp-block-embed__wrapper {
  overflow: hidden;
  border-radius: inherit;
}

.article-body .wp-block-embed iframe,
.article-body iframe[src*="youtube.com"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.map-placeholder {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-green-dark);
  font-weight: 800;
}

.map-placeholder--main {
  margin-top: var(--space-section);
}

@media (min-width: 960px) {
  .map-placeholder--main {
    grid-column: 1;
    margin-top: var(--space-stack);
  }
}

.article-split__main .map-placeholder iframe { aspect-ratio: 16 / 5; }

.map-placeholder__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.08;
  color: var(--color-ink);
}

.map-placeholder iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.map-placeholder a {
  justify-self: start;
  color: var(--color-green-dark);
  font-weight: 800;
}

.map-placeholder__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: var(--space-2) 0;
  background: transparent;
  border-top: 0;
}

.map-placeholder__address {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.map-placeholder__address i {
  color: var(--color-green-dark);
}

.map-placeholder__directions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-green-dark);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
}

.map-placeholder__directions:hover {
  text-decoration: underline;
}

.booking-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.article-split__aside .booking-card {
  position: static;
}

.booking-card h2 {
  font-size: var(--text-lg);
  line-height: 1.08;
  text-wrap: balance;
}

.booking-card dl {
  display: grid;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.booking-card__item {
  display: grid;
  gap: .18rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
}

.booking-card dt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.booking-card dt i {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--color-soft);
  color: #397047;
  font-size: 1rem;
  letter-spacing: 0;
}

.booking-card dd {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-weight: 400;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.booking-card dd a[href^="http"],
.booking-card dd a[href^="mailto"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-card .button {
  width: 100%;
  margin-top: 0;
}

.booking-card__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.booking-card__logo-img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.booking-card__rrss-heading {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.booking-card__rrss {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.booking-card__rrss-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-green-dark);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.booking-card__rrss-link:hover {
  background: var(--color-green-dark);
  color: #fff;
  border-color: var(--color-green-dark);
}

.booking-card__item--serveis {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.booking-card__serveis-heading {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.booking-card__serveis-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-card__serveis-list li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.booking-card__serveis-list li i {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--color-soft);
  color: var(--color-green-dark);
  font-size: 1rem;
}

.calendar-menu {
  position: relative;
}

.calendar-menu [data-calendar-toggle] {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--color-green);
  border-radius: 999px;
  background: transparent;
  color: var(--color-green-dark);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.calendar-menu [data-calendar-toggle]:hover,
.calendar-menu [data-calendar-toggle]:focus-visible {
  background: var(--color-soft);
  border-color: var(--color-green-dark);
  color: var(--color-green-dark);
}

.calendar-menu__options[hidden] {
  display: none;
}

.calendar-menu__options {
  display: grid;
  gap: .4rem;
  margin-top: .5rem;
  padding: .55rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.calendar-menu__options a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--color-green-dark);
  font-weight: 800;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.calendar-menu__options a:hover, .calendar-menu__options a:focus-visible {
  background: var(--color-green-dark);
  color: #ffffff;
}

.section--full {
  grid-column: 1 / -1;
}

.article-split {
  display: grid;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.article-split__main {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.aside-mascot {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: var(--space-4) auto calc(-1 * var(--space-3));
  position: relative;
  z-index: 1;
}

.article-split__aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-brand-soft);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.article-split__aside > * {
  min-width: 0;
  max-width: 100%;
}

/* Aside elements: sin card propia, solo contenido */
.article-split__aside .booking-card,
.article-split__aside .side-panel,
.article-split__aside .recipe-info {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tipografia controlada dins el aside */
.article-split__aside h2 {
  font-size: var(--text-md);
}

.article-split__aside .booking-card__item dt {
  font-size: var(--text-xs);
}

.article-split__aside .booking-card__item dd {
  font-size: var(--text-sm);
}

.article-split__aside .button {
  min-height: 44px;
  font-size: var(--text-sm);
}

@media (min-width: 960px) {
  .article-split {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0;
  }
  .article-split--solo {
    grid-template-columns: 1fr;
  }
  .article-split--solo .prose {
    max-width: none;
  }
  .article-split__aside {
    border-top: 0;
    border-left: 1px solid var(--color-line);
  }
}

.article-split__main .map-placeholder iframe {
  aspect-ratio: 16 / 5;
}

.recipe-info {
  display: grid;
  gap: var(--space-4);
}

.recipe-info h2 {
  font-size: var(--text-lg);
  line-height: 1.08;
  margin-bottom: var(--space-2);
}

.recipe-info__times {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.recipe-info__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem .9rem;
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-align: center;
  flex: 1 1 auto;
  min-width: 60px;
}

.recipe-info__item i {
  font-size: 1.2rem;
  color: var(--color-green-dark);
}

.recipe-info__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  font-weight: 700;
}

.recipe-info__item strong {
  font-size: var(--text-base);
  font-weight: 800;
}

.recipe-info__ingredients {
  display: grid;
  gap: var(--space-2);
}

.recipe-info__ingredients .eyebrow {
  margin-bottom: 0;
}

.recipe-info__ingredients ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .2rem;
}

.recipe-info__ingredients li {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.mas-info h2 {
  font-size: var(--text-lg);
  line-height: 1.08;
  margin-bottom: var(--space-4);
}

.mas-info__body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

.mas-info__body p {
  margin: 0 0 .75rem;
}

.mas-info__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.mas-info__body h3, .mas-info__body h4, .mas-info__body h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 1rem 0 .35rem;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.mas-info__body hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: .75rem 0;
}

.mas-info__body ul, .mas-info__body ol {
  margin: 0 0 .75rem;
  padding-left: 1.2rem;
  display: grid;
  gap: .4rem;
}

.mas-info__body li {
  color: var(--color-muted);
}

.mas-info__body a {
  color: var(--color-green-dark);
  font-weight: 600;
  word-break: break-all;
}

.mas-info__body a:hover {
  color: var(--color-green);
}

.mas-info__body .data-taronja {
  color: var(--color-green-dark);
  font-size: var(--text-sm);
}

.post-taxonomy {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-5);
}

.post-taxonomy__group {
  display: grid;
  gap: var(--space-2);
}

.post-taxonomy__label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--color-muted);
}

.post-taxonomy__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.post-taxonomy__pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  color: var(--color-green-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.post-taxonomy__pill:hover {
  background: var(--color-mint);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.post-taxonomy__pill--tag {
  background: var(--color-surface);
  color: var(--color-muted);
}

.post-taxonomy__pill--tag:hover {
  background: var(--color-soft);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.author-box {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-panel);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  margin-top: var(--space-section);
}

.author-box__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-card);
}

.author-box__avatar--initials {
  display: inline-grid;
  place-items: center;
  background: var(--color-green-dark);
  color: #fff;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
}

.author-box__body {
  display: grid;
  gap: .2rem;
}

.author-box__body .eyebrow {
  margin: 0 0 .15rem;
  color: var(--color-green-dark);
}

.author-box__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-green-dark);
  text-decoration: none;
  line-height: 1.2;
}

.author-box__name:hover {
  text-decoration: underline;
}

.author-box__bio {
  margin: .4rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.author-box__rrss {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}

.author-box__rrss-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-green-dark);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.author-box__rrss-link:hover {
  background: var(--color-green-dark);
  color: #fff;
  border-color: var(--color-green-dark);
}

@media (max-width: 480px) {
  .author-box {
    flex-direction: column;
    gap: var(--space-4);
  }
}

.site-footer {
  position: relative;
  margin-top: var(--space-section);
  padding: clamp(2rem, 4vw, 4rem) 0 0;
  overflow: visible;
  background: var(--color-neutral);
  color: var(--color-ink);
  border-top: 1px solid var(--color-line);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(18rem, 32vw, 30rem);
  pointer-events: none;
  background: linear-gradient(180deg, rgb(232 247 228 / .72) 0%, rgb(232 247 228 / .34) 48%, rgb(255 255 255 / 0) 100%);
}

.newsletter-card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  color: var(--color-ink);
  background: var(--color-mint);
  border: 10px solid rgb(47 143 70 / .16);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px rgb(23 100 43 / .12);
  overflow: hidden;
}

/* Footer: capa d'overrides de context (z-index per tren animat + marge inferior) */
.footer-newsletter {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(360px, 520px);
  align-items: start;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1000px;
  margin: 0 auto clamp(-4rem, -5vw, -2.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.footer-newsletter .newsletter-card__visual {
  display: none;
}

.footer-newsletter .newsletter-card__copy {
  max-width: 440px;
}

.footer-newsletter .newsletter-form {
  max-width: 520px;
  margin-left: 0;
}

.footer-newsletter .newsletter-form .mc4wp-form input[type="text"],
.footer-newsletter .newsletter-form .mc4wp-form input[type="email"] {
  border-color: rgb(23 100 43 / .18);
  background: rgb(255 255 255 / .92);
}

.footer-newsletter .newsletter-form .mc4wp-form input[type="submit"] {
  min-width: 220px;
}

@media (max-width: 997px) {
  .footer-newsletter {
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
  }

  .footer-newsletter .newsletter-card__copy,
  .footer-newsletter .newsletter-form {
    max-width: none;
  }
}

.footer-train-section {
  position: relative;
  aspect-ratio: 2169 / 689;
  overflow: hidden;
  margin: 0;
  contain: layout paint;
  isolation: isolate;
  background-image: var(--train-bg, none);
  background-size: 103% auto;
  background-repeat: no-repeat;
  background-position: 50% bottom;
  animation: footer-bg-pan 60s ease-in-out infinite alternate;
}

.footer-train-track {
  position: relative;
  height: 100%;
  overflow: visible;
}



.footer-train-runner {
  position: absolute;
  left: 0;
  bottom: 15.25%;
  width: clamp(250px, 38vw, 500px);
  aspect-ratio: 460 / 151;
  animation: footer-train-ride 18s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
}

.footer-train {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform-origin: 50% 86%;
  animation: footer-train-bob .62s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.footer-train-smoke {
  position: absolute;
  left: -1.5%;
  top: -2%;
  width: 18%;
  height: 38%;
  pointer-events: none;
  z-index: 0;
}

.footer-train-smoke span {
  position: absolute;
  left: 48%;
  bottom: 28%;
  width: clamp(8px, 2.4vw, 25px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(57, 57, 57, .46);
  border: 1px solid rgba(35, 35, 35, .14);
  box-shadow: inset -2px -3px 0 rgba(35, 35, 35, .14);
  filter: blur(1.1px);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.36);
  animation: footer-train-smoke-puff 3.1s cubic-bezier(.16, .8, .22, 1) infinite;
  will-change: transform, opacity;
}

.footer-train-smoke span:nth-child(2) {
  animation-delay: .48s;
  left: 42%;
  bottom: 22%;
  width: clamp(7px, 2vw, 21px);
  animation-name: footer-train-smoke-puff-soft;
}

.footer-train-smoke span:nth-child(3) {
  animation-delay: .96s;
  left: 54%;
  bottom: 30%;
  width: clamp(7px, 1.9vw, 20px);
}

.footer-train-smoke span:nth-child(4) {
  animation-delay: 1.44s;
  left: 46%;
  bottom: 26%;
  width: clamp(6px, 1.7vw, 18px);
  animation-name: footer-train-smoke-puff-soft;
}

.footer-train-smoke span:nth-child(5) {
  animation-delay: 1.92s;
  left: 51%;
  bottom: 32%;
  width: clamp(8px, 2.2vw, 23px);
}

.footer-train-smoke span:nth-child(6) {
  animation-delay: 2.4s;
  left: 39%;
  bottom: 24%;
  width: clamp(6px, 1.5vw, 16px);
  animation-name: footer-train-smoke-puff-soft;
}

@keyframes footer-train-ride {
  0% {
    transform: translateX(110vw);
  }

  100% {
    transform: translateX(-560px);
  }
}

@keyframes footer-train-bob {
  0%, 100% {
    transform: translateY(0) rotate(-.35deg);
  }

  50% {
    transform: translateY(-4px) rotate(.35deg);
  }
}

@keyframes footer-train-smoke-puff {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.34);
  }

  12% {
    opacity: .66;
  }

  58% {
    opacity: .32;
  }

  100% {
    opacity: 0;
    transform: translate3d(-82%, -178%, 0) scale(1.46);
  }
}

@keyframes footer-train-smoke-puff-soft {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.28);
  }

  14% {
    opacity: .48;
  }

  62% {
    opacity: .24;
  }

  100% {
    opacity: 0;
    transform: translate3d(-48%, -158%, 0) scale(1.22);
  }
}

@keyframes footer-bg-pan {
  from { background-position: 40% bottom; }
  to   { background-position: 60% bottom; }
}

.footer-cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

.footer-seagulls {
  position: absolute;
  top: 24%;
  right: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.footer-seagull {
  position: absolute;
  width: clamp(22px, 3.2vw, 54px);
  height: auto;
  fill: none;
  stroke: #474747;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
  will-change: transform;
  backface-visibility: hidden;
}

.footer-seagull__wing {
  transform-box: fill-box;
  will-change: transform;
  animation: footer-seagull-flap .92s ease-in-out infinite;
}

.footer-seagull__wing--left {
  transform-origin: 100% 82%;
}

.footer-seagull__wing--right {
  transform-origin: 0 82%;
  animation-name: footer-seagull-flap-right;
}

.footer-seagull__body {
  opacity: .88;
}

.footer-seagull--1 {
  top: 36%;
  right: 8%;
  animation: footer-seagull-glide-1 16s ease-in-out infinite;
}

.footer-seagull--2 {
  top: 62%;
  right: 14%;
  width: clamp(18px, 2.5vw, 42px);
  stroke-width: 3.4;
  opacity: .72;
  animation: footer-seagull-glide-2 19s ease-in-out infinite;
}

@keyframes footer-seagull-flap {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }

  45% {
    transform: rotate(10deg) translateY(2px);
  }
}

@keyframes footer-seagull-flap-right {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }

  45% {
    transform: rotate(-10deg) translateY(2px);
  }
}

@keyframes footer-seagull-glide-1 {
  0%, 100% {
    transform: translate3d(4%, 2%, 0) rotate(-2deg) scaleX(1);
  }

  35% {
    transform: translate3d(-28%, -10%, 0) rotate(3deg) scaleX(1.03);
  }

  70% {
    transform: translate3d(-12%, 12%, 0) rotate(-1deg) scaleX(.98);
  }
}

@keyframes footer-seagull-glide-2 {
  0%, 100% {
    transform: translate3d(0, 5%, 0) rotate(2deg) scaleX(1);
  }

  45% {
    transform: translate3d(24%, -12%, 0) rotate(-3deg) scaleX(.96);
  }

  75% {
    transform: translate3d(-18%, 8%, 0) rotate(1deg) scaleX(1.02);
  }
}

/* Quan JS corre (IntersectionObserver): pausa fora del viewport */
.footer-train-section.js-ready .footer-cloud,
.footer-train-section.js-ready .footer-train-runner,
.footer-train-section.js-ready .footer-train,
.footer-train-section.js-ready .footer-train-smoke span,
.footer-train-section.js-ready .footer-seagull,
.footer-train-section.js-ready .footer-seagull__wing {
  animation-play-state: paused;
}

.footer-train-section.is-visible .footer-cloud,
.footer-train-section.is-visible .footer-train-runner,
.footer-train-section.is-visible .footer-train,
.footer-train-section.is-visible .footer-train-smoke span,
.footer-train-section.is-visible .footer-seagull,
.footer-train-section.is-visible .footer-seagull__wing {
  animation-play-state: running;
}

.footer-cloud--1 {
  animation: cloud-cross-right 120s linear infinite;
}

.footer-cloud--2 {
  animation: cloud-cross-left 150s linear infinite;
}

.footer-cloud--3 {
  animation: cloud-cross-right 135s linear infinite;
}

@media (max-width: 719px) {
  .footer-cloud,
  .footer-seagulls {
    display: none;
  }
}

@keyframes cloud-cross-right {
  from { transform: translateX(0); }
  to   { transform: translateX(110%); }
}

@keyframes cloud-cross-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-110%); }
}

.newsletter-card .eyebrow {
  color: var(--color-green-dark);
  font-size: var(--text-xs) !important;
}

.newsletter-card__copy,
.newsletter-form {
  position: relative;
  z-index: 1;
}

.newsletter-card__copy {
  flex: 1 1 300px;
}

.newsletter-form {
  flex: 1 1 360px;
  max-width: 560px;
  margin-left: auto;
}

.newsletter-card__visual {
  position: relative;
  flex: 0 0 clamp(180px, 17vw, 310px);
  align-self: center;
  width: clamp(180px, 17vw, 310px);
  aspect-ratio: 1;
  margin: 0;
}

.newsletter-card__visual::before {
  content: "";
  position: absolute;
  inset: 1% 8% 8% 8%;
  border: 2px solid rgb(23 100 43 / .18);
  border-radius: 34% 46% 38% 42%;
  background: #fff;
  box-shadow: 10px 10px 0 rgb(47 143 70 / .12);
  animation: pau-newsletter-halo 5.8s ease-in-out infinite;
}



.newsletter-card__pau {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
}

@keyframes pau-newsletter-halo {
  0%, 72%, 100% {
    border-color: rgb(23 100 43 / .18);
    box-shadow: 10px 10px 0 rgb(47 143 70 / .12);
  }

  82% {
    border-color: rgb(47 143 70 / .36);
    box-shadow: 10px 10px 0 rgb(47 143 70 / .18), 0 0 0 8px rgb(255 211 77 / .24);
  }
}



.newsletter-card__title {
  margin: .25rem 0 .5rem;
  font-family: var(--font-display);
  font-size: var(--text-h2) !important;
  line-height: 1.02;
  text-wrap: balance;
  font-weight: 800;
  color: var(--color-ink) !important;
}



.newsletter-form {
  display: grid;
  gap: var(--space-3);
}

.newsletter-form__hint {
  font-size: var(--text-sm) !important;
  color: var(--color-muted);
  margin: 0;
}

/* Form real MC4WP (id 16224) renderitzat al peu: Nom + Email + consentiment. */
.newsletter-form .mc4wp-form-fields {
  display: grid;
  gap: var(--space-3);
}

.newsletter-form .mc4wp-form-fields p {
  margin: 0;
}

.newsletter-form .mc4wp-form-fields p:first-child {
  font-size: var(--text-sm) !important;
  color: var(--color-muted);
}

.newsletter-form .mc4wp-form input[type="text"],
.newsletter-form .mc4wp-form input[type="email"] {
  width: 100%;
  min-height: 52px;
  border: 1px solid #bad7c3;
  border-radius: 999px;
  padding: 0 1rem;
  background: white;
  color: var(--color-ink);
}

.newsletter-form .mc4wp-form label {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-size: var(--text-sm) !important;
  line-height: 1.35;
}

.newsletter-form .mc4wp-form input[type="checkbox"] {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
}

.btn-cta,
.newsletter-form .mc4wp-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--color-red);
  color: white;
  font-family: inherit;
  font-size: var(--text-base) !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.newsletter-form .mc4wp-form input[type="submit"] {
  width: 100%;
}

.btn-cta:hover,
.btn-cta:focus-visible,
.newsletter-form .mc4wp-form input[type="submit"]:hover,
.newsletter-form .mc4wp-form input[type="submit"]:focus-visible {
  background: var(--color-green-dark);
}

.btn-cta:active,
.newsletter-form .mc4wp-form input[type="submit"]:active {
  transform: translateY(1px);
}

.btn-cta:disabled,
.btn-cta[aria-disabled="true"],
.newsletter-form .mc4wp-form input[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.purchase-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 500px;
  margin: 1rem 0;
}

.purchase-cta--featured a.btn-cta--purchase,
.mas-info__body a.btn-cta--purchase,
.article-body a.btn-cta--purchase {
  width: 100%;
  min-width: min(400px, 100%);
  min-height: 74px;
  padding: 1rem 2rem;
  color: white;
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 800;
  line-height: 1.1;
  word-break: normal;
  box-shadow: 0 10px 24px rgba(239, 82, 61, .25);
}

.purchase-cta--featured a.btn-cta--purchase:hover,
.purchase-cta--featured a.btn-cta--purchase:focus-visible,
.mas-info__body a.btn-cta--purchase:hover,
.mas-info__body a.btn-cta--purchase:focus-visible,
.article-body a.btn-cta--purchase:hover,
.article-body a.btn-cta--purchase:focus-visible {
  color: white;
}

.btn-cta--purchase .ph {
  font-size: 1.6em;
}

.purchase-cta--featured {
  max-width: 500px;
}

.purchase-cta--featured .btn-cta--purchase {
  max-width: 500px;
}

.article-split__aside .purchase-aside {
  display: grid;
  gap: .75rem;
  width: 100%;
}

.article-split__aside .purchase-aside .purchase-cta {
  margin: 0;
}

.article-split__aside .purchase-aside a.btn-cta--purchase {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 1rem 1.5rem;
  border: 2px solid transparent;
  color: white;
  font-size: var(--text-sm) !important;
  font-weight: 700;
  line-height: inherit;
  box-shadow: none;
}

.article-split__aside .purchase-aside a.btn-cta--purchase:hover,
.article-split__aside .purchase-aside a.btn-cta--purchase:focus-visible {
  color: white;
}


.newsletter-form .mc4wp-response {
  font-size: var(--text-sm);
}

.newsletter-form .mc4wp-response .mc4wp-alert,
.newsletter-form .mc4wp-response p {
  margin: var(--space-3) 0 0;
  padding: .65rem 1rem;
  border-radius: var(--radius-md, 12px);
}

.newsletter-form .mc4wp-response .mc4wp-success p {
  background: #e6f4ea;
  color: var(--color-green-dark);
}

.newsletter-form .mc4wp-response .mc4wp-error p {
  background: #fdecea;
  color: #b3261e;
}

@media (max-width: 719px) {
  .newsletter-card__visual {
    flex-basis: clamp(116px, 34vw, 180px);
    width: clamp(116px, 34vw, 180px);
  }

  .newsletter-card__copy {
    flex: 1 1 min(220px, calc(100% - 120px));
  }

  .newsletter-form {
    flex: 1 0 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* Newsletter card injectada automàticament al mig d'un article */
.article-body .newsletter-card {
  margin: var(--space-section) 0;
  border: 0;
  box-shadow: none;
}

.article-body .newsletter-card .newsletter-form {
  flex: 1 0 100%;
  max-width: none;
  margin-left: 0;
}

/* MC4WP dins del contingut de l'article (shortcode sense wrapper .newsletter-form).
   S'exclouen quan el formulari és dins d'una .newsletter-card. */
.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form),
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-panel);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}

.article-body .mc4wp-form-fields:not(.newsletter-card .mc4wp-form-fields),
.mas-info__body .mc4wp-form-fields:not(.newsletter-card .mc4wp-form-fields) {
  display: grid;
  gap: var(--space-3);
}

.article-body .mc4wp-form-fields:not(.newsletter-card .mc4wp-form-fields) p,
.mas-info__body .mc4wp-form-fields:not(.newsletter-card .mc4wp-form-fields) p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="text"],
.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="email"],
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="text"],
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="email"] {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0 1.1rem;
  background: white;
  color: var(--color-ink);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="text"]:focus,
.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="email"]:focus,
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="text"]:focus,
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="email"]:focus {
  outline: none;
  border-color: var(--color-green);
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) label,
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.4;
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="checkbox"],
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  accent-color: var(--color-green);
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="submit"],
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="submit"] {
  width: 100%;
  min-height: 52px;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--color-green);
  color: white;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.article-body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="submit"]:hover,
.mas-info__body .mc4wp-form:not(.newsletter-card .mc4wp-form) input[type="submit"]:hover {
  background: var(--color-green-dark);
}

.article-body :not(.newsletter-card) .mc4wp-response p,
.mas-info__body :not(.newsletter-card) .mc4wp-response p {
  margin: 0;
  padding: .65rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.article-body :not(.newsletter-card) .mc4wp-response .mc4wp-success p,
.mas-info__body :not(.newsletter-card) .mc4wp-response .mc4wp-success p {
  background: #e6f4ea;
  color: var(--color-green-dark);
}

.article-body :not(.newsletter-card) .mc4wp-response .mc4wp-error p,
.mas-info__body :not(.newsletter-card) .mc4wp-response .mc4wp-error p {
  background: #fdecea;
  color: #b3261e;
}

.footer-grid {
  display: grid;
  gap: var(--space-stack);
}

.footer-grid p {
  color: var(--color-muted);
}

.footer-grid nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-grid a {
  color: var(--color-green-dark);
  font-weight: 700;
}

.footer-content {
  display: grid;
  gap: var(--space-grid);
  grid-template-columns: 1fr;
  padding: var(--space-stack) 0;
  margin-bottom: var(--space-section);
}

.footer-about {
  max-width: 55ch;
}

.footer-about strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--color-green-dark);
}

.footer-about p {
  color: var(--color-muted);
  line-height: 1.65;
}

.footer-links ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--color-green-dark);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-green);
}

.footer-social {
  justify-self: end;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.social-links a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(47, 143, 70, 0.1);
  color: var(--color-green-dark);
  font-size: 1.5rem;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.social-links a:hover {
  background: var(--color-green);
  color: white;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.03);
  padding: var(--space-stack) 0;
  border-top: 1px solid var(--color-line);
}

.footer-bottom p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

@media (min-width: 720px) {
  .footer-content {
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: var(--space-grid);
  }

  .footer-links ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .footer-links ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 720px) {
  .topbar {
    display: block;
  }

  .breadcrumb {
    overflow: visible;
    padding-inline: 0;
  }

  .breadcrumb ol {
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    padding-inline: 1.25rem;
    font-size: var(--text-sm);
  }

  .breadcrumb li {
    flex: 0 1 auto;
    max-width: none;
  }

  .breadcrumb li[aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .event-search {
    grid-template-columns: 1.6fr .9fr auto;
    align-items: end;
    gap: clamp(1.25rem, 2.4vw, 2.2rem);
  }

  .quick-filters__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .quick-filters__query {
    grid-column: span 2;
  }

  .quick-filters__actions {
    grid-template-columns: auto;
  }

  .date-filter, .form-status {
    grid-column: 1 / -1;
  }

  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .field--wide {
    grid-column: span 2;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-carousel .swiper-slide {
    width: 320px;
  }

  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .newsletter-card {
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }

  .newsletter-form .mc4wp-form input[type="submit"] {
    width: auto;
    min-width: 200px;
  }
}

.tinymce_add_buttons_styles {
    border-radius: var(--radius-lg);
    padding: var(--space-5) !important;
    margin-top: var(--space-5);
}

/* =========================================================
   Dialogs de formulari (reserves / sol·licitud info)
   ========================================================= */

.samn-dialog {
  width: min(480px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgb(0 0 0 / .18);
  background: var(--color-surface);
}

.samn-dialog::backdrop {
  background: rgb(0 0 0 / .5);
  backdrop-filter: blur(2px);
}

.samn-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.samn-form h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
  padding-right: 2rem;
}

.samn-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.samn-dialog__close:hover {
  background: var(--color-line);
  color: var(--color-ink);
}

.samn-form__field {
  display: grid;
  gap: .4rem;
}

.samn-form__field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.samn-form__field input {
  width: 100%;
  min-height: 48px;
  padding: .65rem 1rem;
  border: 2px solid #adb5bd;
  border-radius: var(--radius-md);
  background: #ffffff;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.samn-form__field input:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgb(from var(--color-green) r g b / .15);
}

.samn-form [type="submit"] {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--color-red);
  color: white;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.samn-form [type="submit"]:hover {
  background: var(--color-red-dark, color-mix(in srgb, var(--color-red) 80%, black));
}

.samn-form [type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.samn-form__msg {
  margin: 0;
  padding: .65rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.samn-form__msg--success {
  background: #e6f4ea;
  color: var(--color-green-dark);
}

.samn-form__msg--error {
  background: #fdecea;
  color: #b3261e;
}

/* Skeleton de card completa — cobreix imatge i cos */
.content-card.is-loading::after,
.content-card.is-loading-out::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  pointer-events: none;
}

.content-card.is-loading::after {
  opacity: 1;
  animation: lazy-skeleton 1.4s ease-in-out infinite;
}

/* Manté el skeleton mínim 100ms i fa fade-out */
.content-card.is-loading-out::after {
  opacity: 0;
  animation: none;
  transition: opacity 250ms;
}

@keyframes lazy-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Flank hidden below 1380px */
@media (max-width: 1379px) {
  .samn-flank {
    display: none;
  }
}

aside.sidebar .samn-slot--box > div {
  margin-bottom: var(--space-7);
}

@media(max-width: 500px) {
  aside.sidebar .samn-slot--box > div {
    overflow: hidden;
  }
}
/* Desktop layout (≥ 1080px) */
@media (min-width: 1080px) {

  /* pùbli y aside */

  aside.sidebar {
    padding: var(--space-stack) 0;
  }

  aside.sidebar .samn-slot--box > div {
    /*min-height: 800px;*/
  }

  aside.sidebar .samn-slot--box > div > * {
    position: sticky;
    top: 80px;
  }

  /* Header & nav */
  .menu-toggle {
    display: none !important;
  }

  .header-main {
    min-width: 0;
  }

  .header-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 230px;
    min-width: 170px;
    max-width: 250px;
  }

  .header-search i {
    position: absolute;
    left: .78rem;
    color: var(--color-muted);
    pointer-events: none;
  }

  .header-search input {
    width: 100%;
    min-height: 40px;
    padding: 0 4.2rem 0 2.35rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-soft);
    color: var(--color-ink);
    font-size: .86rem;
  }

  .header-search button {
    position: absolute;
    right: .25rem;
    min-height: 32px;
    padding: 0 .72rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-green);
    color: white;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
  }

  .desktop-nav {
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
    overflow: visible;
  }

  .desktop-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .desktop-nav>ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .2rem;
    min-width: 0;
  }

  .desktop-nav li {
    position: relative;
  }

  .desktop-nav>ul>li {
    display: flex;
    align-items: stretch;
    min-width: 0;
    flex: 0 1 auto;
  }

  .desktop-nav>ul>li>a {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    height: var(--header-nav-pill-height);
    min-height: var(--header-nav-pill-height);
    width: max-content;
    max-width: 200px;
    min-width: 0;
    padding: .65rem 1rem;
    border-radius: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--header-nav-pill-font);
    white-space: nowrap;
  }

  .desktop-nav>ul>li>a span {
    display: grid;
    align-content: center;
    min-width: 0;
    max-width: 100%;
    min-height: 100%;
    overflow: hidden;
    line-height: 1.08;
  }

  .desktop-nav>ul>li>a span,
  .desktop-nav>ul>li>a small {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .desktop-nav>ul>li>a small {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: .05rem;
    overflow: hidden;
    color: currentColor;
    font-size: .72em;
    font-weight: 600;
    line-height: 1.05;
    opacity: .92;
  }

  .desktop-nav>ul>li>a i {
    flex: 0 0 auto;
  }

  .desktop-nav>ul>li>a:hover, .desktop-nav>ul>li>a:focus-visible {
    background: var(--color-soft);
    color: var(--color-green-dark);
  }

  .desktop-slide-panel {
    position: absolute;
    left: var(--panel-left, 0);
    top: calc(100% + .15rem);
    z-index: 40;
    width: var(--panel-width, min(100%, 280px));
    padding-top: .45rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-emphasized), visibility var(--duration-base) linear;
  }

  .desktop-slide-panel[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .desktop-slide-panel__inner {
    display: grid;
    gap: .65rem;
    width: 100%;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }

  .desktop-slide-panel__inner strong {
    display: block;
    padding-inline: .35rem;
    color: var(--color-green-dark);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
  }

  .desktop-slide-panel__inner ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .desktop-slide-panel__inner li {
    border-bottom: 0;
  }

  .desktop-slide-panel__inner a {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: auto;
    padding: .62rem .15rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-ink);
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.25;
  }

  .desktop-slide-panel__inner a:hover, .desktop-slide-panel__inner a:focus-visible {
    background: transparent;
    color: var(--color-green-dark);
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
  }

  /* Grids & layout */
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  }

  .hero__grid--centered {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-filters__grid {
    grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(0, 1fr)) auto;
  }

  .quick-filters__query {
    grid-column: auto;
  }

  .quick-filters__actions {
    grid-template-columns: auto;
    width: auto;
    max-width: 400px;
  }

  .page-grid,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--quick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-carousel .swiper-slide {
    width: calc((100% - 60px) / 3.5);
  }

  [data-slides="4.5"] .swiper-slide {
    width: calc((100% - 80px) / 4.5);
  }

  /* Sidebar */




  /* Page-specific overrides */
  body[data-page="detail"] .article-layout>.samn-flank {
    margin-top: 3.4rem;
  }

  body[data-page="home"] .page-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  body[data-page="home"] .home-side-extra {
    display: none;
  }

  body[data-page="home"] .card-grid--featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"] .card-grid--featured .content-card__image img {
    aspect-ratio: 16 / 11;
  }

  body[data-page="home"] .card-grid--featured .content-card__body {
    padding: var(--space-panel);
  }

  body[data-page="home"] .card-grid--featured .content-card h3 {
    font-size: clamp(1.25rem, 1rem + .55vw, 1.55rem);
  }
}

/* Wide desktop (≥ 1380px) */
@media (min-width: 1380px) {
  .page-grid,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 340px 180px;
  }

  .samn-flank {
    display: block;
  }

  body[data-page="category"] .page-grid,
  body[data-page="detail"] .article-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  body[data-page="category"] .samn-flank,
  body[data-page="detail"] .samn-flank {
    display: none;
  }

  body[data-page="home"] .page-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  body[data-page="home"] .samn-flank {
    display: none;
  }

  body[data-page="home"] .card-grid:not(.card-grid--featured) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="home"] .card-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

body[data-page="home"] .card-carousel .swiper-slide {
    width: calc((100% - 60px) / 3.5);
  }
}

/* SiteOrigin column layouts: classes are added from inc/siteorigin.php. */
.panel-layout > .panel-grid.panel-no-style,
.panel-layout > .panel-grid.panel-has-style > .panel-row-style {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid);
  align-items: stretch;
}

.panel-layout > .panel-grid.panel-no-style > .panel-grid-cell,
.panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

.panel-layout > .panel-grid.panel-no-style > .panel-grid-cell-empty,
.panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell-empty {
  min-height: 0;
}

.panel-layout > .panel-grid.panel-no-style > .panel-grid-cell > .so-panel,
.panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell > .so-panel {
  height: 100%;
}

.panel-layout > .samn-so-row--cells-2 .card-carousel .swiper-slide,
.panel-layout > .samn-so-row--cells-3 .card-carousel .swiper-slide {
  width: min(78vw, 300px);
}

.panel-layout > .samn-so-row--cells-2 .card-carousel .carousel-controls,
.panel-layout > .samn-so-row--cells-3 .card-carousel .carousel-controls {
  inset-inline: .15rem;
}

.panel-layout > .samn-so-row--cells-2 .card-carousel .carousel-button,
.panel-layout > .samn-so-row--cells-3 .card-carousel .carousel-button {
  width: 38px;
  height: 38px;
}

@media (min-width: 720px) and (max-width: 1079px) {
  .panel-layout > .samn-so-row--cells-2.panel-no-style,
  .panel-layout > .samn-so-row--cells-2.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-3.panel-no-style,
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-4.panel-no-style,
  .panel-layout > .samn-so-row--cells-4.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-5.panel-no-style,
  .panel-layout > .samn-so-row--cells-5.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-6.panel-no-style,
  .panel-layout > .samn-so-row--cells-6.panel-has-style > .panel-row-style {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-layout > .samn-so-row--cells-2 .card-carousel .swiper-slide,
  .panel-layout > .samn-so-row--cells-3 .card-carousel .swiper-slide,
  .panel-layout > .samn-so-row--cells-4 .card-carousel .swiper-slide,
  .panel-layout > .samn-so-row--cells-5 .card-carousel .swiper-slide,
  .panel-layout > .samn-so-row--cells-6 .card-carousel .swiper-slide {
    width: min(72vw, 310px);
  }

  .panel-layout > .samn-so-row--cells-2.panel-no-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-2.panel-has-style > .panel-row-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-3.panel-no-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-4.panel-no-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-4.panel-has-style > .panel-row-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-5.panel-no-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-5.panel-has-style > .panel-row-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-6.panel-no-style > .panel-grid-cell .card-grid,
  .panel-layout > .samn-so-row--cells-6.panel-has-style > .panel-row-style > .panel-grid-cell .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-layout > .panel-grid.panel-no-style > .panel-grid-cell-empty,
  .panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell-empty {
    display: none;
  }
}

@media (max-width: 719px) {
  .panel-layout > .samn-so-row--collapse-right-top.panel-no-style,
  .panel-layout > .samn-so-row--collapse-right-top.panel-has-style > .panel-row-style {
    display: flex !important;
    flex-direction: column-reverse;
  }

  .panel-layout > .panel-grid.panel-no-style > .panel-grid-cell-empty,
  .panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell-empty {
    display: none;
  }

  .panel-layout > .panel-grid.panel-no-style > .panel-grid-cell-mobile-last,
  .panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell-mobile-last {
    margin-bottom: 0 !important;
  }
}

@media (min-width: 1080px) {
  .panel-layout > .samn-so-row--cells-2.panel-no-style,
  .panel-layout > .samn-so-row--cells-2.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-3.panel-no-style,
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-4.panel-no-style,
  .panel-layout > .samn-so-row--cells-4.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-5.panel-no-style,
  .panel-layout > .samn-so-row--cells-5.panel-has-style > .panel-row-style,
  .panel-layout > .samn-so-row--cells-6.panel-no-style,
  .panel-layout > .samn-so-row--cells-6.panel-has-style > .panel-row-style {
    display: flex !important;
    flex-wrap: nowrap;
  }

  .panel-layout > .samn-so-row--cells-3.panel-no-style:has(> .samn-so-cell--dominant),
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style:has(> .samn-so-cell--dominant) {
    display: flex !important;
  }

  .panel-layout > .samn-so-row--cells-3.panel-no-style:has(> .samn-so-cell--dominant) > .samn-so-cell--dominant,
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style:has(> .samn-so-cell--dominant) > .samn-so-cell--dominant {
    flex: 0 1 calc(50% - var(--space-grid));
  }

  .panel-layout > .samn-so-row--cells-3.panel-no-style:has(> .samn-so-cell--dominant) > .panel-grid-cell:not(.samn-so-cell--dominant),
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style:has(> .samn-so-cell--dominant) > .panel-grid-cell:not(.samn-so-cell--dominant) {
    flex: 1 1 0;
  }

  .panel-layout > .samn-so-row--cells-2.panel-no-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-2.panel-has-style > .panel-row-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-3.panel-no-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-3.panel-has-style > .panel-row-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-4.panel-no-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-4.panel-has-style > .panel-row-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-5.panel-no-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-5.panel-has-style > .panel-row-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-6.panel-no-style > .panel-grid-cell,
  .panel-layout > .samn-so-row--cells-6.panel-has-style > .panel-row-style > .panel-grid-cell {
    flex: var(--samn-so-cell-grow, 1) 1 0;
  }
}

@media (min-width: 1080px) {
  .samn-card-grid--cols-1,
  .samn-cards-widget--cols-1 .card-grid,
  body[data-page="home"] .samn-card-grid--cols-1,
  body[data-page="home"] .samn-cards-widget--cols-1 .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .samn-card-grid--cols-2,
  .samn-cards-widget--cols-2 .card-grid,
  body[data-page="home"] .samn-card-grid--cols-2,
  body[data-page="home"] .samn-cards-widget--cols-2 .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .samn-card-grid--cols-3,
  .samn-cards-widget--cols-3 .card-grid,
  body[data-page="home"] .samn-card-grid--cols-3,
  body[data-page="home"] .samn-cards-widget--cols-3 .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .samn-card-grid--cols-4,
  .samn-cards-widget--cols-4 .card-grid,
  body[data-page="home"] .samn-card-grid--cols-4,
  body[data-page="home"] .samn-cards-widget--cols-4 .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.card-grid {
  padding-bottom: 8px;
  position: relative;
}
/* === Hero Search ============================================= */
.hero-search {
  position: relative;
  margin-top: var(--space-stack);
  text-align: left;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--color-surface);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
}

.hero-search::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border: 2px solid var(--color-green);
  border-radius: 1.45rem 1.2rem 1.55rem 1.3rem;
  transform: rotate(-.12deg);
  pointer-events: none;
}

.hero-search>* {
  position: relative;
  z-index: 1;
}

.hero-search__bar-wrap {
  position: relative;
  z-index: 2;
}

.hero-search__bar {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

/* Input field */
.hero-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.hero-search__field>.ph {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-green);
  font-size: 1.45rem;
  pointer-events: none;
  z-index: 1;
}

.hero-search__input {
  width: 100%;
  min-height: 62px;
  padding: 0 3.4rem 0 3.2rem;
  border: 2px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-md);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.hero-search__input::placeholder {
  color: #9aada4;
}

.hero-search__input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(47, 143, 70, 0.1);
  outline: none;
  background: white;
}

.hero-search__spinner {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}

.hero-search__spinner span {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-line);
  border-top-color: var(--color-green);
  border-radius: 999px;
  animation: filter-spin .7s linear infinite;
}

/* Search button */
.hero-search__btn {
  min-height: 62px;
  padding: 0 1.65rem;
  flex-shrink: 0;
}

/* ---- Separator ---- */
.hero-search__filters-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: default;
}

.hero-search__filters-label::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--color-line);
}

.hero-search__filters-caret {
  display: none;
}

/* Filters row */
.hero-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Container: only positioning context, no visual */
.hero-search__filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 9.5rem;
  min-width: 9.5rem;
}

/* Icon: absolutely positioned inside the pill */
.hero-search__filter-pill>.ph:not(.hero-search__caret) {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-green-dark);
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

/* Caret: absolutely positioned on the right */
.hero-search__caret {
  position: absolute;
  right: .62rem;
  top: 50%;
  transform: translateY(-50%);
  color: #7aaa84;
  font-size: .8rem;
  pointer-events: none;
  z-index: 1;
}

/* Border and focus live on the input/select — same pattern as .field input */
.hero-search__filter-pill select,
.hero-search__zone-input,
.hero-search__kw-input {
  width: 100%;
  min-height: 52px;
  padding: 0 1.75rem 0 2.2rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-green-dark);
  font-size: var(--text-base);
  font-weight: 400;
  cursor: pointer;
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.hero-search__zone-input {
  width: 155px;
  padding-right: .9rem;
}

.hero-search__filter-pill select:hover,
.hero-search__zone-input:hover,
.hero-search__kw-input:hover {
  border-color: var(--color-green);
  background: white;
}

.hero-search__filter-pill select:focus,
.hero-search__zone-input:focus,
.hero-search__kw-input:focus {
  border-color: var(--color-green);
  background: white;
  box-shadow: 0 0 0 3px rgba(47, 143, 70, .12);
  outline: none;
}

.hero-search__zone-input::placeholder,
.hero-search__kw-input::placeholder {
  color: #607a68;
  font-weight: 400;
  opacity: 1;
}

.hero-search__filter-pill select:has(option:checked[value=""]) {
  color: #607a68;
}

.hero-search__kw-input {
  width: 100%;
  padding-right: .9rem;
  cursor: text;
}

.hero-search__filter-pill--kw {
  flex: 2.5 1 26rem;
  min-width: min(100%, 20rem);
  overflow: visible;
}

.hero-autocomplete__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem var(--space-4) .5rem;
  border-bottom: 1px solid var(--color-line);
}

.hero-autocomplete__header span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-autocomplete__close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.hero-autocomplete__close:hover {
  background: var(--color-soft);
  color: var(--color-ink);
}

/* Autocomplete dropdown */
.hero-autocomplete {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 999;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: hero-ac-in var(--duration-base) var(--ease-emphasized);
}

@keyframes hero-ac-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-autocomplete__list {
  margin: 0;
  padding: .5rem;
  list-style: none;
  display: grid;
  gap: 2px;
  max-height: min(440px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Mini-card horizontal */
.hero-mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: .6rem .7rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.hero-mini-card:hover,
.hero-mini-card:focus-visible {
  background: var(--color-soft);
}

.hero-mini-card__image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.hero-mini-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mini-card__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.hero-mini-card .samn-badge {
  font-size: .68rem;
  padding: .18rem .48rem;
}

.hero-mini-card__title {
  display: block;
  font-family: var(--font-card-title);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-mini-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.hero-mini-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.hero-mini-card__meta .ph {
  color: var(--color-green);
}

/* Autocomplete footer */
.hero-autocomplete__footer {
  padding: .8rem var(--space-4);
  border-top: 1px solid var(--color-line);
  background: var(--color-soft);
}

.hero-autocomplete__see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--color-green-dark);
  font-weight: 800;
  font-size: var(--text-sm);
  text-decoration: none;
}

.hero-autocomplete__see-all:hover {
  text-decoration: underline;
}

.hero-autocomplete__count {
  color: var(--color-muted);
  font-weight: 700;
}

/* Empty state */
.hero-autocomplete__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

.hero-autocomplete__empty .ph {
  display: block;
  font-size: 2.2rem;
  margin-bottom: var(--space-2);
  opacity: .45;
}

.hero-autocomplete__empty p {
  margin: 0;
  font-weight: 700;
}

.hero-autocomplete__notice {
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.hero-autocomplete__notice p {
  font-weight: 400;
}

.hero-autocomplete__notice-title {
  font-weight: 700 !important;
}

/* Responsive */
@media (max-width: 719px) {
  .hero-search {
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
  }

  /* Bar primer, filtres col·lapsables a sota */
  .hero-search__bar-wrap {
    order: 1;
  }

  .hero-search__filters-label {
    order: 2;
    margin-top: var(--space-3);
    margin-bottom: 0;
    cursor: pointer;
  }

  .hero-search__filters-caret {
    display: inline-block;
    font-size: 1rem;
    transition: transform .2s ease;
    margin-left: auto;
  }

  .hero-search__filters-label::after {
    display: none;
  }

  .hero-search[data-filters-open] .hero-search__filters-caret {
    transform: rotate(180deg);
  }

  .hero-search__filters {
    order: 3;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
    margin-bottom: 0;
  }

  .hero-search[data-filters-open] .hero-search__filters {
    display: grid;
  }

  /* Input i botó apilats verticalment */
  .hero-search__bar {
    flex-direction: column;
    gap: var(--space-2);
  }

  .hero-search__input {
    min-height: 52px;
    font-size: var(--text-base);
    padding-left: 2.9rem;
  }

  .hero-search__field>.ph {
    font-size: 1.2rem;
    left: .95rem;
  }

  .hero-search__btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .hero-search__filter-pill--kw {
    grid-column: 1 / -1;
  }

  .hero-search__filter-pill {
    min-width: 0;
  }

  .hero-search__filter-pill select,
  .hero-search__zone-input {
    width: 100%;
    min-height: 52px;
  }

  .hero-search__kw-input {
    width: 100%;
    min-height: 52px;
  }

  /* Autocomplete full-width */
  .hero-autocomplete {
    left: 0;
    right: 0;
  }
}

@media (min-width: 720px) {
  .hero-search__zone-input {
    width: 220px;
  }
}

@media (min-width: 720px) and (max-width: 1079px) {
  .hero-search__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-search__filter-pill {
    min-width: 0;
  }

  .hero-search__filter-pill--kw {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .hero-search {
    padding: clamp(2rem, 4vw, 3rem);
  }

  .hero-search__bar {
    gap: var(--space-4);
  }

  .hero-search__input {
    min-height: 70px;
    font-size: var(--text-lg);
    padding-left: 3.4rem;
  }

  .hero-search__field>.ph {
    font-size: 1.6rem;
    left: 1.2rem;
  }

  .hero-search__btn {
    min-height: 70px;
    padding: 0 2.2rem;
    font-size: var(--text-md);
  }

  .hero-search__zone-input {
    width: 260px;
  }

  .hero-intro {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 3rem);
    padding: 0 clamp(1rem, 5vw, 5rem) 0;
  }

  .hero-intro__copy {
    flex: 0 1 880px;
    padding-top: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.75rem);
  }

  .hero-intro__mascot {
    display: block;
    flex: 0 0 auto;
    width: 300px;
    margin-bottom: -10px;
    z-index: 1;
  }

  .hero-search-scene {
    margin-top: 0;
  }
}

/* === Header Redesign ========================================= */
.site-header {
  position: relative;
}

.header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: .8rem;
}

.brand__logo--iso {
  width: clamp(46px, 10vw, 64px);
}

.mobile-menu__head .brand__logo--iso {
  width: 58px;
}

.header-search-wrap {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
}

.header-ad {
  width: 100%;
  max-width: 728px;
  border-radius: var(--radius-sm);
}

.hero-search--header {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
}

.hero-search--header::before {
  content: none;
}

.hero-search--header .hero-search__bar {
  gap: var(--space-2);
}

.hero-search--header .hero-search__input {
  min-height: 48px;
  padding-left: 2.8rem;
  border-width: 1.5px;
  font-size: var(--text-base);
  box-shadow: none;
}

.hero-search--header .hero-search__field>.ph {
  left: .95rem;
  font-size: 1.2rem;
}

.hero-search--header .hero-search__btn {
  min-height: 48px;
  padding-inline: 1rem;
  white-space: nowrap;
}

.hero-search--header .hero-search__filters-label {
  position: absolute;
  top: calc(100% + .85rem);
  left: 0;
  right: 0;
  z-index: 46;
  max-height: 0;
  margin: 0 .9rem;
  padding-top: .75rem;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), margin var(--duration-base) var(--ease-standard);
}

.hero-search--header .hero-search__filters {
  position: absolute;
  top: calc(100% + 3rem);
  left: 0;
  right: 0;
  z-index: 46;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 0;
  margin: 0 .9rem;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), margin var(--duration-base) var(--ease-standard), max-height var(--duration-base) var(--ease-emphasized);
}

.hero-search--header.is-typing .hero-search__filters-label {
  max-height: 28px;
  opacity: 1;
  pointer-events: auto;
}

.hero-search--header.is-typing .hero-search__filters {
  max-height: 190px;
  padding: 0 0 .8rem;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-search--header .hero-search__filter-pill {
  min-width: 0;
}

.hero-search--header .hero-search__filter-pill--kw {
  grid-column: 1 / -1;
}

.hero-search--header .hero-search__filter-pill select,
.hero-search--header .hero-search__zone-input {
  width: 100%;
  min-height: 40px;
}

.hero-search--header .hero-autocomplete {
  z-index: 45;
  top: calc(100% + .5rem);
  max-width: min(100%, 760px);
  border-radius: var(--radius-md);
}

.hero-search--header.is-typing .hero-autocomplete {
  top: calc(100% + .5rem);
}

.hero-search--header .hero-autocomplete__list {
  max-height: min(340px, 48vh);
}

.hero-search--header .hero-mini-card {
  gap: var(--space-2);
  padding: .48rem .55rem;
}

.hero-search--header .hero-mini-card__image {
  width: 54px;
  height: 54px;
}

.hero-search--header .hero-mini-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.hero-search--header .hero-mini-card__meta {
  font-size: .78rem;
}

.hero-search--header .hero-autocomplete__footer {
  padding-block: .65rem;
}

.featured-nav {
  display: none;
  overflow: visible;
}

.featured-nav__scroller {
  padding-block: .7rem;
}

.featured-nav__scroller .desktop-nav {
  display: none;
}

.header-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .55rem 1rem;
  border: 1px solid var(--color-green);
  border-radius: 999px;
  background: var(--color-green);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.header-menu-button:hover,
.header-menu-button:focus-visible {
  transform: translateY(-1px);
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.header-menu-button i {
  font-size: 1.25rem;
}

.header-menu-button--desktop {
  display: none;
}

@media (max-width: 559px) {
  .brand {
    justify-self: start;
  }

  .brand__logo {
    width: min(46vw, 172px);
  }

  .hero-search--header .hero-search__input {
    min-height: 44px;
    padding-left: 2.55rem;
    font-size: var(--text-sm);
  }

  .hero-search--header .hero-search__field>.ph {
    left: .85rem;
    font-size: 1.08rem;
  }

  .hero-search--header .hero-search__btn {
    min-height: 44px;
  }

  .header-menu-button {
    min-height: 40px;
    padding: .48rem .95rem;
    font-size: var(--text-sm);
  }
   .header-ad {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

@media (min-width: 560px) {
  .header-main {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .brand__logo {
    width: clamp(132px, 18vw, 190px);
  }
 
}

@media (min-width: 560px) and (max-width: 1079px) {
  .header-main {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .header-ad {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .header-search-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (min-width: 720px) and (max-width: 1079px) {
  .header-ad {
  }
}

@media (max-width: 719px) {
  .hero-search--header {
    display: block;
  }

  .hero-search--header .hero-search__bar {
    flex-direction: row;
  }

  .hero-search--header .hero-search__btn {
    width: 48px;
    padding: 0;
  }

  .hero-search--header .hero-search__btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero-search--header.is-typing .hero-autocomplete {
    top: calc(100% + .5rem);
  }
}

@media (min-width: 1080px) {
  .header-main {
    grid-template-columns: auto minmax(468px, 1fr) minmax(300px, .82fr);
    gap: var(--space-4);
    padding-block: 1rem;
  }

  .header-main .brand__logo {
    max-height: 90px;
    width: auto;
  }

  .header-menu-button--mobile {
    display: none;
  }

  .header-menu-button--desktop {
    display: inline-flex;
    height: var(--header-nav-pill-height);
    min-height: var(--header-nav-pill-height);
    padding-inline: 1.15rem;
  }

  .header-search-wrap {
    grid-column: 3;
  }

  .header-ad {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .hero-search--header .hero-search__input {
    min-height: 48px;
    font-size: var(--text-sm);
  }

  .hero-search--header .hero-search__btn {
    min-height: 48px;
    padding-inline: 1rem;
    font-size: var(--text-sm);
  }

  .hero-search--header .hero-search__filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-search--header .hero-search__filter-pill--kw {
    grid-column: 1 / -1;
  }

  .hero-search--header.is-typing .hero-autocomplete {
    top: calc(100% + .5rem);
  }

  .featured-nav__scroller {
    gap: var(--space-3);
    overflow: visible;
  }

  .featured-nav {
    display: block;
    border-top: 1px solid var(--color-line);
    background: var(--color-soft);
  }

  .featured-nav a {
    border-color: rgba(47, 143, 70, .28);
  }

  .desktop-nav {
    display: block;
    flex: 1;
  }

  .featured-nav__scroller .desktop-nav {
    display: block;
  }

  .desktop-nav>ul {
    justify-content: flex-start;
    gap: var(--space-2);
  }
}

@media (min-width: 1380px) {
  .header-main {
    grid-template-columns: auto minmax(728px, 1fr) minmax(340px, .72fr);
  }

  .header-ad {
    width: 728px;
    min-height: 90px;
    aspect-ratio: 728 / 90;
  }
}

/* Theme fix (sortir) — CAUSA RAIZ: un clearfix global de plugin (::before/::after con
   content:" "; display:table) se cuela como item de grid en los contenedores y empuja el
   primer hijo a la columna 2 (invertia content/sidebar y article/sidebar). En el mock
   estatico no existia ese clearfix. Lo neutralizamos en los contenedores grid. */
.container.page-grid::before, .container.page-grid::after,
.container.article-layout::before, .container.article-layout::after,
.container.header-main::before, .container.header-main::after,
.container.footer-content::before, .container.footer-content::after,
.page-grid::before, .page-grid::after,
.article-layout::before, .article-layout::after,
.content-flow::before, .content-flow::after,
.card-grid::before, .card-grid::after,
.hero-search__filters::before, .hero-search__filters::after,
.hero__grid::before, .hero__grid::after,
.header-main::before, .header-main::after,
.newsletter-card::before, .newsletter-card::after,
.footer-newsletter::before, .footer-newsletter::after,
.footer-content::before, .footer-content::after,
.footer-fun::before, .footer-fun::after {
  content: none !important;
  display: none !important;
}


/* Theme fix (sortir) — un CSS global de plugin (bootstrap/style.min) fuerza
   html{font-size:62.5%} (reset rem a 10px) y encogia TODA la maqueta al 0.625x.
   El mock asume root 16px. Restauramos el root en el front. */
html {
  font-size: 100% !important;
}

/* ── Mapa de comarques ─────────────────────────────────────────────────────
   SVG estatico (geometria ICGC) + coropleta por nº de actividades (--t 0..1),
   cableado por map.js. Sustituye al mapa inline-en-PHP del theme legacy. */
.samn-map-block {
  display: grid;
  gap: var(--space-4);
}

/* Dialog ancho para el mapa */
.samn-dialog--map {
  width: min(860px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--space-6);
  overflow-y: auto;
}

.comarca-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.samn-pob-filter--inline {
  flex: 1 1 220px;
}

.samn-pob-filter--inline .samn-pob-select {
  width: 100%;
  min-height: 52px;
  padding: 1rem 1.5rem;
}

.button--map-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.samn-map-block__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: 0;
}

.samn-map-block__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Selector de població */
.samn-pob-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.samn-pob-filter label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.samn-pob-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

.samn-pob-select:focus-visible {
  outline: none;
  border-color: var(--color-green);
}

.samn-map-wrap {
  position: relative;
  max-width: 100%;
}

.samn-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Cada comarca: relleno interpolado mint→verde segun --t (densidad de planes). */
.samn-comarca {
  --t: 0;
  fill: color-mix(in srgb, var(--color-green) calc(var(--t) * 100%), var(--color-soft));
  stroke: var(--color-bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill .18s ease, transform .18s ease, filter .18s ease;
  transform-box: fill-box;
  transform-origin: center;
  cursor: pointer;
}

.samn-comarca:focus {
  outline: none;
}

/* Comarca sin termino asociado: gris inerte, no interactiva. */
.samn-comarca.is-empty {
  fill: var(--color-line);
  cursor: default;
  pointer-events: none;
}

/* Hover / foco por teclado: realce + elevacion sutil. */
.samn-comarca.is-hover,
.samn-comarca:focus-visible {
  fill: var(--color-orange);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
  transform: scale(1.015);
}

.samn-comarca:focus-visible {
  stroke: var(--color-ink);
  stroke-width: 2;
}

/* Comarca actual (la de la URL / comarca padre de la poblacio). */
.samn-comarca.is-current {
  fill: var(--color-green-dark);
  stroke: var(--color-yellow);
  stroke-width: 2;
}

/* Tooltip flotante (lo posiciona map.js). */
.samn-map-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -130%);
  padding: var(--space-1) var(--space-3);
  background: var(--color-ink);
  color: #fff;
  font-size: var(--text-sm);
  white-space: nowrap;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.samn-map-tip[hidden] {
  display: none;
}

/* Fallback sin JS. */
.samn-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  gap: var(--space-4);
}

.samn-map-list a {
  color: var(--color-green-dark);
}

@media (max-width: 600px) {
  .samn-map-list {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .samn-comarca {
    transition: fill .18s ease;
  }

  .samn-comarca.is-hover,
  .samn-comarca:focus-visible {
    transform: none;
  }
}

/* =========================================================================
   Calendari d'activitats (page-calendari / page-calendario)
   Widget vanilla (assets/js/calendar.js) sobre [data-samn-calendar].
   Reusa .card-grid + .content-card para las activitats del día.
   ========================================================================= */
.samn-calendar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-5);
}

@media (min-width: 880px) {
  .samn-calendar {
    grid-template-columns: minmax(300px, 360px) 1fr;
  }
}

.samn-calendar__grid {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.samn-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.samn-calendar__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  text-align: center;
  flex: 1;
  text-transform: capitalize;
}

.samn-calendar__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-green-dark);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.samn-calendar__navbtn:hover {
  background: var(--color-soft);
  border-color: var(--color-green);
}

.samn-calendar__navbtn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.samn-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.samn-calendar__dayname {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
}

.samn-calendar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: var(--text-sm);
  color: var(--color-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
}

.samn-calendar__cell--empty {
  visibility: hidden;
}

.samn-calendar__cell.is-today {
  border-color: var(--color-green);
  font-weight: 700;
  color: var(--color-green-dark);
}

button.samn-calendar__cell.is-active {
  background: var(--color-soft);
  color: var(--color-green-dark);
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

button.samn-calendar__cell.is-active:hover {
  background: var(--color-green);
  color: #fff;
}

button.samn-calendar__cell.is-selected {
  background: var(--color-green);
  color: #fff;
  border-color: var(--color-green-dark);
}

.samn-calendar__events {
  min-width: 0;
}

.samn-calendar__hint,
.samn-calendar__empty,
.samn-calendar__loading,
.samn-calendar__error {
  color: var(--color-muted);
  font-size: var(--text-base);
  padding: var(--space-5) 0;
}

.samn-calendar__error {
  color: var(--color-red);
}


@media (min-width: 880px) {
  .samn-calendar__events .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}