/* design3 */
[data-design="3"] {
  color-scheme: dark;
  --z-col-num:calc(15ch + 24px);
  /* superfícies (escala de 4 cinzas quase neutros, levemente frios) */
  --bg0:#0C0B0A;      /* fundo do app */
  --bg1:#121110;      /* sidebar, painéis */
  --bg2:#191816;      /* card, linha hover, input */
  --bg3:#211F1C;      /* popover, modal, elemento elevado */
  --bg4:#2A2825;      /* hover em elevado */
  /* linhas */
  --l1:rgba(255,255,255,.06);
  --l2:rgba(255,255,255,.10);
  --l3:rgba(255,255,255,.16);
  /* texto */
  --t1:#EDEBE8;
  --t2:#A3A09A;
  --t3:#6E6A64;
  /* acento (marca) — usado em poucos lugares */
  --gold:#F0B429;
  --gold-text:#F5C451;
  --gold-soft:rgba(240,180,41,.12);
  --gold-line:rgba(240,180,41,.35);
  --on-gold:#17120A;
  /* semânticas (saturação baixa) */
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.12);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.12);
  --bad:#F87171; --bad-soft:rgba(248,113,113,.12);
  --info:#7DA2FF; --info-soft:rgba(125,162,255,.12);
  --violet:#A78BFA;
  /* raio */
  --r1:6px; --r2:8px; --r3:10px; --r4:12px;
  /* sombra: SÓ em elementos flutuantes */
  --pop:0 0 0 1px rgba(0,0,0,.5),0 10px 30px -6px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Ponte shadcn: os canais HSL são necessários para hsl(var(...)). */
  --background: 30 9% 5%;
  --foreground: 36 12% 92%;
  --card: 30 5% 7%;
  --card-foreground: 36 12% 92%;
  --popover: 30 8% 12%;
  --popover-foreground: 36 12% 92%;
  --primary: 41 87% 55%;
  --primary-foreground: 37 42% 7%;
  --secondary: 30 6% 10%;
  --secondary-foreground: 36 12% 92%;
  --muted: 30 6% 10%;
  --muted-foreground: 40 4% 62%;
  --accent: 30 6% 10%;
  --accent-foreground: 36 12% 92%;
  --border: 30 5% 14%;
  --input: 30 5% 14%;
  --ring: 41 87% 55%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --radius: 0.5rem;

  /* Ponte custom v2. --accent permanece HSL; --info/--info-soft já vêm do piloto.
     Não usar aliases autorreferentes: --info: var(--info) invalida o token. */
  --bg: var(--bg0);
  --surface: var(--bg1);
  --surface-0: var(--bg0);
  --surface-1: var(--bg1);
  --surface-2: var(--bg2);
  --surface-3: var(--bg3);
  --text: var(--t1);
  --text-secondary: var(--t2);
  --text-tertiary: var(--t3);
  --txt-1: var(--t1);
  --txt-2: var(--t2);
  --txt-3: var(--t3);
  --border-soft: var(--l1);
  --border-strong: var(--l2);
  --line: var(--l1);
  --line-2: var(--l2);
  --accent-text: var(--gold-text);
  --accent-fg: var(--on-gold);
  --accent-soft: var(--gold-soft);
  --gold-light: var(--gold-text);
  --gold-deep: var(--gold);
  --success: var(--ok);
  --success-soft: var(--ok-soft);
  --danger: var(--bad);
  --danger-soft: var(--bad-soft);
  --warning: var(--warn);
  --warning-soft: var(--warn-soft);
  --sheen: none;
  --shadow-card: none;
  --shadow-card-sm: none;
  --shadow-gold: none;
  --gold-gradient: linear-gradient(var(--gold), var(--gold));
}
[data-design="3"][data-theme="light"],
[data-design="3"].light {
  color-scheme: light;
  --bg0:#F6F5F2; --bg1:#FFFFFF; --bg2:#F1EFEA; --bg3:#FFFFFF; --bg4:#E7E4DE;
  --l1:rgba(28,26,23,.07); --l2:rgba(28,26,23,.11); --l3:rgba(28,26,23,.18);
  --t1:#1C1A17; --t2:#625D56; --t3:#948E86;
  --gold:#E3A50E; --gold-text:#8A6300; --gold-soft:rgba(227,165,14,.14); --gold-line:rgba(227,165,14,.45); --on-gold:#1C1500;
  --ok:#15803D; --ok-soft:rgba(21,128,61,.10); --warn:#B45309; --warn-soft:rgba(180,83,9,.10); --bad:#C62828; --bad-soft:rgba(198,40,40,.10); --info:#2456C9; --info-soft:rgba(36,86,201,.10); --violet:#6D4ED6;
  --pop:0 0 0 1px rgba(28,26,23,.06),0 10px 30px -8px rgba(28,26,23,.22),0 2px 6px rgba(28,26,23,.08);

  --background: 45 18% 96%;
  --foreground: 36 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 36 10% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 36 10% 10%;
  --primary: 43 88% 47%;
  --primary-foreground: 45 100% 5%;
  --secondary: 43 20% 93%;
  --secondary-foreground: 36 10% 10%;
  --muted: 43 20% 93%;
  --muted-foreground: 35 7% 36%;
  --accent: 43 20% 93%;
  --accent-foreground: 36 10% 10%;
  --border: 45 6% 86%;
  --input: 45 6% 86%;
  --ring: 43 88% 47%;
  --destructive: 0 66% 47%;
  --destructive-foreground: 0 0% 98%;
}
@media (prefers-color-scheme: light){[data-design="3"]:not([data-theme="dark"]) {
  color-scheme: light;
  --bg0:#F6F5F2; --bg1:#FFFFFF; --bg2:#F1EFEA; --bg3:#FFFFFF; --bg4:#E7E4DE;
  --l1:rgba(28,26,23,.07); --l2:rgba(28,26,23,.11); --l3:rgba(28,26,23,.18);
  --t1:#1C1A17; --t2:#625D56; --t3:#948E86;
  --gold:#E3A50E; --gold-text:#8A6300; --gold-soft:rgba(227,165,14,.14); --gold-line:rgba(227,165,14,.45); --on-gold:#1C1500;
  --ok:#15803D; --ok-soft:rgba(21,128,61,.10); --warn:#B45309; --warn-soft:rgba(180,83,9,.10); --bad:#C62828; --bad-soft:rgba(198,40,40,.10); --info:#2456C9; --info-soft:rgba(36,86,201,.10); --violet:#6D4ED6;
  --pop:0 0 0 1px rgba(28,26,23,.06),0 10px 30px -8px rgba(28,26,23,.22),0 2px 6px rgba(28,26,23,.08);

  --background: 45 18% 96%;
  --foreground: 36 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 36 10% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 36 10% 10%;
  --primary: 43 88% 47%;
  --primary-foreground: 45 100% 5%;
  --secondary: 43 20% 93%;
  --secondary-foreground: 36 10% 10%;
  --muted: 43 20% 93%;
  --muted-foreground: 35 7% 36%;
  --accent: 43 20% 93%;
  --accent-foreground: 36 10% 10%;
  --border: 45 6% 86%;
  --input: 45 6% 86%;
  --ring: 43 88% 47%;
  --destructive: 0 66% 47%;
  --destructive-foreground: 0 0% 98%;
}}
*{box-sizing:border-box}body{margin:0;background:var(--bg0);color:var(--t1);font:1rem/1.65 var(--font)}header,main,footer{max-width:72rem;margin:auto;padding:1.5rem}header{display:flex;justify-content:space-between;align-items:center}section{border-top:1px solid var(--l1);padding:1rem 0}img,video{max-width:100%;height:auto}a{color:var(--t1);text-decoration:underline}.cta{display:inline-block;text-decoration:none;font-weight:600;background:var(--gold);color:var(--on-gold);border-radius:var(--r2);padding:.65rem 1rem}a:focus-visible{outline:2px solid currentColor;outline-offset:3px}nav ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}h1,h2,h3{line-height:1.2}