* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #E7E7E7;
  color: var(--color-ink);
  font-family: var(--font-sans);
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
svg { width: 1.2em; height: 1.2em; fill: currentColor; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ds-skip-link {
  position: fixed;
  z-index: 1000;
  top: -60px;
  left: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--app-accent,var(--ccoo-red));
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.ds-skip-link:focus { top: 12px; }

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ds-button:hover { transform: translateY(-1px); }
.ds-button:active { transform: translateY(0); }
.ds-button--primary { border-color: var(--app-accent,var(--ccoo-red)); background: var(--app-accent,var(--ccoo-red)); color: #fff; }
.ds-button--primary:hover { box-shadow: 0 6px 16px rgba(var(--app-accent-rgb), .24); }
.ds-button--secondary { border-color: var(--color-border-strong); background: #fff; color: var(--color-ink); }
.ds-button--secondary:hover { border-color: var(--app-accent,var(--ccoo-red)); color: var(--app-accent,var(--ccoo-red)); }
.ds-button--quiet { border-color: transparent; background: transparent; color: var(--color-ink); }
.ds-button--small { min-height: var(--touch-target-min,44px); padding: 7px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.ds-button--wide { width: 100%; }
.ds-button:disabled { opacity: .46; cursor: not-allowed; transform: none; }

.ds-icon-button {
  display: inline-grid;
  place-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
}
.ds-icon-button:hover { border-color: var(--app-accent,var(--ccoo-red)); color: var(--app-accent,var(--ccoo-red)); }
.ds-icon-button--ring { outline: 4px solid var(--app-accent,var(--ccoo-red)); outline-offset: 3px; }

.ds-language {
  display: inline-flex;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
}
.ds-language button {
  min-width: 60px;
  border: 0;
  background: #fff;
  color: var(--color-ink);
  font-weight: 800;
  cursor: pointer;
}
.ds-language button[aria-pressed="true"] { background: var(--app-accent,var(--ccoo-red)); color: #fff; }

.ds-card {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.ds-card h2, .ds-card h3 { margin-top: 0; }
.ds-card--flat { box-shadow: none; }
.ds-card--accent { border-top: 5px solid var(--app-accent,var(--ccoo-red)); }

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
}
.ds-badge::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-accent,var(--ccoo-red));
  content: "";
}
.ds-badge--muted::before { background: #777; }
.ds-badge--error { border-color: var(--app-accent,var(--ccoo-red)); background: rgba(var(--ccoo-red-rgb), .06); }

.ds-field { display: grid; gap: 8px; min-width: 0; }
.ds-field > span, .ds-field > label { font-weight: 800; }
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-ink);
}
.ds-textarea { min-height: 132px; resize: vertical; }
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus { border-color: var(--app-accent,var(--ccoo-red)); box-shadow: var(--focus-ring); outline: 0; }
.ds-field__hint { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }
.ds-field__error { color: var(--status-error,#E32118); font-size: var(--text-sm); font-weight: 700; }

.ds-check,
.ds-radio,
.ds-switch {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.ds-check input,
.ds-radio input { width: 22px; height: 22px; accent-color: var(--app-accent,var(--ccoo-red)); }
.ds-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ds-switch__track {
  position: relative;
  width: 50px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: #D7D7D7;
}
.ds-switch__track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  content: "";
  transition: transform .18s ease;
}
.ds-switch input:checked + .ds-switch__track { border-color: var(--app-accent,var(--ccoo-red)); background: var(--app-accent,var(--ccoo-red)); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(22px); }

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ds-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.ds-table th,
.ds-table td { padding: 15px 16px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.ds-table th { background: #F1F1F1; font-weight: 800; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table code { font-family: var(--font-mono); overflow-wrap: anywhere; }

.ds-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border-left: 6px solid var(--app-accent,var(--ccoo-red));
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.ds-notice strong { display: block; margin-bottom: 4px; }
.ds-notice p { margin: 0; color: var(--color-ink-soft); line-height: 1.5; }

.ds-accordion { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ds-accordion + .ds-accordion { margin-top: 12px; }
.ds-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 14px 18px;
  border: 0;
  background: #F2F2F2;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}
.ds-accordion__icon { transition: transform .18s ease; }
.ds-accordion.is-open .ds-accordion__icon { transform: rotate(180deg); }
.ds-accordion__panel { padding: 20px; border-top: 1px solid var(--color-border); }

.ds-modal {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--color-overlay);
}
.ds-modal__dialog {
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-modal);
}
.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 104px;
  padding: 18px 26px;
  border-bottom: 5px solid var(--app-accent,var(--ccoo-red));
  background: #F1F1F1;
}
.ds-modal__header h2 { margin: 0; font-size: var(--text-2xl); }
.ds-modal__body { overflow: auto; padding: 26px; }
.ds-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 26px;
  border-top: 1px solid var(--color-border);
  background: #fff;
}

.ds-wizard-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.ds-wizard-tab {
  flex: 0 0 auto;
  min-width: 118px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.ds-wizard-tab.is-active { border-color: var(--app-accent,var(--ccoo-red)); background: var(--app-accent,var(--ccoo-red)); color: #fff; }

.ds-toast {
  position: fixed;
  z-index: 700;
  right: 22px;
  bottom: 22px;
  max-width: min(380px, calc(100vw - 44px));
  padding: 14px 18px;
  border-left: 6px solid var(--app-accent,var(--ccoo-red));
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: #111111;
  border-top: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ds-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .ds-modal { padding: 0; }
  .ds-modal__dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .ds-modal__header { min-height: 88px; padding: 14px 16px; }
  .ds-modal__body { padding: 18px 16px; }
  .ds-modal__footer { padding: 14px 16px; }
  .ds-modal__footer .ds-button { flex: 1; }
}

/* =========================================================
   V1.5.0 · COMPTADORS INDEPENDENTS
   ========================================================= */
.ds-counter {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 230px;
  overflow: hidden;
  border-top: 5px solid var(--app-accent,var(--ccoo-red));
}
.ds-counter__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ds-counter__value {
  display: block;
  margin: auto 0 var(--space-3);
  color: var(--color-ink);
  font-size: clamp(2.55rem, 7vw, 4.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .95;
  white-space: nowrap;
}
.ds-counter__value[data-counter-prefix] { font-size: clamp(2.35rem, 3.55vw, 3.2rem); }
.ds-counter__label {
  margin: 0;
  color: var(--color-ink-soft);
  font-weight: 800;
  line-height: 1.35;
}
.ds-counter__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.ds-counter__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.ds-counter__controls .ds-field { gap: 5px; }
.ds-counter__controls .ds-field > span { font-size: var(--text-xs); }
.ds-counter__controls .ds-input { min-height: 42px; padding: 8px 10px; }
.ds-counter__actions {
  display: flex;
  gap: 9px;
  grid-column: 1 / -1;
}
.ds-counter__actions .ds-button { flex: 1; }
.ds-counter[data-counter-status="disabled"] { opacity: .62; }

/* =========================================================
   V1.5.0 · BASE D'EFECTES VISUALS
   ========================================================= */
.ds-effect {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  overflow: hidden;
  transition: opacity var(--motion-normal) ease, transform var(--motion-normal) ease;
}
.ds-effect__content { position: relative; z-index: 2; }
.ds-effect__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}
.ds-effect__status::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
  content: "";
}
.ds-effect.is-effect-active .ds-effect__status::before { background: var(--app-accent,var(--ccoo-red)); }
.ds-effect.is-effect-disabled { transform: none; }
.ds-effect.is-effect-disabled::before,
.ds-effect.is-effect-disabled::after { animation: none !important; opacity: 0 !important; }

.ds-effect[data-effect="pulse"]::before {
  position: absolute;
  z-index: 1;
  inset: 12px;
  border: 3px solid var(--app-accent,var(--ccoo-red));
  border-radius: calc(var(--radius-lg) - 3px);
  opacity: 0;
  content: "";
  pointer-events: none;
}
.ds-effect[data-effect="pulse"].is-effect-active::before { animation: ccoo-effect-pulse 2.2s ease-out infinite; }

.ds-effect[data-effect="reveal"] .ds-effect__content { transform: translateY(0); opacity: 1; }
.ds-effect[data-effect="reveal"].is-effect-active .ds-effect__content { animation: ccoo-effect-reveal 1.7s ease-in-out infinite alternate; }

.ds-effect[data-effect="bars"]::before,
.ds-effect[data-effect="bars"]::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--app-accent,var(--ccoo-red));
  opacity: 0;
  content: "";
  pointer-events: none;
}
.ds-effect[data-effect="bars"]::before { left: 14%; }
.ds-effect[data-effect="bars"]::after { right: 14%; }
.ds-effect[data-effect="bars"].is-effect-active::before { animation: ccoo-effect-bars-left 2s ease-in-out infinite; }
.ds-effect[data-effect="bars"].is-effect-active::after { animation: ccoo-effect-bars-right 2s ease-in-out infinite; }

@keyframes ccoo-effect-pulse {
  0% { inset: 12px; opacity: .7; }
  70%, 100% { inset: 2px; opacity: 0; }
}
@keyframes ccoo-effect-reveal {
  0% { transform: translateY(7px); opacity: .58; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes ccoo-effect-bars-left {
  0%, 100% { transform: translateX(-16px); opacity: 0; }
  45%, 55% { transform: translateX(0); opacity: .7; }
}
@keyframes ccoo-effect-bars-right {
  0%, 100% { transform: translateX(16px); opacity: 0; }
  45%, 55% { transform: translateX(0); opacity: .7; }
}

@media (max-width: 640px) {
  .ds-counter { min-height: 210px; }
  .ds-counter__controls { grid-template-columns: 1fr; }
  .ds-counter__controls .ds-field,
  .ds-counter__actions { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-effect,
  .ds-effect::before,
  .ds-effect::after,
  .ds-effect__content { animation: none !important; transform: none !important; opacity: 1 !important; }
}


/* v1.5.1 · Estats semàntics */
.ds-badge--success{background:var(--status-success-bg);color:var(--status-success);border-color:currentColor}
.ds-badge--info{background:var(--status-info-bg);color:var(--status-info);border-color:currentColor}
.ds-badge--warning{background:var(--status-warning-bg);color:var(--status-warning);border-color:currentColor}
.ds-badge--error{background:var(--status-error-bg);color:var(--status-error);border-color:currentColor}
.ds-badge--neutral,.ds-badge--muted{background:var(--status-neutral-bg);color:var(--status-neutral);border-color:var(--color-border)}
.ds-notice--success{border-left:5px solid var(--status-success);background:var(--status-success-bg)}
.ds-notice--info{border-left:5px solid var(--status-info);background:var(--status-info-bg)}
.ds-notice--warning{border-left:5px solid var(--status-warning);background:var(--status-warning-bg)}
.ds-notice--error{border-left:5px solid var(--status-error);background:var(--status-error-bg)}

/* v1.5.1 · Carrusel responsive */
.ds-carousel{position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.ds-carousel__viewport{overflow:hidden}
.ds-carousel__track{display:flex;transition:transform var(--motion-slow) ease;touch-action:pan-y}
.ds-carousel__slide{min-width:100%;padding:clamp(1rem,3vw,2rem);box-sizing:border-box}
.ds-carousel__slide .ds-card{height:100%;margin:0}
.ds-carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-top:1px solid var(--color-border);background:var(--color-surface-soft)}
.ds-carousel__dots{display:flex;justify-content:center;gap:.45rem;flex:1}
.ds-carousel__dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--color-ink);background:transparent;padding:0}
.ds-carousel__dot[aria-current=true]{background:var(--app-accent,var(--ccoo-red));border-color:var(--app-accent,var(--ccoo-red))}
.ds-carousel__settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media(max-width:900px){.ds-carousel__settings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ds-carousel__settings{grid-template-columns:1fr}.ds-carousel__controls{gap:.5rem}.ds-carousel__slide{padding:1rem}}
@media(prefers-reduced-motion:reduce){.ds-carousel__track{transition:none}}

/* v1.6.0 · Mode immersiu i Liquid Glass */
.visual-effects-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px}.visual-config-card .choice-grid{gap:14px}.liquid-preview{position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:center}.liquid-preview::before,[data-glass-surface]::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:rgba(255,255,255,.78);pointer-events:none}.liquid-preview>*{position:relative}.immersive-layer{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:24px}.immersive-layer[hidden]{display:none}.immersive-backdrop{position:absolute;inset:0;border:0;background:rgba(15,18,22,.48);cursor:default}.immersive-layer.has-blur .immersive-backdrop{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.immersive-panel{position:relative;width:min(720px,100%);max-height:min(760px,calc(100dvh - 48px));overflow:auto;background:#fff;border:1px solid var(--color-border);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.22);outline:none;animation:immersive-enter .24s ease-out}.immersive-panel__header,.immersive-panel__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px}.immersive-panel__header{border-bottom:3px solid #E32118}.immersive-panel__body{padding:24px 22px}.immersive-panel__footer{border-top:1px solid var(--color-border);justify-content:flex-end}.immersive-handle{display:none}.liquid-glass [data-glass-surface],.liquid-glass .guide-header,.liquid-glass .immersive-panel{background:rgba(255,255,255,.76);border-color:rgba(255,255,255,.68);box-shadow:0 18px 50px rgba(20,25,32,.14),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}.liquid-glass .ds-button--secondary{background:rgba(255,255,255,.68)}.liquid-glass .immersive-panel::after,.liquid-glass .liquid-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%);opacity:.72}.liquid-glass .immersive-panel>*{position:relative;z-index:1}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.liquid-glass [data-glass-surface],.liquid-glass .guide-header,.liquid-glass .immersive-panel{background:#fff;border-color:var(--color-border)}}@keyframes immersive-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:980px){.visual-effects-layout{grid-template-columns:1fr}.immersive-layer{align-items:center}.immersive-panel{width:min(620px,calc(100% - 16px))}}@media(max-width:640px){.immersive-layer{align-items:end;padding:0}.immersive-panel{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;animation:sheet-enter .26s ease-out}.immersive-handle{display:block;width:44px;height:5px;border-radius:999px;background:#b6bac0;margin:10px auto 0}.immersive-panel__header{padding-top:12px}.immersive-panel__footer{position:sticky;bottom:0;background:inherit}}@keyframes sheet-enter{from{transform:translateY(100%)}to{transform:none}}@media(prefers-reduced-motion:reduce){.immersive-panel{animation:none!important;scroll-behavior:auto!important}}