/* tema predeterminat-vercel */
:root{--color-primary:#965596;--color-primary-strong:#784478;--color-action:#995c99;--color-accent:#f3b523;--color-on-primary:#ffffff;--color-ink:#000000;--color-paper:#ffffff;--color-text-strong:#333333;--color-text-muted:#666666;--color-line:#eeeeee;--color-line-strong:#dddddd;--color-surface-dim:#e8e6e6;--color-danger:#ff6b81;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--font-heading:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--radius:0}
/* Predeterminat-Vercel: el disseny base de Moes + les Web Interface Guidelines de Vercel.
   Els punts del carrusel, el contorn d'error, els marges segurs i el fallback sense JS ja són a la plantilla comuna. Els colors surten dels tokens. */

/* ---------- Interacció tàctil ---------- */
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--color-ink) 12%, transparent); }
a, button, summary, input, textarea, select { touch-action: manipulation; }

/* ---------- Tipografia i contingut ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; overflow-wrap: break-word; }
.about-split.is-light p, .two-col .prose p { text-align: left; hyphens: auto; }
.legal table { font-variant-numeric: tabular-nums; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 6.25rem); line-height: 1.1; }
.hero h1 .accent { line-height: 1.4; }
.form .req, .gdpr { font-size: 0.875rem; line-height: 1.4286; }
.gdpr p { margin-bottom: 0.5rem; }

/* ---------- Formulari ---------- */
/* 16 px com a mínim: a iOS un camp més petit fa ampliar la pàgina en enfocar-lo */
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form textarea { font-size: max(16px, 1em); }
.form .check input { width: 1.25rem; height: 1.25rem; }
.form .check { gap: 0.75rem; }
.form .field-error { margin: 0.25rem 0 0.5rem; font-weight: 600; font-size: 0.875rem; line-height: 1.4286; }
.btn:active { filter: brightness(.92); }
.btn[disabled] { opacity: .65; cursor: progress; filter: none; }

/* ---------- Objectius tàctils (WCAG 2.5.8: mínim 24 px; 44 px amb dit) ---------- */
.topbar-info a, .lang a, .footer-legal a { display: inline-flex; align-items: center; min-height: 24px; }
.topbar-ig { width: 44px; height: 44px; }
@media (pointer: coarse) {
  .topbar-info a, .lang a, .footer-legal a { min-height: 44px; padding-inline: 0.25rem; }
}

/* ---------- Moviment: només transform/opacity, sense capes permanents, amb pausa ---------- */
.skip { transition: none; }
.carousel.is-js .carousel-rail { will-change: auto; }
.carousel.is-js .carousel-rail.anim { will-change: transform; }
.ticker { position: relative; }
.ticker:focus-within .ticker-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker-track { animation-play-state: paused; } }
.motion-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); cursor: pointer; z-index: 3; }
.motion-toggle .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.motion-toggle[aria-pressed="false"] .i-play, .motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.ticker .motion-toggle { position: absolute; right: var(--pad); top: 50%; translate: 0 -50%; }
.carousel .motion-toggle { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; }
@media (pointer: coarse) { .carousel .motion-toggle { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }