@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@custom-variant dark (&:is(.dark *));
@source "../../**/*.{js,ts,jsx,tsx,mdx}";

@theme {
  --breakpoint-2xs: 23.75rem;
  --breakpoint-xs: 26.25rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

html,
body,
#app {
  height: 100%;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-scope-border: var(--scope-border);
  --color-scope-foreground: var(--scope-foreground);
  --color-scope: var(--scope);
  --color-tse-foreground: var(--tse-foreground);
  --color-tse: var(--tse);
  --color-support-engaged-foreground: var(--support-engaged-foreground);
  --color-support-engaged: var(--support-engaged);
  --color-support-to-approach-foreground: var(--support-to-approach-foreground);
  --color-support-to-approach: var(--support-to-approach);
  --color-support-disputed-foreground: var(--support-disputed-foreground);
  --color-support-disputed: var(--support-disputed);
  --color-support-remembered-foreground: var(--support-remembered-foreground);
  --color-support-remembered: var(--support-remembered);
  --color-support-negative-foreground: var(--support-negative-foreground);
  --color-support-negative: var(--support-negative);
  --color-estimate-confirmed-foreground: var(--estimate-confirmed-foreground);
  --color-estimate-confirmed: var(--estimate-confirmed);
  --color-estimate-pending-foreground: var(--estimate-pending-foreground);
  --color-estimate-pending: var(--estimate-pending);
  --color-cadence-overdue: var(--cadence-overdue);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

:root {
  --card: oklch(0.25 0.025 171);
  --card-foreground: oklch(0.98 0.004 197.1);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.01 223.9);
  --primary: oklch(0.9 0.14 143);
  --primary-foreground: oklch(0.2 0.015 171);
  --secondary: oklch(0.31 0.02 171);
  --secondary-foreground: oklch(0.98 0.004 197.1);
  --muted: oklch(0.29 0.02 171);
  --muted-foreground: oklch(0.9 0.01 197.1);
  --accent: oklch(0.34 0.025 171);
  --accent-foreground: oklch(0.98 0.004 197.1);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.7 0.015 197.1 / 20%);
  --input: oklch(0.7 0.015 197.1 / 20%);
  --ring: oklch(0.9 0.14 143);
  --chart-1: oklch(0.81 0.117 11.638);
  --chart-2: oklch(0.645 0.246 16.439);
  --chart-3: oklch(0.586 0.253 17.585);
  --chart-4: oklch(0.514 0.222 16.935);
  --chart-5: oklch(0.455 0.188 13.697);
  --radius: 0.875rem;
  --sidebar: oklch(0.25 0.025 171);
  --sidebar-foreground: oklch(0.98 0.004 197.1);
  --sidebar-primary: oklch(0.9 0.14 143);
  --sidebar-primary-foreground: oklch(0.2 0.015 171);
  --sidebar-accent: oklch(0.31 0.02 171);
  --sidebar-accent-foreground: oklch(0.98 0.004 197.1);
  --sidebar-border: oklch(0.7 0.015 197.1 / 20%);
  --sidebar-ring: oklch(0.9 0.14 143);
  --background: #ae1603;
  --foreground: oklch(0.98 0.004 197.1);
  --field-background: #ffffff;
  --field-foreground: #000000;
  --field-placeholder: rgb(0 0 0 / 80%);
  --field-border: rgb(255 255 255 / 80%);
  --field-disabled-background: rgb(255 255 255 / 70%);
  --field-disabled-foreground: rgb(0 0 0 / 70%);
  --field-icon: rgb(0 0 0 / 60%);
  /* Brand header bar. Defined on :root so it is inherited by every theme
     (including "editorial") and stays the same red regardless of palette. */
  --site-header: #ae1603;
  --site-header-foreground: #fff8f2;
  --site-header-muted: rgb(255 248 242 / 72%);
  --site-header-border: rgb(255 255 255 / 18%);
}

/* Light, neutral editorial palette for the public Posts pages (listings +
   article). Mirrors the shadcn token contract with a brand-red primary. */
[data-theme='editorial'] {
  --background: #f6f4f3;
  --foreground: #201b1a;
  --card: #ffffff;
  --card-foreground: #201b1a;
  --popover: #ffffff;
  --popover-foreground: #201b1a;
  --primary: #c51414;
  --primary-foreground: #ffffff;
  --secondary: #efe9e7;
  --secondary-foreground: #4a3f3d;
  --muted: #efe9e7;
  --muted-foreground: #6c615e;
  --accent: #f3edeb;
  --accent-foreground: #201b1a;
  --destructive: #b42318;
  --border: rgb(32 27 26 / 12%);
  --input: rgb(32 27 26 / 16%);
  --ring: #c51414;
}

/* Paleta da página de campanha 2026 (home pública jorgesolla1313).
   Extraída da geometria do rascunho Penpot (15/08/2026): vermelho #a21c1c,
   amarelo #ffe607, problema #47130e, bandeiras #ebe9e9, cards #f9faff.
   Aplicado via data-theme="campaign-site" no layout da home. */
[data-theme='campaign-site'] {
  --background: #ffffff;
  --foreground: #000000;
  --pt-red: #a21c1c;
  --pt-red-dark: #47130e;
  --pt-yellow: #ffe607;
  --pt-yellow-ink: #000000;
  --campaign-cream: #fff8f2;
  --campaign-ink: #000000;
  --campaign-muted: #6c615e;
  --campaign-surface: #f9faff;
  --campaign-band: #ebe9e9;
  --campaign-line: rgb(0 0 0 / 12%);
  --campaign-content-inset: clamp(20px, calc(25.36vw - 79.64px), 180px);
}

/* Campaign home geometry is interpolated between the approved Penpot boards.
   Copy stays in normal flow so browser text-spacing preferences can expand the
   hero; only the photographic composition is positioned absolutely. */
.campaign-hero {
  --campaign-hero-height: max(
    clamp(745px, calc(933.42px - 47.95vw), 780px),
    clamp(745px, calc(41.6vw + 581.51px), 901px)
  );
  min-height: var(--campaign-hero-height);
  height: auto;
}

.campaign-hero-stage {
  max-width: 1920px;
  min-height: var(--campaign-hero-height);
  height: auto;
}

/* Penpot uses the wide official lockup on phones/tablets. Its PNG canvas is
   square and mostly transparent, so the element follows the board geometry. */
.campaign-home-logo {
  --campaign-logo-size: clamp(356px, calc(38.93vw + 203px), 502px);
  top: clamp(-166px, calc(-11.47vw - 77.92px), -123px);
  left: clamp(0px, calc(33.6vw - 113.05px), 145px);
  width: var(--campaign-logo-size);
  height: var(--campaign-logo-size);
  background-image: url('/Prancheta%206%403x.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.campaign-hero-portrait {
  top: clamp(53px, calc(9.33vw + 16.32px), 88px);
  left: calc(50% - 211px + clamp(8.5px, calc(3.07vw - 3.55px), 20px));
  width: 422px;
  height: auto;
  aspect-ratio: 422 / 469;
}

.campaign-hero-portrait-image {
  top: -3.63%;
  left: 0.24%;
  width: 106.4%;
}

.campaign-hero-ally {
  z-index: 0;
  width: 177px;
  height: auto;
}

.campaign-hero-ally--rui {
  top: clamp(144px, calc(9.33vw + 107.32px), 179px);
  left: calc(50% - 218.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
}

.campaign-hero-ally--wagner {
  top: clamp(148px, calc(9.33vw + 111.32px), 183px);
  left: calc(50% - 265.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
}

.campaign-hero-ally--jeronimo {
  top: clamp(140px, calc(9.33vw + 103.32px), 175px);
  left: calc(50% + 27.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
}

.campaign-hero-ally--lula {
  top: clamp(179px, calc(9.33vw + 142.32px), 214px);
  left: calc(50% + 65.5px + clamp(0px, calc(3.07vw - 12.05px), 11.5px));
  z-index: 2;
  width: 216px;
}

.campaign-hero-overlay {
  top: clamp(300px, calc(9.33vw + 263.32px), 335px);
  left: 50%;
  width: 100vw;
  height: 245px;
  transform: translateX(-50%);
}

.campaign-hero-content {
  min-height: var(--campaign-hero-height);
  padding-top: clamp(462px, calc(9.33vw + 425.32px), 497px);
  padding-bottom: clamp(14px, calc(28.34px - 1.87vw), 21px);
}

.campaign-hero-title {
  width: min(100%, clamp(392px, calc(38.67vw + 240.04px), 537px));
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-size: clamp(32px, calc(4.27vw + 15.23px), 48px);
}

.campaign-hero-copy {
  width: min(calc(100% - 40px), clamp(327px, calc(24.8vw + 229.54px), 420px));
  margin-top: clamp(13px, calc(4.59vw - 4.73px), 30.5px);
  margin-left: clamp(20px, calc(31.2vw - 98.62px), 141px);
  font-size: clamp(14px, calc(1.07vw + 9.81px), 18px);
}

.campaign-hero-actions {
  width: max-content;
  margin-top: clamp(16px, calc(6.85vw - 5.92px), 31px);
  margin-right: clamp(18px, calc(52.27vw - 187.43px), 214px);
  margin-left: auto;
  gap: clamp(10px, calc(3.73vw - 4.67px), 24px);
}

.campaign-hero-action {
  min-height: clamp(44px, calc(4.27vw + 27.23px), 60px);
  height: auto;
  font-size: clamp(17px, calc(0.27vw + 15.95px), 18px);
}

.campaign-hero-action--secondary {
  width: clamp(145px, calc(3.47vw + 131.38px), 158px);
}

.campaign-hero-action--primary {
  width: clamp(112px, calc(12.27vw + 63.79px), 158px);
}

.campaign-hero-action-detail,
.campaign-hero-action-long {
  display: none;
}

.campaign-hero-accolades {
  width: max-content;
  margin-top: clamp(16px, calc(6.13vw - 8.09px), 39px);
  margin-right: clamp(18px, calc(5.07vw - 1.91px), 37px);
  margin-left: auto;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-size: clamp(10px, calc(0.53vw + 7.9px), 12px);
  line-height: 1.2;
}

.campaign-hero-accolade-secondary {
  display: none;
}

.campaign-proof {
  height: clamp(88px, calc(9.33vw + 51.32px), 123px);
}

.campaign-proof-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 23px;
}

.campaign-proof-value {
  font-size: clamp(24px, calc(3.2vw + 11.42px), 36px);
}

.campaign-proof-label {
  font-size: clamp(10px, calc(2.13vw + 1.62px), 18px);
  line-height: 1.15;
}

.campaign-problem {
  height: clamp(659px, calc(774.22px - 11.25vw), 730px);
}

.campaign-flags {
  height: clamp(368px, calc(419.93px - 5.08vw), 400px);
}

.campaign-section-eyebrow,
.campaign-section-title,
.campaign-section-copy {
  left: var(--campaign-content-inset);
}

.campaign-section-eyebrow {
  font-size: clamp(10px, calc(0.32vw + 8.75px), 12px);
  line-height: 1.25;
}

.campaign-section-title {
  font-size: clamp(22px, calc(0.32vw + 20.75px), 24px);
  line-height: 1.07;
}

.campaign-section-copy {
  font-size: clamp(14px, calc(0.32vw + 12.75px), 16px);
}

.campaign-problem-eyebrow {
  top: 35px;
}

.campaign-problem-title {
  top: clamp(59px, calc(1.11vw + 54.64px), 66px);
  width: min(
    calc(100% - var(--campaign-content-inset) - var(--campaign-content-inset)),
    clamp(331px, calc(45.17vw + 153.49px), 616px)
  );
}

.campaign-problem-copy {
  top: clamp(127px, calc(157.83px - 3.01vw), 146px);
  width: min(
    calc(100% - var(--campaign-content-inset) - 20px),
    clamp(327px, calc(61.65vw + 84.72px), 716px)
  );
}

.campaign-problem-carousel {
  top: clamp(191px, calc(278.63px - 8.56vw), 245px);
}

.campaign-flags-eyebrow {
  top: clamp(33px, calc(39.49px - 0.63vw), 37px);
}

.campaign-flags-title {
  top: clamp(62px, calc(68.49px - 0.63vw), 66px);
  width: min(
    calc(100% - var(--campaign-content-inset) - var(--campaign-content-inset)),
    clamp(331px, calc(52.77vw + 123.6px), 664px)
  );
}

.campaign-flags-copy {
  top: clamp(130px, calc(160.83px - 3.01vw), 149px);
  width: min(
    calc(100% - var(--campaign-content-inset) - 20px),
    clamp(327px, calc(63.87vw + 76px), 730px)
  );
}

.campaign-flags-carousel {
  top: clamp(215px, calc(285px - 17.81vw), 228px);
}

[data-theme='campaign-site'] [data-carousel='problem'] [data-carousel-track] {
  gap: clamp(10px, calc(1.74vw + 3.16px), 21px);
}

[data-theme='campaign-site'] [data-carousel='flags'] [data-carousel-track] {
  gap: clamp(10px, calc(0.63vw + 7.51px), 14px);
}

[data-theme='campaign-site'] [data-carousel-chips] {
  gap: clamp(6px, calc(0.16vw + 5.37px), 7px);
}

@media (min-width: 24.5625rem) {
  .campaign-flags-carousel {
    top: clamp(184px, calc(234.31px - 4.91vw), 215px);
  }
}

@media (min-width: 40rem) {
  .campaign-hero-action-detail,
  .campaign-hero-action-long {
    display: block;
  }

  .campaign-hero-action-short {
    display: none;
  }
}

@media (min-width: 64rem) {
  [data-theme='campaign-site'] {
    --campaign-desktop-portrait-width: clamp(465px, calc(26.45vw + 194.15px), 702px);
    --campaign-desktop-portrait-height: clamp(517px, calc(29.41vw + 215.84px), 781px);
    --campaign-desktop-hero-height: max(
      var(--campaign-desktop-portrait-height),
      clamp(477px, min(clamp(543px, 52.8vw, 1014px), calc(-16.79vw + 108.01dvh + 26.8px)), 871px)
    );
    --campaign-proof-min-height: clamp(124px, calc(244px - 9.38vw), 148px);
    --campaign-proof-max-height: clamp(148px, calc(6.81vw + 78.3px), 209px);
  }

  .campaign-hero {
    --campaign-hero-height: var(--campaign-desktop-hero-height);
  }

  .campaign-home-logo {
    top: clamp(55px, calc(15.23vw - 101px), 94px);
    left: clamp(47px, calc(6.64vw - 21px), 64px);
    width: clamp(197px, calc(23.44vw - 43px), 257px);
    height: clamp(150px, calc(17.97vw - 34px), 196px);
    transform: none;
    background-image: url('/Prancheta%203%403x.png');
    background-position: clamp(-56.75px, calc(-5.37vw + 12px), -43px)
      clamp(-87.55px, calc(-8.03vw + 15.2px), -67px);
    background-size: 143.65% 189.3%;
  }

  .campaign-hero-portrait {
    top: auto;
    bottom: 0;
    left: clamp(153px, calc(33.59vw - 191px), 239px);
    width: var(--campaign-desktop-portrait-width);
    aspect-ratio: 465 / 517;
  }

  .campaign-hero-portrait-image {
    top: -3.67%;
    left: 0.25%;
    width: 106.45%;
  }

  .campaign-hero-ally {
    top: auto;
    bottom: var(--campaign-ally-bottom, 0px);
    width: clamp(177px, calc(6.14vw + 93.16px), 211px);
  }

  .campaign-hero-ally--rui {
    left: clamp(-27px, calc(37.89vw - 415px), 70px);
    --campaign-ally-bottom: clamp(67px, calc(102px - 2.73vw), 74px);
  }

  .campaign-hero-ally--wagner {
    left: clamp(-75px, calc(37.89vw - 463px), 22px);
    --campaign-ally-bottom: 0px;
    z-index: 1;
  }

  .campaign-hero-ally--jeronimo {
    left: clamp(63px, calc(31.25vw - 257px), 143px);
    --campaign-ally-bottom: clamp(49px, calc(1.56vw + 33px), 53px);
    z-index: 1;
  }

  .campaign-hero-ally--lula {
    left: clamp(-8px, calc(37.89vw - 396px), 89px);
    width: clamp(238px, calc(8.3vw + 124.6px), 284px);
    --campaign-ally-bottom: 0px;
  }

  .campaign-hero-overlay {
    display: none;
  }

  .campaign-hero-content {
    --campaign-hero-content-right: clamp(47px, calc(40.23vw - 365px), 150px);
    padding-top: clamp(106px, calc(8.2vw + 22px), 127px);
    padding-bottom: 11px;
  }

  .campaign-hero-title {
    width: 392px;
    margin-right: var(--campaign-hero-content-right);
    margin-left: auto;
    text-align: right;
    font-size: 36px;
    line-height: 1.2;
  }

  .campaign-hero-copy {
    width: 418px;
    margin-top: 19.6px;
    margin-right: var(--campaign-hero-content-right);
    margin-left: auto;
    text-align: right;
    font-size: 18px;
  }

  .campaign-hero-actions {
    margin-top: 29px;
    margin-right: var(--campaign-hero-content-right);
    margin-left: auto;
    gap: 24px;
  }

  .campaign-hero-action {
    width: 158px;
    min-height: 60px;
    height: auto;
    font-size: 18px;
  }

  .campaign-hero-action-detail,
  .campaign-hero-action-long,
  .campaign-hero-accolade-secondary {
    display: block;
  }

  .campaign-hero-action-short {
    display: none;
  }

  .campaign-hero-accolades {
    margin-top: clamp(64px, calc(169px - 8.2vw), 85px);
    margin-right: 0;
    margin-left: 559px;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 12px;
    line-height: 15px;
  }

  .campaign-proof {
    height: clamp(
      var(--campaign-proof-min-height),
      calc(100dvh - var(--campaign-desktop-hero-height)),
      var(--campaign-proof-max-height)
    );
  }

  .campaign-proof-list {
    grid-template-columns: 147px 178px 183px;
    align-items: start;
    justify-content: space-between;
    gap: 0;
    padding-top: clamp(17px, calc(47px - 2.34vw), 23px);
  }

  .campaign-proof-value {
    font-size: 36px;
    line-height: 1.1;
  }

  .campaign-proof-label {
    font-size: 18px;
    line-height: 1.25;
  }
}

@media (min-width: 80rem) {
  .campaign-hero-portrait {
    left: clamp(239px, calc(100vw - 1041px), 325px);
  }

  .campaign-home-logo {
    top: clamp(45px, calc(823.3px - 56.98vw), 94px);
    left: clamp(64px, calc(8.14vw - 40.19px), 71px);
    width: clamp(257px, calc(43.02vw - 293.7px), 294px);
    height: clamp(196px, calc(32.56vw - 220.74px), 224px);
    background-position: clamp(-64.92px, calc(64.85px - 9.5vw), -56.75px)
      clamp(-100.05px, calc(98.5px - 14.54vw), -87.55px);
  }

  .campaign-hero-ally--rui {
    left: clamp(70px, calc(83.72vw - 1001.63px), 142px);
    --campaign-ally-bottom: clamp(64px, calc(111.65px - 3.49vw), 67px);
  }

  .campaign-hero-ally--wagner {
    left: clamp(22px, calc(87.21vw - 1094.28px), 97px);
    --campaign-ally-bottom: 0px;
  }

  .campaign-hero-ally--jeronimo {
    left: clamp(143px, calc(93.02vw - 1047.7px), 223px);
    --campaign-ally-bottom: clamp(49px, calc(112.53px - 4.65vw), 53px);
  }

  .campaign-hero-ally--lula {
    left: clamp(89px, calc(87.21vw - 1027.28px), 164px);
    --campaign-ally-bottom: 0px;
  }

  .campaign-hero-content {
    --campaign-hero-content-right: clamp(150px, calc(72.09vw - 772.8px), 212px);
    padding-top: clamp(106px, calc(439.56px - 24.42vw), 127px);
  }

  .campaign-hero-accolades {
    margin-top: clamp(64px, calc(122.09vw - 1498.8px), 169px);
    margin-left: clamp(559px, calc(186.05vw - 1822.4px), 719px);
  }

  .campaign-proof-list {
    padding-top: clamp(17px, calc(19.77vw - 236.02px), 34px);
  }
}

@media (min-width: 85.375rem) {
  .campaign-hero-portrait {
    left: clamp(325px, calc(35.92vw - 165.7px), 524px);
  }

  .campaign-home-logo {
    top: clamp(45px, calc(7.4vw - 56.1px), 86px);
    left: clamp(71px, calc(22.38vw - 234.8px), 195px);
    width: clamp(294px, calc(16.43vw + 69.6px), 385px);
    height: clamp(224px, calc(12.64vw + 51.4px), 294px);
    background-position: clamp(-85px, calc(-3.63vw - 15.35px), -64.92px)
      clamp(-131px, calc(-5.6vw - 23.6px), -100.05px);
  }

  .campaign-hero-ally--rui {
    left: clamp(142px, calc(30.51vw - 274.7px), 311px);
    --campaign-ally-bottom: clamp(64px, calc(2.17vw + 34.4px), 76px);
  }

  .campaign-hero-ally--wagner {
    left: clamp(97px, calc(28.88vw - 297.5px), 257px);
    --campaign-ally-bottom: 0px;
  }

  .campaign-hero-ally--jeronimo {
    left: clamp(223px, calc(35.56vw - 262.8px), 420px);
    --campaign-ally-bottom: clamp(49px, calc(1.44vw + 29.27px), 57px);
  }

  .campaign-hero-ally--lula {
    left: clamp(164px, calc(32.31vw - 277.4px), 343px);
    --campaign-ally-bottom: 0px;
  }

  .campaign-hero-content {
    --campaign-hero-content-right: clamp(212px, calc(1.44vw + 192.27px), 220px);
    padding-top: clamp(106px, calc(15.16vw - 101.1px), 190px);
    padding-bottom: clamp(7px, calc(24.32px - 0.9vw), 12px);
  }

  .campaign-hero-title {
    width: clamp(392px, calc(38.81vw - 138.1px), 607px);
    font-size: clamp(36px, calc(2.17vw + 6.41px), 48px);
  }

  .campaign-hero-copy {
    width: clamp(418px, calc(26.71vw + 53.05px), 566px);
    margin-top: clamp(19.6px, calc(3.83vw - 32.68px), 40.8px);
    font-size: clamp(18px, calc(1.08vw + 3.2px), 24px);
  }

  .campaign-hero-actions {
    margin-top: clamp(29px, calc(6.68vw - 62.23px), 66px);
    gap: clamp(24px, calc(0.36vw + 19.07px), 26px);
  }

  .campaign-hero-action {
    width: clamp(158px, calc(2.89vw + 118.55px), 174px);
    min-height: clamp(60px, calc(1.08vw + 45.2px), 66px);
    height: auto;
    font-size: clamp(18px, calc(0.36vw + 13.07px), 20px);
  }

  .campaign-hero-accolades {
    margin-top: clamp(169px, calc(5.87vw + 88.76px), 201.5px);
    margin-left: clamp(719px, calc(73.83vw - 289.5px), 1128px);
    font-size: clamp(11px, calc(0.36vw + 7.07px), 14px);
    line-height: 1.2;
  }

  .campaign-proof-list {
    padding-top: clamp(30px, calc(1.08vw + 19.2px), 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme='campaign-site'] [data-carousel-track] {
    scroll-behavior: auto;
  }
}

/* Full-bleed carousel viewport with content-aligned first cards. The scroller
   reaches both browser edges; only its initial item follows the page gutter. */
[data-theme='campaign-site'] [data-carousel] {
  --campaign-carousel-inset: var(--campaign-content-inset);
}

[data-theme='campaign-site'] [data-carousel-track],
[data-theme='campaign-site'] [data-carousel-chips] {
  padding-left: var(--campaign-carousel-inset);
  padding-right: var(--campaign-carousel-inset);
}

[data-theme='campaign-site'] [data-carousel-track] {
  scroll-padding-left: var(--campaign-carousel-inset);
}

.campaign-action-feedback {
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease-out,
    background-color 180ms ease-out,
    filter 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .campaign-action-feedback:hover {
    transform: scale(1.05);
  }
}

.campaign-action-feedback:active {
  opacity: 0.8;
  transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .campaign-action-feedback {
    transition: none;
  }

  .campaign-action-feedback:hover,
  .campaign-action-feedback:active {
    transform: none;
  }
}

@media (min-width: 64rem) {
  [data-theme='campaign-site'] {
    --campaign-content-inset: max(180px, calc((100vw - 1152px) / 2 + 32px));
  }
}

[data-theme='petition'] {
  --background: #fff8f2;
  --foreground: #2c2522;
  --card: #ffffff;
  --card-foreground: #2c2522;
  --popover: #ffffff;
  --popover-foreground: #2c2522;
  --primary: #c51414;
  --primary-foreground: #ffffff;
  --secondary: #ffe8df;
  --secondary-foreground: #5f1715;
  --muted: #f4e7de;
  --muted-foreground: #675c56;
  --accent: #ffcf2e;
  --accent-foreground: #332300;
  --border: rgb(189 119 104 / 24%);
  --input: rgb(189 119 104 / 32%);
  --ring: #c51414;
  --destructive: #b42318;
  --petition-hero: #b6120f;
  --petition-hero-foreground: #fffaf5;
  --petition-hero-muted: #ffe2d6;
  --petition-hero-chip: rgb(255 255 255 / 12%);
  --petition-hero-chip-foreground: #fff7ed;
  --petition-hero-glow: rgb(255 207 46 / 24%);
  --petition-hero-depth: rgb(122 0 0 / 35%);
  --petition-hero-cta: #ffcf2e;
  --petition-hero-cta-foreground: #332300;
  --petition-form-section: #f6ebe4;
  --field-background: #ffffff;
  --field-foreground: #2c2522;
  --field-placeholder: rgb(44 37 34 / 58%);
  --field-border: #ddc7bc;
  --field-disabled-background: #ece0d9;
  --field-disabled-foreground: rgb(44 37 34 / 55%);
  --field-icon: rgb(44 37 34 / 58%);
}

/* Clean, neutral light palette for the internal /campanha area (login +
   management panel). Mirrors the shadcn token contract with a brand-red
   primary and defines the --field-* tokens so the custom Input renders with a
   visible border on the white card. Applied via data-theme="campaign" on the
   (campaign) layout, so it never affects the public (frontend) pages. */
[data-theme='campaign'] {
  --radius: 0.5rem;
  --background: #ffffff;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --popover: #ffffff;
  --popover-foreground: #1c1917;
  --primary: #c51414;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f4;
  --secondary-foreground: #292524;
  --muted: #f4f4f5;
  --muted-foreground: #6b7280;
  --accent: #f4f4f5;
  --accent-foreground: #1c1917;
  --destructive: #b42318;
  --border: rgb(28 25 23 / 12%);
  --input: rgb(28 25 23 / 16%);
  --ring: #c51414;
  --field-background: #ffffff;
  --field-foreground: #1c1917;
  --field-placeholder: rgb(28 25 23 / 50%);
  --field-border: #d6d3d1;
  --field-disabled-background: #f5f5f4;
  --field-disabled-foreground: rgb(28 25 23 / 55%);
  --field-icon: rgb(28 25 23 / 55%);
  /* Light rail for the campaign app shell (not the public-site dark sidebar). */
  --sidebar: #fafaf9;
  --sidebar-foreground: #1c1917;
  --sidebar-primary: #c51414;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5f5f4;
  --sidebar-accent-foreground: #1c1917;
  --sidebar-border: rgb(28 25 23 / 12%);
  --sidebar-ring: #c51414;
  --scope: #fff5ed;
  --scope-foreground: #6b2d15;
  --scope-border: #e8c5ae;
  --tse: #f1f3f5;
  --tse-foreground: #3f4854;
  --support-engaged: #dcfce7;
  --support-engaged-foreground: #166534;
  --support-to-approach: #eef0f3;
  --support-to-approach-foreground: #46505c;
  --support-disputed: #fef3c7;
  --support-disputed-foreground: #92400e;
  --support-remembered: #e0e7ff;
  --support-remembered-foreground: #3730a3;
  --support-negative: #fee2e2;
  --support-negative-foreground: #991b1b;
  --estimate-confirmed: #dcfce7;
  --estimate-confirmed-foreground: #166534;
  --estimate-pending: #fef3c7;
  --estimate-pending-foreground: #92400e;
  --cadence-overdue: #b42318;
}

[data-theme='campaign']
  :is(
    [data-slot='input'],
    [data-slot='input-group'],
    [data-slot='combobox-trigger'],
    [data-slot='native-select'],
    [data-slot='select-trigger']
  ) {
  border-radius: var(--radius-md);
}

/* B183 — Safari iOS auto-zooms any form control whose computed font-size is
   below 16px when focused, and a standalone PWA does not always restore the
   scale when the keyboard closes. One unlayered rule for touch phones (coarse
   pointer, no hover) keeps every campaign input — omnibox, Command search,
   native selects, textareas — at the 16px threshold in any orientation, while
   desktop keeps its own size utilities (unlayered beats the utilities layer). */
@media (pointer: coarse) and (hover: none) {
  [data-theme='campaign'] :is(input, select, textarea, [contenteditable='true']) {
    font-size: 1rem;
  }
}

/* The public-site base `h1` is centered + display-sized for article heroes.
   Campaign dashboard headings are left-aligned section titles, so undo the
   base centering and text balancing here; each heading keeps its own
   size/weight utility classes. The base `p { not-first:mt-6 }` is also for
   article body flow — campaign layouts space subtitles via flex gap, so the
   extra top margin would stack on top of the gap and create a large gap
   between a title and its subtitle. */
[data-theme='campaign'] h1 {
  text-align: left;
  text-wrap: initial;
}

[data-theme='campaign'] p {
  margin-top: 0;
}

/*
 * Cropped full-width Solla mark for the campaign sidebar.
 * Source SVG viewBox is 430.9×300.5 but ink sits roughly in y 134–188 —
 * size the box to ink height and pin the mask on the ink’s vertical center.
 */
.campaign-logo {
  aspect-ratio: 430.9 / 64;
  mask-image: url(/LOGO_SOLLA_BRANCO.svg);
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  /* Ink vertical center ≈ (134.4 + 187.8) / 2 / 300.5 */
  mask-position: center 53.6%;
  -webkit-mask-image: url(/LOGO_SOLLA_BRANCO.svg);
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center 53.6%;
}

.dark {
  --background: oklch(0.148 0.004 228.8);
  --foreground: oklch(0.987 0.002 197.1);
  --card: oklch(0.218 0.008 223.9);
  --card-foreground: oklch(0.987 0.002 197.1);
  --popover: oklch(0.218 0.008 223.9);
  --popover-foreground: oklch(0.987 0.002 197.1);
  --primary: oklch(0.925 0.005 214.3);
  --primary-foreground: oklch(0.218 0.008 223.9);
  --secondary: oklch(0.275 0.011 216.9);
  --secondary-foreground: oklch(0.987 0.002 197.1);
  --muted: oklch(0.275 0.011 216.9);
  --muted-foreground: oklch(0.723 0.014 214.4);
  --accent: oklch(0.275 0.011 216.9);
  --accent-foreground: oklch(0.987 0.002 197.1);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.56 0.021 213.5);
  --chart-1: oklch(0.81 0.117 11.638);
  --chart-2: oklch(0.645 0.246 16.439);
  --chart-3: oklch(0.586 0.253 17.585);
  --chart-4: oklch(0.514 0.222 16.935);
  --chart-5: oklch(0.455 0.188 13.697);
  --sidebar: oklch(0.218 0.008 223.9);
  --sidebar-foreground: oklch(0.987 0.002 197.1);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
  --sidebar-accent: oklch(0.275 0.011 216.9);
  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.56 0.021 213.5);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply text-foreground;
    background-color: var(--background);
    background-image: linear-gradient(to top, #ae1603 0%, #c86112 100%);
  }

  h1 {
    @apply scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance;
  }

  h2 {
    @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
  }

  h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
  }

  h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight;
  }

  p {
    @apply leading-7 not-first:mt-6;
  }

  blockquote {
    @apply mt-6 border-l-2 pl-6 italic;
  }

  ul {
    @apply my-6 ml-6 list-disc [&>li]:mt-2;
  }

  code {
    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
  }

  small {
    @apply text-sm leading-none font-medium;
  }

  button,
  select {
    cursor: pointer;
  }

  html {
    @apply font-sans;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  /* B167 — the chat Panel's footprint is hidden by this class instead of RRP's
     imperative collapse: `display:none !important` beats the `display:flex`
     react-resizable-panels writes inline on the Panel element on every render,
     so hiding survives RRP's own (async, viewport-driven) re-layouts. */
  .b167-ai-chat-hidden {
    display: none !important;
  }
}

/* MARK: Calendar (shadcn radix-nova) — cell geometry tokens for the day grid.
   `--cell-size`/`--cell-radius` are consumed by ui/calendar.tsx classNames. */
.cn-calendar {
  @apply p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)];
}

.cn-calendar-dropdown-root {
  @apply border-input has-focus:ring-ring/50 border has-focus:border-ring has-focus:ring-3;
}

.cn-calendar-caption-label {
  @apply h-6 pr-1 pl-1.5;
}

/* E16 — municipality dossier print view: compact A4 typography (one step down
   the DESIGN.md ramp: body text-sm→text-xs, section titles text-base→text-sm),
   sections kept whole across page breaks. Chrome hiding lives in `print:`
   utilities on the campaign layout/components; this block only tunes the
   dossier itself. */
@media print {
  @page {
    size: A4;
    margin: 14mm;
  }
  html,
  body,
  #app {
    height: auto;
  }

  [data-dossier] {
    font-size: 0.75rem;
    gap: 0.75rem;
  }

  [data-dossier] section {
    break-inside: avoid;
    padding: 0.75rem;
  }

  [data-dossier] h2 {
    font-size: 0.875rem;
  }

  [data-dossier] a {
    text-decoration: none;
    color: inherit;
  }

  /* Badges carry meaning by fill (prioridade, tendência, classe territorial);
     without this the printer drops the background and every badge prints as
     identical grey text. */
  [data-dossier] [data-slot='badge'] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    border: 1px solid rgb(0 0 0 / 20%);
  }
}