/* Damos en el Blanco — components
   Reconstruïts a partir de l'especificació del Design System (_ds_bundle.js +
   *.d.ts + *.prompt.md). Prefix .deb-* per no xocar amb Elementor.
   Classes pensades per fer-les servir com a CSS classes dins d'Elementor. */

/* ============================ BUTTON ============================ */
.deb-btn {
  --_h: 44px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text); /* mai heretar del reset del tema (hello pintava #c36) */
  background: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  height: var(--_h);
  padding: 0 20px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  white-space: nowrap; user-select: none; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.deb-btn:active { transform: translateY(1px); }
.deb-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.deb-btn.is-disabled, .deb-btn:disabled { opacity: .4; pointer-events: none; }

/* sizes */
.deb-btn--sm { --_h: 34px; font-size: var(--text-sm); padding: 0 14px; }
.deb-btn--md { --_h: 44px; font-size: var(--text-base); padding: 0 20px; }
.deb-btn--lg { --_h: 54px; font-size: var(--text-md); padding: 0 28px; }

/* variants */
.deb-btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.deb-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.deb-btn--secondary { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
.deb-btn--secondary:hover { background: rgba(255,255,255,.06); border-color: var(--text-strong); }
.deb-btn--ghost { background: transparent; color: var(--text); border-color: transparent; }
.deb-btn--ghost:hover { background: var(--surface-hover); }

/* modifiers */
.deb-btn--mono { font-family: var(--font-mono); font-weight: var(--fw-regular); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.deb-btn--mono.deb-btn--sm { font-size: var(--text-2xs); }
.deb-btn--mono.deb-btn--md { font-size: var(--text-xs); }
.deb-btn--mono.deb-btn--lg { font-size: var(--text-sm); }
.deb-btn--pill { border-radius: var(--radius-pill); }
.deb-btn--block { width: 100%; }
.deb-btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease-nudge); }
.deb-btn:hover .deb-btn__arrow { transform: translateX(3px); }
.deb-btn:hover .deb-btn__arrow--up { transform: translate(3px,-3px); }

/* ============================ TAG ============================ */
.deb-tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-weight: var(--fw-regular);
  font-size: var(--text-2xs); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 7px 12px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap; color: var(--text-muted);
}
.deb-tag--sm { font-size: var(--text-3xs); padding: 5px 9px; }
.deb-tag--solid   { background: var(--surface-raised); border-color: transparent; color: var(--text); }
.deb-tag--accent  { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.deb-tag--success { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.deb-tag--danger  { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.deb-tag--warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.deb-tag--info    { color: var(--info);    border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.deb-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================ KICKER ============================ */
.deb-kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font-mono); font-weight: var(--fw-regular);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.deb-kicker__idx { color: var(--text-subtle); }
.deb-kicker__rule { width: 34px; height: 1px; background: var(--border-strong); }
.deb-kicker--strong { color: var(--text-strong); }

/* ============================ ARROWLINK ============================ */
.deb-alink {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono); color: var(--text-strong);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.deb-alink:hover { opacity: .62; }
.deb-alink--lg { font-size: var(--text-md); }
.deb-alink__label { position: relative; }
.deb-alink__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-standard);
}
.deb-alink--underline:hover .deb-alink__label::after { transform: scaleX(1); }
.deb-alink__arrow { display: inline-block; transition: transform var(--dur) var(--ease-nudge); }
.deb-alink:hover .deb-alink__arrow { transform: translate(3px,0); }
.deb-alink--up:hover .deb-alink__arrow { transform: translate(3px,-3px); }

/* ============================ CARD ============================ */
.deb-card {
  background: var(--surface); color: var(--text);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-surface);
  padding: var(--space-6);
}
.deb-card--raised  { background: var(--surface-raised); border-color: transparent; box-shadow: var(--shadow-md), var(--edge-top); }
.deb-card--outline { background: transparent; border-color: var(--border); }
.deb-card--inset   { background: var(--surface-inset); border-color: var(--border); }
.deb-card--interactive { cursor: pointer; transition: transform var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); }
.deb-card--interactive:hover { transform: translateY(-3px); border-color: var(--border-strong); }

/* ============================ PROJECTCARD ============================ */
.deb-pcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.deb-pcard__media { border-radius: var(--radius-surface); overflow: hidden; background: var(--surface-raised); aspect-ratio: 4/3; }
.deb-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.deb-pcard:hover .deb-pcard__media img { transform: scale(1.04); }
.deb-pcard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-subtle);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.03) 11px 12px); }
.deb-pcard__body { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.deb-pcard__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.deb-pcard__tagline { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55; color: var(--text-muted); }
.deb-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.deb-pcard__foot { margin-top: var(--space-1); }

/* ============================ SECTIONHEADING ============================ */
.deb-sh { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--content-max); }
.deb-sh__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--display-3); line-height: 1.02; letter-spacing: var(--tracking-tighter); color: var(--text-strong); text-wrap: balance; }
.deb-sh__intro { font-family: var(--font-mono); font-size: var(--text-md); line-height: 1.6; color: var(--text-muted); max-width: var(--measure); }
.deb-sh__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.deb-sh--center { align-items: center; text-align: center; }

/* ============================ FORM: INPUT / TEXTAREA ============================ */
.deb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.deb-field__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.deb-input {
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-base);
  color: var(--text-strong); background: var(--surface-inset);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-control);
  padding: 0 14px; height: 48px; width: 100%; outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.deb-input::placeholder { color: var(--text-subtle); }
.deb-input:hover { border-color: var(--border-strong); }
.deb-input:focus { border-color: var(--text-strong); box-shadow: var(--ring-focus); }
.deb-input:disabled { opacity: .45; cursor: not-allowed; }
.deb-input--line { background: transparent; border: 0; border-bottom: var(--border-width) solid var(--border); border-radius: 0; padding-left: 0; padding-right: 0; }
.deb-input--line:focus { box-shadow: none; border-bottom-color: var(--text-strong); }
.deb-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: var(--leading-normal); resize: vertical; }
.deb-field--error .deb-input { border-color: var(--danger); }
.deb-field--error .deb-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); }
.deb-field__hint { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.deb-field--error .deb-field__hint { color: var(--danger); }

/* ============================ LANGSWITCHER ============================ */
.deb-lang { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-inset); border: var(--border-width) solid var(--border); border-radius: var(--radius-pill); }
.deb-lang__btn { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 13px; border: 0; background: transparent; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); text-decoration: none; }
.deb-lang__btn:hover { color: var(--text-strong); }
.deb-lang__btn[aria-pressed="true"], .deb-lang__btn.is-active { background: var(--accent); color: var(--accent-ink); }
.deb-lang__btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ============================ MARQUEE ============================ */
.deb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.deb-marquee__track { display: inline-flex; align-items: center; gap: var(--space-16); white-space: nowrap; will-change: transform; animation: deb-marq var(--_dur, 28s) linear infinite; }
.deb-marquee--reverse .deb-marquee__track { animation-direction: reverse; }
.deb-marquee:hover .deb-marquee__track { animation-play-state: paused; }
@keyframes deb-marq { to { transform: translateX(calc(-50% - var(--space-16) / 2)); } }

@media (prefers-reduced-motion: reduce) {
  .deb-marquee__track { animation: none; }
  .deb-btn__arrow, .deb-alink__arrow { transition: none; }
}

/* ============================ PROSE (legal / blog) ============================ */
.deb-prose{max-width:var(--measure);margin:0 auto;padding:var(--section-y) var(--page-margin)}
.deb-prose h1{font-family:var(--font-display);font-size:var(--display-3);line-height:1.02;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:0 0 var(--space-8)}
.deb-prose h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-strong);margin:var(--space-10) 0 var(--space-4)}
.deb-prose h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-strong);margin:var(--space-6) 0 var(--space-3)}
.deb-prose p,.deb-prose li{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.7;color:var(--text)}
.deb-prose ul,.deb-prose ol{padding-left:1.2em;margin:0 0 1em}
.deb-prose li{margin-bottom:.4em}
.deb-prose a{color:var(--text-strong);text-underline-offset:.18em}
.deb-prose strong{color:var(--text-strong)}