/*
  Design System — Anthropic (v2.2)
  Slate-on-ivory editorial system. Ivory canvas, slate-dark CTA no modo claro,
  clay como acento de marca, Serif no corpo/display, Sans na UI/headings.

  Este arquivo é o SISTEMA DE DESIGN reutilizável do projeto: tokens (custom
  properties) + classes utilitárias de tipografia + recipes de componente.
  Páginas consomem estas classes; não redefinem cor/tipografia localmente.
*/

/* ==========================================================================
   1. TOKENS — modo claro (padrão)
   ========================================================================== */
:root {
  color-scheme: light;

  /* Slots semânticos */
  --color-primary: #141413;
  --color-primary-foreground: #faf9f5;
  --color-secondary: #f0eee6;
  --color-secondary-foreground: #141413;
  --color-tertiary: #788c5d;
  --color-neutral: #5e5d59;
  --color-background: #faf9f5;
  --color-foreground: #141413;
  --color-surface: #faf9f5;
  --color-surface-foreground: #141413;
  --color-card: #ffffff;
  --color-card-foreground: #141413;
  --color-popover: #ffffff;
  --color-popover-foreground: #141413;
  --color-muted: #f0eee6;
  --color-muted-foreground: #5e5d59;
  --color-accent: #d97757;
  --color-accent-foreground: #faf9f5;
  --color-destructive: #b43232;
  --color-destructive-foreground: #ffffff;
  --color-border: #1414131a;
  --color-input: #e8e6dc;
  --color-ring: #d97757;
  --color-primary-hover: #3d3d3a;
  --color-success: #2f7613;
  --color-warning: #865a07;
  --color-info: #6a9bcc;

  --chart-1: #d97757;
  --chart-2: #788c5d;
  --chart-3: #6a9bcc;
  --chart-4: #d4a27f;
  --chart-5: #c46686;

  /* Ladder de superfícies (M3-like) */
  --surface-container-low: #faf9f5;
  --surface-container: #f0eee6;
  --surface-container-high: #e8e6dc;
  --surface-container-highest: #d1cfc5;
  --surface-bright: #d97757;
  --surface-dim: #b0aea5;
  --surface-inverse: #141413;
  --surface-inverse-foreground: #faf9f5;

  /* Aliases semânticos */
  --color-primary-deep: #c6613f;
  --color-primary-soft: #f2d9ce;
  --color-paper: #f0eee6;
  --color-paper-deep: #e8e6dc;
  --color-ink: #141413;
  --color-ink-soft: #3d3d3a;
  --color-ink-muted: #5e5d59;

  /* Swatches de marca (não variam por tema — são a paleta crua) */
  --swatch-clay: #d97757;
  --swatch-clay-deep: #c6613f;
  --swatch-ivory-light: #faf9f5;
  --swatch-ivory-medium: #f0eee6;
  --swatch-ivory-dark: #e8e6dc;
  --swatch-slate-dark: #141413;
  --swatch-slate-medium: #3d3d3a;
  --swatch-slate-light: #5e5d59;
  --swatch-cloud-dark: #87867f;
  --swatch-cloud-medium: #b0aea5;
  --swatch-cloud-light: #d1cfc5;
  --swatch-olive: #788c5d;
  --swatch-sky: #6a9bcc;
  --swatch-kraft: #d4a27f;
  --swatch-manilla: #ebdbbc;
  --swatch-oat: #e3dacc;
  --swatch-cactus: #bcd1ca;
  --swatch-heather: #cbcadb;
  --swatch-fig: #c46686;
  --swatch-coral: #ebcece;
  --swatch-white: #ffffff;

  /* Clay vívido — variante intensificada do acento de marca, reservada para o
     hero de impacto e para o fechamento (inverse-section). Não substitui o
     --swatch-clay padrão usado no resto do site. */
  --clay-vivid: #ff5a1f;
  --clay-vivid-bright: #ffb35c;

  /* Linha do quadriculado de fundo (grid sutil sobre as áreas claras) */
  --pattern-line: rgba(20, 20, 19, 0.055);
  --claude-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAANlBMVEVMaXH///////////////////////////////////////////////////////////////////+kpd7DAAAAEXRSTlMALq4GmkAd6hD3v1CF3nTQYjGMB4IAAAAJcEhZcwAACxMAAAsTAQCanBgAACAASURBVHja7V3ZgqO6DjRgFpvF8P8/e3u5Pad7JumALVmyKb3PdBKElqqSZExZ1s3WjaFd9n4yMFh+7zv+2KcfDh1+F1gOm/b2m/f9Z271dpsbBEQYp83+ofd9s9HbpcEPBWOx5pX7/d8Je/xUMI7iLxznzO34sWD0Zo/TtuDXgpEXgMcFs2iLYbQ2uCsOeHg0xDCRAvDLwqD+ldrwklRZAH41w8rhmN0dzg54shUWgF/N8Kw5/PnPzwgXLKMAHI8Y29QWFNufitZZAOf6C0B/xJlSQLD5WdC2cEHltkT637EqD39/enaQN5qtP6JtVh/+vlxwxnOurAD8fK7qwt/yDM8McEGl5o8Ea0oIf3rDNcyYLcX/Dqsr/P2OXAKSKVeD9RQMVPRQ+1dsTovHrc6m9UizrZDwpxk2urO1if53jEp0Mf2ZN8kBEayqAFQUVU5CmR4yspoKwE94Q0Ul4SClvWMB+GF9SZHcgRMxJWuwtPaW59+kFSJBNbYfNDYUpSazePAVFYBK6ipfOH9tIMJPAqOls9pwDTgCIVJRAagCjF4KV1AYaLDSTFgW2I116GjRgRQqC7z8VUCImDLHkJQmtevFbAAhUlUKlpUFNkU27gBhSB3QFtZNgRCpzAEFZYGTK15Ie0ubSB1QMKdtdY0038dGUgeUkwWuxSoobm6BNgTuZTVTYENM0cNwemSBcZJuh+dvKqLiBJPa4MpV0Rqo8SmtLWmrCObjTGVItBAY3a2lKshgE7UD2oIIRcgRqsNhZGSBvuA5FoORYGLbyqFzMBhSYRciIAuMXWw44unX2IXklwX6WrbK3dI6R+2AvgwaDlIEUyUXIoDEuNI3Khmshi4ZiZkq2iyMIrBAWWBTyV5XIIGFygJjYWiHkZBKkcBjnEqY7IMUwVQ4milQ3i8HpAhF20DvgGtXgKIMUgQtth5Fg9EtpAgGolTB+ipAimCwHkHw6Y6QIhiwcXIVfgcpggEbJzhwNkCKYCDJEuTjekgRDBZ0CCqjZ0gRDNg4wQe8QYpgwMYJrulYDmxFMGDj5IDeFlKE8m1gAGJygdEeUgQDVaogGL1CimBwLkQQaRshRTDQRctJjjtIEQwUCYJY7wA9fh02MWCBOYZDmiKkCEP/3IAH8UExi9raIa8UoR9xrkREkpBhOGQvQIqwOfRDQmDgppWJyyhFmFrcDBMDA1etHzqfFKEJuBkmCAbOSrv3bFKEeQQoKQkGeqVU8KBLq4P5FDYwsFc5kpTpQMPkNc6x3gsMbFVSwXmkCM0KZlAeDBw07mbLIkXYHYZEFYCBVuNutgwBp7vWn6+YEv3MGq6s4ZBBqxRh8BiSUgIGbgqpYHbotxmxqUELGMg6HDLrlCIMEb0RkjAXGLir65q4pQhTwKSyIjAwqKOCvUb/w6QoGxjYaytZeWNNFwslIAkzgYFeGxPH2hd1bVGXHm8BBjbKPmqvdcofSZgHDLTKqOBBawk9IgmzgIF8wyGjNinCUt65ZY1g4FrKcIhT1pYvxZ16vAcYyAVGT8qkCFthN1bMbfZl7ZqYuEUzfoCdIYZjQmnVFKl31dvekYRZ+pBZ0SNnQoVmV+Chs9v0IV5PzmNaDdi74i4MmDtdD+nVxOmgHTzF4iTDwIe0alBfq0QA+DwJY10Mx+78QUuzzhFghrHMMz/mRrqsRUuU7nUIUJGEM+uyOIZDgg459BQOOKD+C0qbDio46Pc/3JBgmQ+hH//vVBRYnS/52q25ESW8qxjK3PQIULEnIS8lHFQ06r3+M1OY0GSihHsNEXpSv9BpxKoiw0MJtwqYuFX/iR/AgGxQTCPfpre4smfuOyJn5cPPolAAI3pCQrsFxSHQCuvCGhb/AwjDSAlb8QZ00EoAA4TJ0uY1wlQw4VqYaWXxP1wRY4ViWuH9vF4xASJxxMncjhJuZIcyF+3+h9FgZnV+K0sFz5rPi2IoKYc6vxGlggfNN+b5VxobqPMJq7BGbivHzuV/ec8oXn7lh6mCbUW9YGT2Oie2RK7YmbjBPzcG31q77XPfDF2JlLAXZGmsYgBaPQjzaPDKre/uuDVFUcK9XHu+a5uAy39flGfwZWz3oRhK2MvF5UbhBFIhIMxr3H0phhLupZAQiqUIU2D0P70gzBnc0w+FqPODVHMeFAPQnGtDcg0erH0h6vxZKCpbxQC0bi3qya/ttjIo4SBEBe96AWjdWtTzX7udioBiZhkquNcLQKseCL6CN6xNCZQwxYxwxH7eTi8ArVmLeu21c3sJlPAuQQUHxQC0Yi3q5cED2+mnhAlCYJ+7B2EFAPUOBEe8dmHQTwnvAhF5UwzAqB0IjuJ9xlm9Oj89BO6ZA4zl9j+VIExs2GdJw6SU8J6/LZ80N8Bv1btCIUI878NCi2ya8o3NSvSzNyAqabiUsmPslS9s23JzM63qBkRjC5y2+cstuinh1IMYPqPH8zcgKqXQqWUvAy3S6gmBIWOK429ANJ5LTye/6GkRSko4MQSO+XiuezYgHcGzpqdFFi1VT5dv4vueDQiRCJQaj6GEYpJC4JCtyLpnA0JWb1HTIruS373P9cdyNCBdzetJ3ayWEk6Zwt5zZTn+BkTrbS6yWEObhhsdIXDL1INkaED66lfz0dIihCHBDdk+hVPbgKhdyTvRfUfSaRHKxYw2W4XstTYgitdhET5o0mmRTUMIDDmyfYYGJHQ3WQpESItQqvNtrrdzRwMi/PUJaZFZPgR2OZYi3LgB4ThXSYjHtOIhcMgw8p2hAdG8DIv8WCAhHkP5aJosv01Q2YAoP4o0kH/hoHBDaJsFnrNoQEyWLdyZZKqUlHCTozzZ0YCInyki5b134RBoub2cvwEpYB95y1J3TNpejibDT9Ppa0CWu11LpcVjetkQGHh7EDQgnLtIaGSqrehGgJG1B8nQgKzT7S4FEuMxhOp8z86Tb9oaEFfESbiO7ftT4DGLYAhsWP8AGhATf44v3/YOQkrYc1egExoQPW0w2W8wy4XAnXEpQoYGxHeFOCDrRth0maoXW8248HWcaECyFSPJMtVerCayfD0IGhBOOQKxTLWVCoGezb0zNCB7Mf5Hqcp/kps6LVDMzNmdDdcO8h131eCzqvKfRJ5GiWY2MMo0RjQgireSzEpUMTNfZmgVNSD6JTC5S+I0WmQTWdrbMCFO9uYafO6dkAx4DCEavbMhkLOeBmQzpdkw8v8qKTLVWSIE7iw9SIYGpDXlWc/vgEl4jBcIgQtHD5KhASkHgWYcjqOWqfYCe8stA9OcoQEpCIHOxggTyFTb/AWSZ+hBLBDo+GvpojJVOvHI6RC40j/3DA2INaVaBn1QCh5js4dARz5zkqEBCV2xDsh+JzRNpkqHRp9c2juRL0XI0ICUhkBnvdSdiMdsmUNgQ03yZWhAjt4UbT6PB0ZuMVvzhsCZuvSyQKBfZp02kwdG4TF73hdgI370GRqQ1hRv85jHA6PwmJB1b/lCm/syNCBlItB/F8qZ0nAMHtNnDYEt6UBSBrKzVAT6n1Th1KbhNufGSk85kJSjAdlNJZYrCF6fFqGDKhdiHLqVb0BaU49lCoLXb73ajCHQEfYgGRqQkhHoB6Em6EzDdOMhlnZx5yxNMrnBVGXd5lSC0lu2B9bTiQFz0Oyzqc1yBcFr3DAdGm0pcehRWmi0mPosVxC8xg3vuTZWbmRiwAxSS9+ZGi1TELy2wihkCoELVQDKUACOg6nTukVfGu4zhcCWCILLUQD2plrrV3VpuM0DnAUiX24hQUjTJ9hDGTPX5AmBK40YcAMCXYg+wU7Z0eiWam9sgAShAmrutEBmchlC4EDSz2QoAGuRICjoRU6n4SVDCOxJijBIEMrqRU4yc3RodEODQ/dyBaA197BMWumTApmdPwTuBGJADMGZ4hQyJwUygR1B29LFgNMIBLpAXuTUFq2e/XTDkh5HPSQIxL2I1SOQ8dwh0CYTcRk6t8XczHJBgl0+NNoTEBiz0L6xGxWAmSHBE8ycZQ6BPlEMOKAALBkSfC2QIdNG+2QmbkQBWCEk+DINL7whcExzYRSAxUOCr047kIEcj0NgmiegAKwBEsw1aTYnrsbaUQBWCgm+YOYC4/WaJoXP61AAVgIJ/i6QmRkfZp8iBlxAAdcCCf6ehj1fCJwT/vWMArAiSPC3NNzwhcA9PhhhDVFdkOBvAhnLFgK3aDEg1hBVBwku/Gj0nFDG9SgAa4cEnwtkFq4QaGPFgCgAa4QEnzJzZGj0HK1FWFEA3gESfMbM7Uw3DH2cGBAFYLWQ4BOBDNl4yBwLci+5Dy/D5YQgwZkVjbaxWoQ5bwFY/xSwXkjwcRom+ttr7HrUAQXgbXqRhwKZhmNCc4oRA+a4O48CUDQIPhxdbxk2/AwRYq6uxRoY0SA4CjFzRGi0jwurS841WCgAfw2CrRAzt9BfT+ov58Qc8Q8FoIZ2+N/RdSI0Oq6dbfL5X917AAsKgv8wcxs5ELNdFANm8T8UgFqC4N+j6zRo9BiT1UM+/0MBqCgILhxodBPBaITt3XJAACgAVQXBv9KwJ/bqXHeTUQCaUkVaPwUyJFBMyH86HgVgwUHwBzNHAsUM9OvfUABWHAS/C2RIljHvcadacxSAPXzqahBc83bDM2macwcKQBwYucYNE5RtfyZ8O2X+5+FOWoOgJT3J1kfdCsYajjsHQf9VnXeODohpdDkgCkDNQfCrFekJgZhelf8t8CPVQfCzFaGZUR6ySetRAJpqptffWhGqLQ0b9VVsFIC3CII20Eab7UABiCAoYkOu9RooAE2Fl9epcrBV83mwhuNmQTDoEsOgALxdEGxUOeAMxyEMgqEEB1w0OSAKwPsFwVWRA6IAvGMQXN9MhxjGoQBkCILugEGDZarfJ1iBrUjAPEFwQxBEB4wgqN6gQUAQFO1AMAaMIAgIEEHwrjZqHcOc+t3aBkGwdlO4CXVq9qX9P6Xf9giCVVvQ9aSaeWn/ihd+xl7fik1LgOmGeXum9g17h+XmlZqGRTBD/+Z6vz+edesQBKuEYAZx1/PnIsO4TAiCIIFJW1x/bbGUswOCIEhgmhY3bqeZKx+VQTssSAJ3b67nEwcmikdlEARFSOATfcbpDz2jEqzFmjxh72qx9xK67BEEqzDuc6xvyF4bsEQYQTA/CdzFNxpXz1wgCIIE/rfaO7JslUAQLJsE7soKe7Wdkr19EOxLC3sZq1dIZMohgYd58eO9JTwGOkEZEnh6i3tCi3gmiKWPW+vw39G9ABEZguAhcA7pPek6zLHcbp+ghjbyLem244FJUnPTpaqSz697870Vo8wIgocACTzs1jvsckAQFIDR3go+HUn3JxdX2zKbzh6AYB6hLAGz9AiCR34dvjTKctTPBYtcmytCh68BZbnnNqV5vbsOXw3KctN1cvcIgm2RSbfqFuRbEByPGy5je/c9h3VeOoJge9wqA+tEWW7YgtwoCH4p8RWjLJVPhNxdqWr7eVvagGFmA7k+LPK+D4IgDDdNEAQPSLkRBGFoQRAEDwzzGRx4gB2Yh8PMEloQBEEYXwsyGVy5gdW70AtBEPZrBdjc8vI1HrwKBsTud73rfsfBTW3ON78o/prWLtvcN3XWiPeaWdKWdpd5ep2l/pTqbgz+zRf3uRk6BEFYWs97xvl+q9PfvbH9cMe+dH+cEARzRz47T7RIxac7FuuPCILqIl8aTDGu38LjhCAI+3Q+v/SdBFBbQrq+wcxSSc7HidL+TNcIgnA+WZ7qzR+VVI8IgkqcT5KkEq0ehxYOQ/ow2y2WX9OSjt7T9X/5mj9hIw3TRb6tT8hnaln6zwj54ZAsMRLkMIGt8ZHvy8oRKn155Bs/M+HqsAbf6wmew1Bo2H/vZ5Y9jbZuAErHVnwXIOZXzEDxFcjq23cFRUxbPaEVkfS9D9sryglvQXG7FhQHeFT2nHuDZvAjP59yxQ1uJRP3/rO6J7c/VWVv+bk0COAWvvdhN6nDHzctDfxL0vduEAEfB8U/hgCYt957WIaDFYXlj3vfeXn85DAh3wMlBZP1vZuWgTCheg9lIOz4e2ZIw5x4jwdxYGZI0kAIQLwsayDlIV6WHdOBMAmrgUStgTiz+pLPzprntlEGouRDGQhjKfn6IhaooAyssuQraBkpysDjlmup9NiOp1ZNyTcXuWMUs9oo+UStg0ATEDPKQFi5qoL0VnhePLQxBaJ8Va2VH968EKEQELNsOdjsFhUhSj7hhNzP+7Yt1rY+rCOCIko+6bA4NM1/PukDfBKqAmmXnIY3l3zzyTeX/IyTcBCUfMJ5+80l38Pk8h4m33wSyRsln45I+eGXcMw4u++NyWyOuf3nmMjjf9sCV8numG+e+e6a84dzfsTNN/98b33Cut7OR0ckX41O+sRL/aeXjjV5qQvve2B3Ted+YOfb9I/KsxYw82PRXL1XnW+AZX6EzDezNazH/jgaMACagfpMwyrYHWGxKKtzQapbw88LPxcMkdRAAi7tvZ8H/Aq5/ly4YRT1RJH5f3dEcKS3CVRM7C1yOI/BGKC8N37CQQiOBqth5d3x69AuKkeDO106+hjgkwb7mIRt7eFmTzsQixYkg7VIyY9ZkA2ar0wczQxv+9dmrAJDEBSk4ND+IggKNr8g4BAEBXuPBb2HRBDc4XofvceO3kMqCIK+ezsJhW0jCIKCvQfELwiC6D0QBG8KPKP30GB+APAMkzS3o/eAIQii97ixhQ7AM0zSLEQvhTWP41jXMpwZvUdRKev/q+PrWdrtGoheinPAqpzwDmXgUE3vEX5+r92uKAP1F3819R7Lv5dcinfCysvAykQvy8NzQkU74TgAeC5/RW/JTlhvGVgl8Gx/OaxWqBMumLaspmov0wlniF5q6hvL644rLAOrFr203Yk7p0XhhB7Ac20e+HFhspxjuwsUzxV64Hsl0m9tEUBUD9FLnR74kRB2/U5YSxl4m00v7UXwrNHemXj0Ho8fdD/X4YHaO5MVvceT4S2tJxx81JILtZ2JR+/xZHxV7fpUH7tmpWsUdiYWwPOTVU7TUZ0HaiwKd4he/n4lJ/VXlHziqilNTthD9PJ4p/GguXkM6cvOhllHUThB9PIo/Gm/YxhInpuCzmQE8Pz9sTbF3PAKVACucGfiATz/Mbd0BR0xXCkpBLmi0AJ4fhD+ijjhtRKTWDJw9Qbg+f/h7/sv0RdBK6/0NOqUvTPpATx/liLfB6WbQnjllYXIfxPSZHTCAb3HP2sTh2JErSvX48um5hoBPP+zOLYrSFI8cm644Jf4u2XCtOU/W2OLGqkbmXescHYmxbkfz7Tl3xdUluOAB2aAq50dSpu2zHJDqrgb6mOWPVPURWFx7sc0bWn/TgJ9ebr+MReSQeeExbmf2dc8x5SbEudKXM75bgLOpDz361mmLZ39R9w+FDpVnFlTl9aZFHeshmnNX/i3dupCZauLFHYmbQPg+W/hQZkAjAJO/3pRWJz7cU1b+kc/xHUAxq2+4GG57Gqu4tyPa9OLeyjB2KOIsLUWmT57Z1Ke+3Ftenl8qOcyAOPee+jO1SdRZZH4+x6il1/vNV5XwHyE0V6TNEE8xDztTMpzP7Y1f09AgOsAjNdH3I0aHvODorA892NbMT4+wWw7H7lUJ9wXkj5bFIYZ05bPhAcJAIzS4XVFY96fcHWB7se2Ynx9mgmWWORX3wIjXTMWU48V48+FBwkKmK8LAxaQtMFty8TwF6GA+XNqb61jfxuMe8X4Q+YtfgTpq9Iaqtwcc1vr2Xit8AtCNq3xWW6vfGvCrYxvxbj7tTC/3vKsk3b1wtrAn/SsGPe/Po0l5dbyeG+dfkW9B99ty9/DXwyV9t9/qHiDoOvhVSpuW76Q3w7XHb/9719vh2IP3OFX8rctxxdP4ToD9+Ouhe67TBtcS/q8UfsKj1iSlul0Dirp4os/xvNG60sWck4bvugP5WYBSb/KvoxiEvsSjo0oAH8c+d4O9ccoAUn/aoynfdfXXWDEDNzPw2b2ZB3qS18lXWv1x/dg3JnkY1MvfPtTn2Qyg6twgVv5tvM9lnAGht2Tq/rxrMsugKTvMm3+SniQtIQj/Px/T4lRPx7/NAKSVmYz3yPxp175CAmC++s/bs5voE0ULYxt267l6/Rr37R2hnkzCTKCPSaHk0DW4f03awFJkzFvfDJOf7LmjkBQ2hgUeyRhjUPqAN4Cp/uGflgx5i2lAFynmCAaSA7fhOS2DZB0jvB3eu9XRAH44J5FuHKIKqkP+XLjfoROP5l64wt/52ttT5LE3CXgJoU2cV9vVrOCFNFKvbXnf+CF5KTecNFvA8VFv8lDp6+SelsvgF0RGoJxiPxvNiLpwk5QQd8ekmak3uyF/BIhQTjmWCZlJlp/6QYCBmm8NyS9qwh/MRrUx8K65WrrkkQJf6sB4luRO0PSfNTbOeYtpQAMXTSU3ZCdwPmWzBNakR3Um4jwIEmD6h7/hVNe8KM06FIQqO+fIqEVWUC9SYa/qALwcdQ4pcd3yd7/OA4ntCJ3hKT5sGd/sbGLucPQPkGUTlWnlGv4F0Oixr4dJN1ZaeGBSdGgrlNCLg9/B2BHlITf/r4DJC0c/q5f3NkJ1XQbm4Dh+bvwI3bFtyJ3gqT5qLfxekMXcwhuSwqm/+A3adLUn//dELA6Ro56a6/nkSmQUHBX+OSFIgg/VUR0LSBpIeptjEFUWxoKzlzYS7SRCCGeF6QLIGkR6s3GlNExfePzxzTF/vuGdNlBNL10g9UxbNTbGpU/YgrAX3ZbNJEiwtS10n+7dDwvt4F6yxj+ojSooUttqB9l8LQ+5J+iIL4VWUC98TNvKaWXa5Ip5YmqFvgF2Ynn5SyoN27mLala35M7Gvf43wbSJJyQ1GslRdiw59jwFyUGbX/9H0MME0eyVetBZx5dblfpgWzUm4sum2MkCOvvpaZLQRFb2iSc0IpUuLyILfz5aPg+RoP6YqHFkBREE7cVzRTHPiul5diotzEBNbD0IEWfVuVv1Ek4vhWpa30WG/XWJvxM80FJwV1BYZ4CHd1KnYTjK5+aZpVmp4h5S8l340ASVHfSl+IVQ7Pd3gO5/K9NqZRjNKhHTwMrzqTE9MsXJPb3r2WBW+/0hb+4AvA1R3AuhTa0cfllexMrEaxDmsDkfzYNKNgPWgru/2H1iGbiSKSpz4JrNC9XgTShGfUID9IkCOPrhuekpOU3R07cmvrkQ0ZLBDf4X+yucWoJwjFTNdYjeWw+gTEu95QmDKMm5i2p1Ldk2sJAro84857E8nJlSxN2RcKDNGAidGSdjSfJ40/j67PiOJaXK5oY3hQxb0ltkRvoxF0tQ4N+5r+PbUVK9sBFjfAgkR891w6OJGVV6vWGp8Vq7ELzgieGrcyucWoJwslCaCLqLDemJBwdEMqVJrTCI79E70ToKOWFr79GYErC0a1IsdIEr0R4kNYWuYb0/+5ZhLInEaPIVqRUYnjVwrylINCn+YCTCa5hzxy/JOHYVqTQmfVRCfOWhEBb4oJj4JHqnG20IyWCRUoTukMH85YUWdbTvh/SmTgq/GqmH44oUZow0Pjf0gmiQu509dM5AiaORpr6axKObYYL3JrQqAp/cXLPnfrbBr7PehrtjmyGi5Mm9IcG5i2JmG4NdYPtTRYAYeYQCS+3o4IDXfsfpYFeJ3KE0fKNDJxPwrEiVXsvKthtwqzMpdYv0EaRjTUJx8IxZRHDi7jwIPF5XnkBTvYg5/9P3iQcC8cU5YFWTfiLmwzwHAXvzgqan0/CsTLpkqQJrTjzltSAjANHiO2zVTAtT4YqSJrghYUHaRKYo2cJ9w1v23RpiiAOjilHmhBERn6paoGF58tOzMz1hSQcC8cUI02IhPPXWQMc5K/9jelsaZtT0NsyTY2V4oFxYJOlrnKjAsk48IDuKzt2eW2UL26BVinShIhvt5J/tSgJzDEzwTwhK5n5OglHwjGlSBOuwp2O4Wpjm4V0aum5vTxJOBaOKUSacO39Co0SNDx0XPXuRTIrVRZzKpIvNUsTLiAghMKDRFnJeBlomLhCa8+fhGMRx0KkCacjvG/U7GaY+YQ/W+7JwpZvhZ6tiZFzLBF9Cpl+2I3Nt6ccSThyWKkUYtjmGfmlakBCx/iH+jxFxNUkHAmZleKBz+PDGFq7zU2nSA/mGs7xqyH/eP/Jsfq2ZmnCP1yEW/27400Kl2PurNMvEd84dVfH2bQfxQyXIk34+nLuLeQtez/oXQ5nWXttl62Tv5yEI9NwKdKE2dtcjpfEY4WOFWxcjcSKk7MvVVQaXis66CAvgXENr/DMyyz6nDnPOY89nI1sImpnXgHRyox3jROngMTBA6m0dC33BL4VWvN0/u/GpOE6DjookMCsEzfft2Q87BQLgG/ulgcdjPw0gGvYBQ+71Iz1OPHqODf4nKC+wzOyzPmTcFwaXuB1qcBZG/33zuesJnNRG+v7EWnYwu/SBh3WKcMSpkFuz8Q4MY9TFH3QQV4Ck4AlXKjPOokhw6gQFZGG4YEpvEGW2+tjfmQpvgC9noYLPuhgpFci+SyhKRjJsyvjxD3VWO5BByMsgRkTfrnOZXFzginNq33C9TS83t4DI2nTPs8i2NaYkpJwRBoeby5NiAwSSybW2QrfPhsvF2n9Cg/kVw/7LtPf3GTer5Q34HIaXiCByVkAXoNHdvG12xFUzMU07A0kMPwPJa4HOWbx+4/jxL3jx3WQwGTNGVeCUnp9lLwqIaYMvZaGb1sExq2hjBThx+GOg4LbF1FR+Eoa3iGByVgAXkuKFNlJIglf6oYtJDD5CsBrPcho5AqNVAc5n4ZXgwYko4joykXGIPmmJb9zp9PwBAlMtgLwWk3mdRyiHyM95GwaniGBYRfhx/UgRNVR8qoEy7vtcYEEJmPDZgVIgl0oCZ9MwzeEovtD7PZekJjckUrC5/a4OQMJDLMIP2I1KilCNkgl4XNpuIEEJlMBeDH29nou4c6c5c4OCUy2eLQJkVReLAmfnOymIQAABT1JREFUSMMWEhh+cWhMNUYIkCWvSkhxksFjSj1Vg09SAJpr58icpmvgaWjdhi447dYU1UanSz3IquQWaXoS/jUNuwESmGyIyKUeJBgF3CNVpfa8G94hgclVAF5MhK0x9SThp3+/NZDA5CoAL/YgVgX6RJWEn6ThdYIEJiMgt0qO6wgn4cdpuIcEJiMlNsnu0FuEk/CDNLxAApOTLO/zPm7yJJyeL/9Kw6FDA8Ivwo/tA3o1JQhhWfojDbsGEpisfnAtBDdqZGikP8ZyUwQmVhFCWYldA8EnLcuwiZvWrpk369ebITCx9Q9llXytB3GaXkMGbKhrJkhg8mJx14qAVRMSevMJDrHixwp+CK/qTSSDow3WUIptMW4PQSZOcGMWLFIC44lRqlXFg86/tvL2FrsFhjjZTEoW520KOmEDDX52/7ta/++6DpMhCZu8Gnz6/dmLlkyXjMXg5jR/zcOwu7g9hJk4MiwGVSD7diiO3dkXP8igDxXFrctcvzXHUe/h4mfoFPJCWCyeR4LAclT+Yt4bjUZp7h1l9AIJeFagBltVUkPYbJ9Dg7pr+Che45H4ey81zdXuMZXYo640l4TF4NAq42pGJv8btKG9KVgMrlzyJWCr5HlvWhVqt5tlM1kpEKtlIoVfrp5wxAZINFeVw3dGvtX3jOOxGCDRTH2e56uuR4V86wY5gq4E7PmERoPKOt8DieZ74k5egJXSc3aaRwUD/Ivh5V4HRVPxo9G8rWmEf9GXN6z+d/l9CLqnBYFEkzd4I2/VPyqlWyOxGCDR1C82s/8NavvMOCwGSDRxxnO9slpr0T0yvcPFDKX62M3aNnNtqvFSINGvzCmjHbziEBODxQCJNpQjuLu2FyJvkTUDiSavrJXlk+ZQPflogUQbwUmQRSMtmHX7wHUsBkg03QO3GkOM0w6bAommghaylNNBe4TZsBxBCPVoO309kUSN5YFEGwn1p+90Die32tW7QKJJ3ucwKSUbrPYBQojyDQERkmvTXVvC8gsLGMZkxn3XXJqOsQSq6xIWgwBIUPSPuTq5y1IYmQd8AYvBagQC4iGb/8VMp/S6wSu0IOldp+s1b4hrVPduK2Do5I4uo/+ZiGV8k+pJagTAlyEwKCqyuuuaY6d6mdOIAHjip1zVvMN9QfvPLNSoZHFnX5X8hFtBc7dnFnp63AlJdcFN+46uVu04YVgwEHfFBUcFPFfE4KPVKSRaF4hgrqaU7R8XDJlLmKGwNfTDvLQrvI/JBV3bl7AmWBznmJrd+m/ZeLQzWt/oH3Nxf4LfpFmbqI5qfQ+G4f2thfcl/pD2zQWd7UtZU6hK7jn18D4KF9yFwIPOYfUKzJQyIYqRH5iR35Tu8LPBjOACPsjtYEYQhsYtNpjgRCY2r8CM8BJm7J6CGUEYGnonmBG9xAHFMcyITWRi6BFmZGFobP6BGUEYGkwczMjegQETBzNiE5lYPwozolIYbP6BGbmJTDBxMDqbRhAhsOKakAW/G8zIjcSBiYMZyal0MHEw2TYEG+hhRhIJBBMHM5JkHJb/wOisu47E4EeDGUFJKpg4mJFEYsDEwYwkEoORJJiRRGLAxMGMJBIDJg5mJJEYMHEwI4nEYCQJZgSRGJSAMGobLgijPQZCYEYOiVnBw8GMHBIzYiITZuQ2dDgosWA8jbCFFBUmarsDBA2TtCaABIZJ2tQCgIGJ2vZLGnYtABgYexpen96hBP4Ck0rDAhcUYUjDfwTQO3IvLKP137Uxo8UMJix3Gv5Di3icQYWJpOHP48XoO2BSaXi16DtI7X8mnzebHIw8HgAAAABJRU5ErkJggg==");

  /* Elevação */
  --elevation-flat: none;
  --elevation-raised: 0 1px 6px rgba(0, 0, 0, 0.10);
  --elevation-floating: 0 2px 2px rgba(0, 0, 0, 0.012), 0 4px 4px rgba(0, 0, 0, 0.02), 0 16px 24px rgba(0, 0, 0, 0.04);
  --elevation-overlay: 0 16px 40px rgba(20, 20, 19, 0.14);
  --elevation-modal: 0 24px 64px rgba(20, 20, 19, 0.18);
  --shadow-clay: 0 16px 40px -16px rgba(215, 119, 87, 0.4);

  /* Tipografia — famílias
     --font-display alinhado com --font-sans (não mais serifado): o site não
     carrega as fontes reais "Anthropic Serif/Sans" via @font-face, então no
     fallback de sistema (Georgia vs Arial) o H1 do hero destoava visualmente
     dos títulos de seção (.text-heading). Corpo/parágrafos (--font-body)
     continuam serifados — só o display grande virou sans, pra casar com o
     resto dos títulos em negrito do site. */
  --font-display: "Anthropic Sans", Arial, sans-serif;
  --font-body: "Anthropic Serif", Georgia, serif;
  --font-eyebrow: "Anthropic Sans", Arial, sans-serif;
  --font-mono: "Anthropic Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-sans: "Anthropic Sans", Arial, sans-serif;
  --font-serif: "Anthropic Serif", Georgia, serif;

  /* Espaçamento — base 4px */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-site-margin: 80px;
  --space-site-gutter: 24px;
  --container-max: 1400px;
  --reading-column: 640px;

  /* Raio */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Movimento */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-gentle: 350ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Geometria de botão (assinatura da marca) */
  --btn-height: 48px;
  --btn-padx: 24px;
  --btn-pady: 14px;
  --btn-shadow: 0 4px 4px rgba(8, 8, 8, 0.08), 0 1px 2px rgba(8, 8, 8, 0.20),
    inset 0 6px 12px rgba(255, 255, 255, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.19);
  --btn-shadow-hover: 0 1px 1px rgba(8, 8, 8, 0.08), 0 1px 1px rgba(8, 8, 8, 0.20),
    inset 0 6px 12px rgba(255, 255, 255, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.19);
}

/* ==========================================================================
   2. TOKENS — modo escuro (preferência do sistema)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-background: #242322;
    --color-foreground: #faf9f5;
    --color-card: #1f1e1d;
    --color-card-foreground: #faf9f5;
    --color-popover: #2f2e2d;
    --color-popover-foreground: #faf9f5;
    --color-primary: #d97757;
    --color-primary-foreground: #ffffff;
    --color-secondary: #1f1e1d;
    --color-secondary-foreground: #faf9f5;
    --color-muted: #141413;
    --color-muted-foreground: #9a9790;
    --color-accent: #141413;
    --color-accent-foreground: #faf9f5;
    --color-destructive: #d36b6b;
    --color-destructive-foreground: #ffffff;
    --color-border: #d1cfc5;
    --color-input: rgba(250, 249, 245, 0.08);
    --color-ring: #d97757;
    --color-primary-hover: #c6613f;

    --chart-1: #d97757;
    --chart-2: #788c5d;
    --chart-3: #6a9bcc;
    --chart-4: #c46686;
    --chart-5: #cbcadb;

    --color-surface: #242322;
    --color-surface-foreground: #faf9f5;
    --surface-container-low: #1f1e1d;
    --surface-container: #141413;
    --surface-container-high: #3d3d3a;
    --surface-container-highest: #5e5d59;
    --surface-bright: #d97757;
    --surface-dim: #0a0a09;
    --surface-inverse: #faf9f5;
    --surface-inverse-foreground: #141413;

    --elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.40);
    --elevation-floating: 0 4px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.60);
    --elevation-overlay: 0 2px 2px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.25), 0 16px 24px rgba(0, 0, 0, 0.35);
    --elevation-modal: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.55);

    --color-ink: #faf9f5;
    --color-ink-soft: #bdbbb4;
    --color-ink-muted: #9a9790;

    --pattern-line: rgba(250, 249, 245, 0.05);
  }
}

/* ==========================================================================
   3. TOKENS — override manual (toggle claro/escuro na página)
   O atributo data-theme no <html> sempre vence a preferência do sistema,
   nos dois sentidos.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #242322;
  --color-foreground: #faf9f5;
  --color-card: #1f1e1d;
  --color-card-foreground: #faf9f5;
  --color-popover: #2f2e2d;
  --color-popover-foreground: #faf9f5;
  --color-primary: #d97757;
  --color-primary-foreground: #ffffff;
  --color-secondary: #1f1e1d;
  --color-secondary-foreground: #faf9f5;
  --color-muted: #141413;
  --color-muted-foreground: #9a9790;
  --color-accent: #141413;
  --color-accent-foreground: #faf9f5;
  --color-destructive: #d36b6b;
  --color-destructive-foreground: #ffffff;
  --color-border: #d1cfc5;
  --color-input: rgba(250, 249, 245, 0.08);
  --color-ring: #d97757;
  --color-primary-hover: #c6613f;
  --color-surface: #242322;
  --color-surface-foreground: #faf9f5;
  --surface-container-low: #1f1e1d;
  --surface-container: #141413;
  --surface-container-high: #3d3d3a;
  --surface-container-highest: #5e5d59;
  --surface-bright: #d97757;
  --surface-dim: #0a0a09;
  --surface-inverse: #faf9f5;
  --surface-inverse-foreground: #141413;
  --elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elevation-floating: 0 4px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.60);
  --elevation-overlay: 0 2px 2px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.25), 0 16px 24px rgba(0, 0, 0, 0.35);
  --elevation-modal: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.55);
  --color-ink: #faf9f5;
  --color-ink-soft: #bdbbb4;
  --color-ink-muted: #9a9790;
  --pattern-line: rgba(250, 249, 245, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-background: #faf9f5;
  --color-foreground: #141413;
  --color-card: #ffffff;
  --color-card-foreground: #141413;
  --color-popover: #ffffff;
  --color-popover-foreground: #141413;
  --color-primary: #141413;
  --color-primary-foreground: #faf9f5;
  --color-secondary: #f0eee6;
  --color-secondary-foreground: #141413;
  --color-muted: #f0eee6;
  --color-muted-foreground: #5e5d59;
  --color-accent: #d97757;
  --color-accent-foreground: #faf9f5;
  --color-destructive: #b43232;
  --color-destructive-foreground: #ffffff;
  --color-border: #1414131a;
  --color-input: #e8e6dc;
  --color-ring: #d97757;
  --color-primary-hover: #3d3d3a;
  --color-surface: #faf9f5;
  --color-surface-foreground: #141413;
  --surface-container-low: #faf9f5;
  --surface-container: #f0eee6;
  --surface-container-high: #e8e6dc;
  --surface-container-highest: #d1cfc5;
  --surface-bright: #d97757;
  --surface-dim: #b0aea5;
  --surface-inverse: #141413;
  --surface-inverse-foreground: #faf9f5;
  --elevation-raised: 0 1px 6px rgba(0, 0, 0, 0.10);
  --elevation-floating: 0 2px 2px rgba(0, 0, 0, 0.012), 0 4px 4px rgba(0, 0, 0, 0.02), 0 16px 24px rgba(0, 0, 0, 0.04);
  --elevation-overlay: 0 16px 40px rgba(20, 20, 19, 0.14);
  --elevation-modal: 0 24px 64px rgba(20, 20, 19, 0.18);
  --color-ink: #141413;
  --color-ink-soft: #3d3d3a;
  --color-ink-muted: #5e5d59;
  --pattern-line: rgba(20, 20, 19, 0.055);
}

/* ==========================================================================
   4. RESET MÍNIMO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  /* Necessário pro elemento full-bleed .logos-row (faixa de logos que sai
     do .container e ocupa a viewport inteira) não criar barra de rolagem
     horizontal. */
  overflow-x: hidden;
  background-color: var(--color-background);
  /* Quadriculado sutil: cobre a página inteira, mas só "aparece" nas áreas
     claras (.section) — os blocos escuros (hero, section-muted, inverse-section,
     nav-header) pintam fundo opaco próprio por cima e escondem o padrão. */
  background-image:
    linear-gradient(var(--pattern-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   5. TIPOGRAFIA — classes utilitárias por papel
   ========================================================================== */
.text-display {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 2.8vw + 1.3rem, 3.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  -webkit-text-stroke: 0.4px currentColor;
}
.text-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.6vw + 1.3rem, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  -webkit-text-stroke: 0.3px currentColor;
}
.text-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.text-subtitle {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.text-body-lg { font-family: var(--font-body); font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
.text-body { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: 1.55; }
.text-body-sm { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.4; }
.text-label { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }
.text-caption { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
.text-mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; line-height: 1.5; }
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink-muted);
}
.text-muted { color: var(--color-muted-foreground); }
.text-accent { color: var(--clay-vivid); }

/* ==========================================================================
   6. COMPONENTES
   ========================================================================== */

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding: var(--btn-pady) var(--btn-padx);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
/* Botão primário — clay vívido como cor de ação padrão do sistema inteiro
   (não mais restrito ao hero/CTA final). Decisão do cliente: a mesma cor do
   chip de destaque vira a cor de todo botão primário, em qualquer seção e tema. */
.btn-primary {
  background: var(--clay-vivid);
  color: #1a0d05;
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(255, 90, 31, 0.5), var(--btn-shadow);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px -6px rgba(255, 90, 31, 0.55), var(--btn-shadow-hover); }
.btn-secondary {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-foreground);
}
.btn-secondary:hover { background: var(--color-foreground); color: var(--color-background); }
.btn-ghost {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-border);
  height: 44px;
  padding: 8px 16px;
}
.btn-ghost:hover { border-color: rgba(20, 20, 19, 0.3); }
.btn-sm { height: 44px; padding: 10px 20px; }

/* Cards */
.card {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elevation-raised);
  transition: background-color var(--duration-gentle) var(--ease-out), box-shadow var(--duration-gentle) var(--ease-out);
}
.card-hover {
  background: rgba(255, 90, 31, 0.2);
  border: 2px solid var(--clay-vivid);
  transition: background-color var(--duration-gentle) var(--ease-out),
    border-color var(--duration-gentle) var(--ease-out),
    color var(--duration-gentle) var(--ease-out),
    transform var(--duration-gentle) var(--ease-out),
    box-shadow var(--duration-gentle) var(--ease-out);
}
.card-hover:hover {
  background: var(--clay-vivid);
  border-color: var(--clay-vivid);
  color: #ffffff;
  box-shadow: var(--elevation-floating);
  position: relative;
  z-index: 2;
  animation: card-hover-pop var(--duration-gentle) var(--ease-out) forwards;
}
@keyframes card-hover-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Cards de placeholder — sinaliza dado ainda não confirmado */
.card-placeholder {
  border-style: dashed;
  border-color: var(--color-border);
  background: transparent;
  box-shadow: none;
  color: var(--color-muted-foreground);
}

/* Inputs */
.input {
  width: 100%;
  background: var(--color-input);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 1rem;
}
.input:focus-visible { border-color: var(--color-ring); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-accent { background: var(--color-primary-soft); color: var(--color-primary-deep); border-color: transparent; }

/* Navegação — fixa em escuro com calor de clay (gradiente, não laranja chapado,
   pra não engolir o contraste do botão de CTA), mesmo compromisso "sempre
   escuro" do hero/CTA final/seções quietas. */
.nav-header {
  background: linear-gradient(180deg, rgba(22, 15, 10, 0.94) 0%, rgba(12, 11, 10, 0.88) 100%);
  backdrop-filter: blur(10px);
  color: #faf9f5;
  border-bottom: 1px solid rgba(255, 90, 31, 0.18);
  height: 64px;
}

/* Seção inversa — compromisso fixo com slate-dark independentemente do tema.
   Gradiente radial com o clay vívido do hero (mesma família de cor do bloco de
   abertura), para a página abrir e fechar com a mesma energia — sem perder a
   leitura "flat e calma" do restante do sistema, que fica entre as duas pontas. */
.inverse-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 8% -10%, rgba(255, 90, 31, 0.22) 0%, rgba(255, 90, 31, 0) 45%),
    radial-gradient(140% 140% at 100% 120%, #232220 0%, #141413 55%),
    #141413;
  color: #faf9f5;
  padding: var(--space-24) var(--space-16);
}
/* .btn-primary já é clay vívido por padrão (ver base acima) — nada a sobrescrever aqui. */

/* Hero editorial */
.editorial-hero {
  background: var(--color-background);
  color: var(--color-foreground);
  padding: clamp(4rem, 6vw + 2rem, var(--space-32)) var(--space-16) var(--space-24);
}

/* Superfícies utilitárias */
.surface-muted { background: var(--color-muted); }
.surface-card { background: var(--color-card); }