@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLDz8Z1xlE92JQEk.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/pxiEyp8kv8JHgFVrJJfedHFHGPc.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlE92JQEk.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlE92JQEk.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/pxiByp8kv8JHgFVrLCz7Z1xlE92JQEk.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto/roboto-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Kit de marca JuristIA (apresentação). */
  --navy: #0a2240;
  --ink: #0a2240;
  --blue: #0071ce;
  --blue-dark: #00416b;
  /* Exclusivo do banner de cookies — ver cânone §2.4.1. */
  --blue-cookie: #1863dc;
  --green: #45deb0;
  --line: #e2e8ef;
  --claude: #d97757;
  --course-orange: #d97757;
  --course-orange-dark: #b85d42;
  --course-orange-soft: #fff0e9;
  /* #707070 tem contraste de 4.95:1 sobre branco (WCAG AA). */
  --gray: #707070;
  --surface: #f5f7fa;
  --white: #fff;
  --shadow: 0 18px 45px rgba(10, 34, 64, 0.12);
  --radius-pill: 999px;
  /* Escala tipográfica (cânone §2.5): quatro passos de título, um clamp cada.
     A 1280px resolvem para 56 / 44 / 35 / 20px. */
  --fs-hero-lg: clamp(36px, 5.2vw, 56px);
  --fs-hero: clamp(32px, 3.6vw, 44px);
  --fs-h2: clamp(28px, 2.9vw, 35px);
  --fs-h3: 20px;
  --fs-lead: clamp(20px, 2vw, 24px);
  --container: 1170px;
  --hero-grid: 1170px;
  --section-space: clamp(72px, 6.95vw, 100px);
  --grid-gap: clamp(24px, 2.1vw, 30px);
  --card-padding: clamp(24px, 2.4vw, 34px);
  --font: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --hero-font: 'Roboto', Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--gray);
  background: var(--white);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection {
  color: var(--white);
  background: var(--blue);
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p:last-child { margin-bottom: 0; }

.container {
  width: min(calc(100% - 30px), var(--container));
  margin-inline: auto;
}
.section { padding: var(--section-space) 0; background: var(--white); }
.section.soft { background: var(--surface); }
.section.dark { color: var(--white); background: var(--ink); }
.section.dark h1, .section.dark h2, .section.dark h3 { color: var(--white); }
.section.center { text-align: center; }
.section-heading { max-width: var(--container); margin: 0 auto 40px; text-align: center; }
.section-heading h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
}
.section-heading p:not(.eyebrow) { max-width: 670px; margin-inline: auto; font-size: 18px; line-height: 23px; }
.eyebrow {
  margin-bottom: 20px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 19.2px;
  text-transform: uppercase;
}
.eyebrow.light { color: var(--white); }
.accent { color: var(--blue); }
.lead { font-size: 18px; line-height: 1.5; }
.button {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 2px solid var(--blue);
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:hover { color: var(--white); background: var(--blue-dark); border-color: var(--blue-dark); }

.button-secondary {
  /* mesma pílula, contorno */
  color: var(--blue);
  background: transparent;
  border-color: var(--blue);
}
.button-secondary:hover { color: var(--white); background: var(--blue); }
.section.dark .button-secondary,
.page-hero .button-secondary,
.home-hero .button-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
}
.section.dark .button-secondary:hover,
.page-hero .button-secondary:hover,
.home-hero .button-secondary:hover {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.link {
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: var(--blue-dark); }
.section.dark .link, .page-hero .link { color: var(--white); }

.tag {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.tag-live { color: var(--blue-dark); background: rgba(0, 113, 206, .1); }
.tag-beta { color: #a04f36; background: rgba(217, 119, 87, .16); }
.tag-soon { color: #5f6b78; background: var(--line); }
.tag-claude { color: #a04f36; background: rgba(217, 119, 87, .16); }
.tag-claude::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--claude);
  content: '';
}

.button:focus-visible,
.button-secondary:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.split.align-top { align-items: start; }
.split.reverse > :first-child { order: 2; }
.split img { width: 100%; max-height: 620px; object-fit: contain; }
.home-about .split { align-items: start; }
.home-about .split h2,
.home-knowledge .split h2 {
  margin-bottom: 30px;
  font-size: var(--fs-h2);
  line-height: 50px;
  letter-spacing: -1.35px;
}
.home-about .lead { margin-bottom: 18px; line-height: 1.6; }
/* Seção dark: branco translúcido no lugar de --gray, que não contrasta sobre navy. */
.home-about .split > :last-child > p:not(.lead) { margin-bottom: 0; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.home-about .split .button { margin-top: 30px; }
.home-about .split > :first-child .button { margin-top: 0; }
.home-knowledge .split > :last-child > p:not(.eyebrow) { margin-bottom: 27px; line-height: 23px; }
.home-knowledge .split .button { margin-top: 30px; }
.home-solutions .section-heading { margin-bottom: 50px; }
.home-solutions .media-card-body { padding-top: 40px; }
.home-solutions .cards-action { margin-top: 50px; }
.home-tools .section-heading { margin-bottom: 70px; }
.home-tools .media-card > img { width: calc(100% - 30px); margin-inline: auto; }
.home-tools .media-card { display: flex; flex-direction: column; }
.home-tools .media-card-body {
  display: flex;
  width: calc(100% - 30px);
  flex: 1;
  flex-direction: column;
  margin-inline: auto;
  padding-top: 40px;
}
.home-tools .media-card-body p { margin-bottom: 20px; }
.home-tools .media-card .button { align-self: center; margin-top: auto; }
.card-grid.product-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solution-product { background: var(--surface); }
.solution-product-grid { gap: 70px; }
.solution-product-copy { max-width: 570px; }
.solution-product-copy h2 {
  margin-bottom: 22px;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: 1.1;
}
.solution-product-lead {
  margin-bottom: 24px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
}
.solution-product-copy > p:not(.eyebrow):not(.solution-product-lead) { line-height: 1.55; }
.solution-product-copy > p + p { margin-top: 20px; }
.solution-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }

@keyframes home-pop-up {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes home-book-in {
  from { opacity: 0; transform: translateX(-140px); }
  to { opacity: 1; transform: translateX(0); }
}

html.motion-ready [data-motion="pop"] { opacity: 0; transform: scale(0.96); }
html.motion-ready [data-motion="pop"].motion-visible {
  animation: home-pop-up 800ms ease-in forwards;
}
html.motion-ready [data-motion="book"] { opacity: 0; transform: translateX(-140px); }
html.motion-ready [data-motion="book"].motion-visible {
  animation: home-book-in 900ms cubic-bezier(.22, .61, .36, 1) forwards;
}

@media (min-width: 821px) {
  .home-knowledge .split { align-items: start; }
  .home-knowledge .split > :last-child { padding-top: 30px; }
}
.check-list { padding: 0; list-style: none; }
.check-list li { position: relative; margin: 14px 0; padding-left: 30px; }
.check-list li::before { position: absolute; left: 0; color: var(--blue); content: '✓'; font-weight: 700; }

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--blue);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  min-height: 80px;
  color: var(--white);
  /* Navy sólido como no WP (#0a2240), para contrastar com o vídeo do hero. */
  background: var(--navy);
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.header-inner {
  display: flex;
  width: min(calc(100% - 30px), var(--container));
  min-height: 80px;
  align-items: center;
  margin: 0 auto;
  gap: 18px;
}
.brand { flex: 0 0 58px; }
.brand img { width: 50px; height: 54px; object-fit: contain; }
.desktop-nav { display: flex; flex: 1; align-items: stretch; justify-content: center; gap: 0; }
.desktop-nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px 22px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav a:hover { color: var(--blue); }
.desktop-nav a[aria-current='page'] { color: var(--blue); }
.desktop-nav a[aria-current='page']::after {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateX(-50%);
  content: '';
}
.header-socials { display: flex; align-items: center; gap: 14px; }
.header-socials a {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--white);
  text-decoration: none;
}
.header-socials a:hover { color: var(--blue); }
.header-socials svg { width: 18px; height: 18px; fill: currentColor; }

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 0;
  background: transparent;
}
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 6px 0; background: var(--white); }
.mobile-menu {
  position: fixed;
  z-index: 1010;
  top: 0;
  right: 0;
  width: min(88vw, 420px);
  height: 100dvh;
  padding: 28px;
  background: var(--ink);
  box-shadow: -24px 0 50px rgba(0, 0, 0, 0.2);
}
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.mobile-menu-head img { width: 170px; height: auto; }
.menu-close { border: 0; color: var(--white); background: transparent; font-size: 2.5rem; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--white); text-decoration: none; }
.mobile-menu nav a[aria-current='page'] { color: var(--blue); }
.menu-backdrop { position: fixed; z-index: 1005; inset: 0; border: 0; background: rgba(10,34,64,.6); }

.home-hero {
  /* Reserva a altura visual do cabeçalho antes do vídeo, como no site atual. */
  --hero-header-h: 80px;
  --hero-video-h: calc(100svh - var(--hero-header-h));
  --hero-base-w: 1240;
  --hero-base-h: 700;
  position: relative;
  width: 100%;
  /* `min-height`, nunca `height`: com altura fixa e `overflow: hidden`, em
     janela de menos de ~810px o botão "Conheça o Escritório JuristIA" caía
     fora e sumia — a ação principal da Home, invisível, sem nenhum aviso. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--navy) url('/assets/hero/banner-home.jpg') center/cover no-repeat;
}
.home-hero::after {
  position: absolute;
  top: var(--hero-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,34,64,.18), rgba(10,34,64,.42) 45%, rgba(10,34,64,.68));
  content: '';
  pointer-events: none;
}
.hero-video {
  position: absolute;
  top: var(--hero-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  /* topo e base fixam a altura: o vídeo cobre o herói mesmo quando ele cresce. */
  height: auto;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
  transform-origin: center center;
}
/* Grid em fluxo, não peças em coordenada absoluta dentro de um palco de
   1240×700. As posições fixas (lockup em 352/102, copy em 330/602) supunham
   que o conteúdo nunca mudaria de tamanho; qualquer linha a mais empurrava o
   botão para fora do recorte. Abaixo de 1199px o site já fazia assim. */
.hero-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 5vw, 88px);
  align-items: center;
  width: min(calc(100% - 30px), calc(var(--hero-base-w) * 1px));
  min-height: 100svh;
  margin-inline: auto;
  padding: calc(var(--hero-header-h) + 56px) 0 64px;
}
.hero-lockup {
  position: static;
  width: min(100%, 390px);
  height: auto;
}
.hero-copy {
  position: static;
  width: min(100%, 520px);
  font-family: var(--hero-font);
}
.hero-copy h1 {
  margin: 0 0 26px;
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-hero-lg);
  font-weight: 600;
  letter-spacing: -1.35px;
  /* Sem unidade: a fonte é `clamp(36px, 5.2vw, 56px)` e a linha fixa em 50px
     dava entrelinha NEGATIVA no topo da escala — as quatro linhas do título
     se tocavam. */
  line-height: 1.06;
}
.hero-copy p {
  margin: 0;
  color: var(--white);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
}
.hero-copy .hero-note {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
}
.hero-copy .button {
  margin-top: 48px;
}
.page-hero {
  display: grid;
  min-height: 420px;
  align-items: center;
  padding: clamp(96px, 9.72vw, 140px) 0 clamp(64px, 6.25vw, 90px);
  color: var(--white);
  background: var(--navy);
}
.page-hero.page-hero-split {
  background: var(--navy);
}
.page-hero h1 {
  max-width: 850px;
  margin-bottom: 0;
  color: var(--white);
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.page-hero .eyebrow {
  margin-bottom: 20px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
}
.page-hero-lead {
  margin: 0 0 16px;
  color: var(--white);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.3;
}
.page-hero-copy {
  max-width: 560px;
  margin-top: 0;
  margin-bottom: 18px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
}
.page-hero .button { margin-top: 28px; }
.page-hero-standard {
  min-height: 410px;
  padding: 124px 0 58px;
}
.page-hero-standard .split {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 7vw, 104px);
}
.page-hero-standard h1 {
  max-width: 560px;
  font-size: var(--fs-hero);
  line-height: 1.12;
}
.page-hero-standard .page-hero-content { max-width: 540px; }
.page-hero-standard .page-hero-copy {
  max-width: 520px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.45;
}
.page-hero-standard .button { margin-top: 24px; }
.office-hero.page-hero-standard {
  min-height: 350px;
  padding-bottom: 44px;
}
.office-demo { background: var(--surface); }
.office-demo .section-heading { max-width: 900px; }
.office-demo-frame {
  max-width: 1040px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--navy);
  box-shadow: var(--shadow);
}
.office-demo-player { position: relative; }
.office-demo-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--navy); }
.office-demo-actions {
  display: flex;
  justify-content: center;
  padding: 18px;
  background: var(--white);
}
.office-demo-start {
  min-width: 220px;
  box-shadow: 0 12px 28px rgba(10,34,64,.28);
}
.office-demo-start[hidden] { display: none; }
.office-demo-frame figcaption {
  padding: 14px 18px;
  color: rgba(255,255,255,.82);
  background: var(--navy);
  font-size: 14px;
  line-height: 1.5;
}
.office-demo-summary {
  max-width: 1040px;
  margin: 22px auto 0;
  border: 1px solid var(--line);
  background: var(--white);
}
.office-demo-summary summary {
  padding: 18px 22px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
}
.office-demo-summary > div { padding: 0 22px 22px; }
.office-demo-summary .check-list { margin-block: 18px; }
.ebook-related { background: var(--white); }
.ebook-related-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(15, 23, 42, .12);
  border-left: 4px solid var(--blue);
  background: var(--surface);
}
.ebook-related-card h2 { max-width: 720px; margin-bottom: 12px; font-size: var(--fs-h2); }
.ebook-related-card p:not(.eyebrow) { max-width: 760px; color: #5f6b78; }
.ebook-related-card .button { white-space: nowrap; }

/* Mesma família tipográfica das demais seções: navy, peso 600. O azul fica
   para o subtítulo, evitando dois pesos 700 empilhados que destoavam do site. */
.service-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
}
.service-subtitle {
  margin-bottom: 22px;
  color: var(--blue);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.service-figure { width: min(100%, 420px); margin-inline: auto; }
.service-nav { border-bottom: 1px solid var(--line); }
.service-nav .container { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-block: 24px; }
.service-nav a { color: var(--blue); font-weight: 600; text-underline-offset: 5px; }
.service-nav a:hover { text-decoration: underline; }
.service-section { scroll-margin-top: 32px; }
.service-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 72px; align-items: start; }
.service-heading .service-figure { display: block; width: 220px; max-width: 100%; height: auto; margin: 28px 0 0; }
.service-copy { max-width: 680px; }
.service-copy .lead { color: var(--ink); }
.service-copy h3 { margin: 28px 0 16px; font-size: var(--fs-h3); }
.service-copy .service-scope { margin: 24px 0; font-size: 16px; }
.service-steps { padding-left: 24px; }
.service-steps li { padding-left: 8px; margin-bottom: 16px; }
.service-steps li::marker { color: var(--blue); font-weight: 600; }
@media (max-width: 820px) {
  .service-layout { grid-template-columns: 1fr; gap: 24px; }
  .service-heading { position: relative; padding-right: 86px; min-height: 72px; }
  .service-heading .service-figure { position: absolute; right: 0; top: 0; width: 64px; margin: 0; }
  .service-nav .container { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.options-list { max-width: 920px; margin: 0 auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.center { text-align: center; }
.center > p { max-width: 760px; margin-inline: auto; }
.page-start { padding-top: 170px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: stretch; }
.compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; margin-inline: auto; }
.media-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-radius: 0; background: transparent; box-shadow: none; }
.media-card > img { width: 100%; aspect-ratio: 1.75; object-fit: cover; }
.media-card-body { display: flex; flex: 1; flex-direction: column; padding: 28px 0 0; text-align: center; }
.media-card-body h3 {
  margin: 0 0 20px;
  color: var(--blue);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 25px;
}
.media-card-body p { margin-bottom: 0; }
.media-card .button { align-self: center; margin-top: auto; }
.section.dark .media-card-body h3 { color: var(--white); }
.section.dark .media-card-body p { color: rgba(255,255,255,.8); }
.cards-action { margin-top: 42px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: stretch; }
.step-card { display: flex; min-width: 0; flex-direction: column; height: 100%; padding: var(--card-padding); border: 1px solid rgba(10,34,64,.08); background: var(--white); box-shadow: var(--shadow); }
.step-card p { flex: 1; }
.step-number { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 24px; border-radius: 50%; color: var(--white); background: var(--blue); font-weight: 700; }
.faq { display: grid; max-width: 850px; margin: auto; gap: 12px; }
.faq details { border: 1px solid var(--line); background: var(--white); }
/* O marcador é desenhado: `<summary>` sem `list-style` cai no triângulo
   padrão do navegador, que não existe em nenhum outro lugar do site e muda
   de desenho entre Safari, Chrome e Firefox. */
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  content: '';
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq p { padding: 0 24px 22px; }

.contact-form { display: grid; gap: 16px; }
.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}
.contact-form input:not([type='checkbox']):not([type='hidden']) { height: 43px; }
.contact-form textarea { height: 120px; resize: vertical; }
.contact-form input[type='checkbox'] { width: auto; accent-color: var(--blue); }
.contact-form .checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-size: .9rem;
}
.contact-form .checkbox-field > span { grid-column: 2; }
.contact-form .checkbox-field input { grid-column: 1; grid-row: 1; margin-top: 5px; }
.contact-form .checkbox-field .field-error,
.contact-form .checkbox-field small { grid-column: 2; }
.contact-form button:disabled { color: var(--white); background: #5f6b78; cursor: not-allowed; transform: none; }
.contact-form [aria-invalid='true'] { border-color: #b42318; }
.ebook-download-form {
  width: 100%;
  max-width: 580px;
  justify-self: end;
  gap: 20px;
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  box-shadow: 0 14px 34px rgba(10, 34, 64, .07);
}
.ebook-lead-form label { gap: 8px; line-height: 1.35; }
.ebook-lead-form .checkbox-field {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.ebook-lead-form .checkbox-field a {
  color: var(--blue);
  text-underline-offset: 2px;
}
.ebook-lead-form .checkbox-field input[type='checkbox'] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  padding: 0;
}
.ebook-lead-form .button {
  min-width: 250px;
  justify-self: start;
  margin-top: 4px;
}
.field-error { min-height: 1.2em; color: #b42318; font-size: 0.82rem; }
.honeypot { position: absolute; left: -10000px; }
.form-status { min-height: 1.5em; color: var(--ink); font-weight: 500; }
.availability-warning { padding: 18px; border-left: 4px solid #b54708; background: #fff5eb; color: #7a2e0e; }
.availability-card { padding: clamp(26px, 4vw, 40px); border-left: 4px solid var(--blue); background: var(--white); box-shadow: var(--shadow); }
.availability-card h3 { margin-bottom: 14px; font-size: var(--fs-h3); }
.availability-card > p:not(.eyebrow) { margin-bottom: 24px; }
.availability-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

.flash-region { padding-top: 110px; }
.flash { padding: 14px 18px; border-left: 4px solid var(--blue); color: var(--ink); background: #eef7ff; }
.flash.error { border-color: #b42318; background: #fff1f0; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.post-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border: 1px solid var(--line);
  padding: 30px;
  border-top: 4px solid var(--blue);
  background: var(--white);
  box-shadow: 0 14px 32px rgba(10, 34, 64, .08);
}
.post-card h2,
.post-card h3 { margin: 18px 0 14px; color: var(--ink); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.post-card h2 a,
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover,
.post-card h3 a:hover { color: var(--blue); }
.post-card > p { margin-bottom: 24px; color: #5f6b78; }
.post-card-meta { display: flex; min-height: 28px; align-items: start; justify-content: space-between; gap: 14px; color: var(--gray); font-size: 13px; line-height: 18px; }
.post-card-meta time { flex: 0 0 auto; padding-top: 2px; white-space: nowrap; }
/* Desktop: reserva a altura da linha de meta para os títulos da mesma linha
   do grid começarem na mesma altura mesmo quando os chips quebram. */
@media (min-width: 821px) {
  .post-card-meta { min-height: 58px; }
}
.post-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.post-themes a,
.post-themes span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(0, 113, 206, .25);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(0, 113, 206, .06);
  font-size: 11px;
  line-height: 16px;
  text-decoration: none;
}
.post-themes a:hover { color: var(--white); background: var(--blue); }
.post-themes-light { margin: 24px 0 18px; }
.post-themes-light a { border-color: rgba(255,255,255,.35); color: var(--white); background: rgba(255,255,255,.08); }
.post-themes-light a:hover { border-color: var(--white); color: var(--ink); background: var(--white); }
.post-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; color: var(--gray); font-size: 14px; }
.blog-controls { display: grid; gap: 24px; margin-bottom: 44px; }
.blog-search { max-width: 780px; }
.blog-search label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14px; font-weight: 600; }
.blog-search-row { display: flex; gap: 12px; }
.blog-search input {
  width: 100%;
  min-height: 45px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 22px;
}
.blog-search input::placeholder { color: #657487; opacity: 1; }
.blog-search .button { flex: 0 0 auto; }
.blog-themes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.blog-theme-chip {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(10, 34, 64, .16);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  font-size: 13px;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.blog-theme-chip span { color: var(--gray); font-size: 12px; }
.blog-theme-chip:hover,
.blog-theme-chip.active { border-color: var(--blue); color: var(--white); background: var(--blue); }
.blog-theme-chip:hover span,
.blog-theme-chip.active span { color: var(--white); }
.blog-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; color: #5f6b78; font-size: 15px; line-height: 22px; }
.blog-results-heading p { margin: 0; }
.blog-results-heading strong { color: var(--ink); }
.blog-empty-state { grid-column: 1 / -1; }
.blog-section { background: #eef3f7; }
.blog-list-hero { min-height: 0; padding: 126px 0 48px; }
.blog-list-hero + .blog-section { padding-top: 48px; }
.blog-controls {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 14px 30px rgba(10, 34, 64, .09);
}
.home-blog-cta {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.blog-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.home-blog-cta h2 {
  max-width: 570px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: var(--fs-h2);
  line-height: 50px;
  letter-spacing: -1.35px;
}
.blog-cta-content { max-width: 570px; }
.blog-cta-content p { margin-bottom: 30px; color: var(--gray); line-height: 23px; }
.home-blog-cta .blog-cta-content p { color: var(--white); }
.blog-layout { display: grid; gap: 32px; }
.blog-toc { padding: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(15, 23, 42, .08); }
@media (min-width: 960px) {
  .blog-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  /* Sticky só na coluna lateral; no mobile cobria o artigo ao rolar. */
  .blog-toc { position: sticky; top: 96px; }
}
.blog-toc h2 { margin: 0 0 12px; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.blog-toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }
.blog-toc a { text-decoration: none; color: var(--ink); }
.blog-toc a:hover { color: var(--blue); }
.toc-level-3 { margin-left: .6rem; }
.toc-level-4 { margin-left: 1.2rem; }
.article-content { min-width: 0; overflow-wrap: anywhere; max-width: 820px; color: var(--ink); font-size: 1.08rem; line-height: 1.8; }
.article-content p,
.article-content ul,
.article-content ol,
.article-content pre,
.article-content table { margin-bottom: 1.4em; }
.article-content h2,
.article-content h3,
.article-content h4 { margin: 1.6em 0 .7em; line-height: 1.25; }
.article-content pre { overflow-x: auto; padding: 1rem; background: #0f172a; color: #e2e8f0; }
.article-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; width: 100%; border-collapse: collapse; }
.article-content th,
.article-content td { border: 1px solid rgba(15, 23, 42, .12); padding: .55rem .7rem; text-align: left; }
.blog-post-tldr {
  margin: 0 0 2rem;
  padding: 1.25rem 1.4rem;
  border-left: 4px solid var(--blue);
  background: rgba(37, 99, 235, .06);
}
.blog-post-tldr-label {
  margin: 0 0 .55rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
}
.blog-theme-answer {
  margin-top: 1.25rem;
  max-width: 42rem;
  color: rgba(255, 255, 255, .92);
}
.blog-theme-answer .blog-post-tldr-label { color: rgba(255, 255, 255, .8); }
.blog-theme-answer p { margin: 0; }
.glossary-section .section-heading { text-align: left; margin-inline: 0; }
.glossary-section .section-heading p:not(.eyebrow) { margin-inline: 0; }
.glossary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
.glossary-term {
  padding-bottom: 8px;
  scroll-margin-top: 96px;
}
.glossary-term h3 {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-size: var(--fs-h3);
}
.glossary-term p {
  margin: 0;
  color: var(--gray);
  font-size: 16px;
  line-height: 1.55;
}
.glossary-term-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
}
.glossary-term-links a {
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.glossary-term-links a:hover { color: var(--blue-dark); }
.blog-back { margin-top: 2.5rem; }
.blog-post-hero {
  min-height: 0;
  padding: clamp(116px, 8vw, 132px) 0 clamp(48px, 4vw, 62px);
}
.blog-post-hero-inner { max-width: 1000px; }
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.5;
}
.blog-post-hero h1 {
  max-width: 900px;
  font-size: var(--fs-hero);
  letter-spacing: -.025em;
  line-height: 1.12;
}
.blog-post-hero .post-themes-light { margin: 22px 0 0; }
.blog-post-hero .page-hero-copy { margin-top: 22px; }
.blog-related {
  margin: 2.8rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(15, 23, 42, .12);
}
.blog-related h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}
.blog-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.blog-related a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.blog-related a:hover { color: var(--blue); }
.blog-related-themes {
  display: block;
  margin-top: 2px;
  color: #5f6b78;
  font-size: .9rem;
  font-weight: 400;
}
.blog-editorial-credit {
  display: grid;
  gap: 4px;
  margin-top: 2.8rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(15, 23, 42, .12);
  color: #5f6b78;
  font-size: .92rem;
  line-height: 1.55;
}
.blog-editorial-credit p { margin: 0; }
.blog-editorial-credit strong { color: var(--ink); font-weight: 600; }
.blog-editorial-credit a { color: var(--blue); font-weight: 600; }
.empty-state { padding: 40px; background: var(--white); box-shadow: var(--shadow); }
.pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 36px; }
.empty-state { padding: 50px; text-align: center; background: var(--surface); }
.pagination { display: flex; justify-content: center; gap: 24px; margin-top: 42px; }
.narrow { max-width: 760px; }

.policy-content { max-width: 900px; }
.policy-content h2 { margin-top: 42px; font-size: var(--fs-h3); }
.policy-content li { margin: 8px 0; }

.site-footer { color: var(--white); }
.footer-cta {
  padding: var(--section-space) 0;
  background: var(--navy);
}
.footer-cta-light {
  color: var(--ink);
  background: var(--white);
}
.footer-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: center; }
.footer-brand .footer-lockup {
  display: block;
  width: min(280px, 100%);
  height: auto;
  margin: 0 0 28px;
}
.social-list { display: flex; flex-wrap: wrap; gap: 14px; }
.social-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.social-icon:hover { background: var(--blue-dark); transform: translateY(-2px); }
.social-icon svg { width: 22px; height: 22px; fill: currentColor; }
.footer-cta h2 {
  margin: 0 0 22px;
  color: var(--white);
  font-family: var(--font);
  font-size: clamp(28px, 3.4vw, 45px);
  font-weight: 600;
  line-height: 1.15;
}
.footer-cta h2 span { color: var(--blue); }
.footer-cta p {
  max-width: 730px;
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  color: var(--white);
}
.footer-cta-light h2 { color: var(--ink); }
.footer-cta-light p { color: var(--gray); }
.footer-cta .accent { color: var(--blue); font-weight: 700; }
.footer-bottom {
  position: relative;
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 56px;
  padding: 16px 64px;
  text-align: center;
  background: var(--navy);
}
.footer-bottom .footer-legal { font-size: 14px; }
.footer-bottom p {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #f2f2f2;
}
.footer-bottom a { color: #f2f2f2; text-decoration: underline; }
/* Mantém o pipe colado ao e-mail: a quebra acontece antes do grupo. */
.footer-contact-group { white-space: nowrap; }
.cookie-preferences {
  padding: 0;
  border: 0;
  color: #f2f2f2;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.back-to-top {
  position: absolute;
  right: 24px;
  top: 50%;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy);
  transform: translateY(-50%);
  text-decoration: none;
}
.back-to-top svg { width: 20px; height: 20px; fill: currentColor; }
.back-to-top:hover { background: var(--blue-dark); }

.cookie-banner {
  position: fixed;
  z-index: 1200;
  bottom: 28px;
  left: 40px;
  width: min(400px, calc(100% - 40px));
  padding: 22px 24px 18px;
  border-radius: 6px;
  color: #212121;
  background: var(--white);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.cookie-banner h2 { margin-bottom: 10px; font-size: 1.05rem; color: #212121; }
.cookie-banner p { margin-bottom: 16px; font-size: .875rem; line-height: 1.5; color: #212121; }
.cookie-banner p a { color: var(--blue-cookie); text-decoration: none; }
/* O banner de consentimento não usa o kit de botão do site: ver §2.4.1 do
   cânone. Caixa alta e entreletra prejudicam a leitura de um aviso legal que
   a pessoa precisa entender antes de escolher. */
.cookie-banner .button,
.cookie-banner .cookie-accept,
.cookie-banner .cookie-reject {
  width: 100%;
  min-height: 42px;
  border-radius: 3px;
  border: 2px solid var(--blue-cookie);
  background: var(--blue-cookie);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
}
/* A altura das duas difere de propósito e sempre diferiu: a de aceitar herdava
   `line-height` do `.button` (hoje 1, antes 45px) e a de recusar nunca herdou,
   parando na própria `min-height`. Fixo aqui para não depender do kit. */
.cookie-banner .button,
.cookie-banner .cookie-accept { line-height: 45px; }
.cookie-banner .cookie-reject { line-height: normal; }
.cookie-banner .button:hover,
.cookie-banner .cookie-accept:hover { opacity: 0.85; background: var(--blue-cookie); }
.cookie-actions { display: grid; gap: 8px; }
.cookie-banner .cookie-reject {
  color: var(--blue-cookie);
  background: var(--white);
}
.cookie-banner .cookie-reject:hover { background: #eef4ff; }
.cookie-close { display: none; }

@media (max-width: 1199px) {
  .desktop-nav { display: none; }
  .site-header, .header-inner { min-height: 114px; }
  .header-inner { justify-content: space-between; }
  .header-socials { display: flex; margin-left: auto; }
  .menu-toggle { display: block; }
  .home-hero {
    --hero-header-h: 114px;
    --hero-video-h: calc(100svh - var(--hero-header-h));
    min-height: 100vh;
    min-height: 100svh;
    --hero-scale: 1;
  }
  .hero-stage {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 36px;
    align-items: center;
    width: min(var(--hero-grid), calc(100% - 40px));
    min-height: 100svh;
    margin: 0 auto;
    padding: 130px 0 60px;
    transform: none;
  }
  .hero-lockup,
  .hero-copy {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
  }
  .hero-lockup { width: min(100%, 320px); }
  .hero-copy p,
  .hero-copy .hero-note { font-size: 18px; line-height: 22px; }
  .hero-copy .button { margin-top: 32px; }
  .hero-video { transform: scale(1.06); }
  .solution-product-grid { gap: 42px; }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 48px), var(--container)); }
  .section { padding: 72px 0; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 30px; }
  .split.reverse > :first-child { order: initial; }
  .card-grid, .card-grid.product-family-grid, .step-grid, .compact-grid, .glossary-list { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-cta-grid { grid-template-columns: 1fr; gap: 30px; }
  .section-heading { margin-bottom: 44px; }
  .section-heading h2 { font-size: var(--fs-h2); line-height: 40px; }
  .home-about .split,
  .home-knowledge .split { padding-inline: 15px; }
  .home-about .split { row-gap: 0; }
  .home-about .split > div { display: contents; }
  .home-about .split > :first-child .eyebrow { order: 1; }
  .home-about .split > :first-child h2 { order: 2; }
  .home-about .split > :last-child .lead { order: 3; }
  .home-about .split > :last-child > p:not(.lead) { order: 4; }
  .home-about .split > :first-child .button { order: 5; }
  .home-about .split > :first-child .button {
    display: inline-flex;
    justify-self: start;
    width: auto;
    margin-top: 30px;
  }
  .home-hero { min-height: calc(var(--hero-header-h) + var(--hero-video-h)); }
  .hero-video { display: none; }
  .hero-stage {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 32px;
    padding: 220px 0 48px;
    text-align: center;
  }
  .hero-lockup { width: min(78vw, 330px); margin: 0 auto; }
  .hero-copy p,
  .hero-copy .hero-note { font-size: 18px; line-height: 23px; }
  .page-hero { min-height: 0; padding: 108px 0 64px; text-align: center; }
  .page-hero-standard {
    padding: 128px 0 58px;
    text-align: left;
  }
  .page-hero-standard .split {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .page-hero-standard h1 { max-width: 620px; }
  .page-hero-standard .page-hero-content { max-width: 620px; }
  .page-hero-standard .page-hero-copy { margin-inline: 0; }
  .office-hero.page-hero-standard { min-height: 0; }
  .ebook-related-card { grid-template-columns: 1fr; gap: 24px; }
  .ebook-related-card .button { width: 100%; }
  .ebook-download-form { max-width: none; justify-self: stretch; }
  .ebook-lead-form .button { width: 100%; }
  .blog-post-hero { padding: 132px 0 48px; text-align: left; }
  .blog-toc { display: none; }
  .page-hero-copy { margin-inline: auto; }
  .blog-list-hero { padding: 138px 0 46px; text-align: left; }
  .blog-list-hero + .blog-section { padding-top: 36px; }
  .blog-post-hero .page-hero-copy { margin-inline: 0; }
  .footer-cta { padding: 72px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer-brand .footer-lockup { margin-inline: auto; }
  .social-list { justify-content: center; }
  .back-to-top { right: 12px; }
  .cookie-banner { left: 20px; bottom: 20px; }
}

@media (max-width: 480px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .section { padding: 64px 0; }
  .header-inner { width: calc(100% - 30px); gap: 10px; }
  .brand { flex-basis: 50px; }
  .brand img { width: 50px; height: 54px; }
  .header-socials { gap: 0; }
  .header-socials .header-social-secondary { display: none; }
  .header-socials .header-social-primary { width: 44px; height: 44px; }
  .header-socials .header-social-primary svg { width: 20px; height: 20px; }
  .menu-toggle { width: 42px; padding-inline: 8px; }
  .office-demo-actions { padding: 15px; }
  .office-demo-start { min-width: 0; width: 100%; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-search-row { flex-direction: column; }
  .blog-search .button { width: 100%; }
  .blog-results-heading { align-items: start; flex-direction: column; gap: 8px; }
  .post-card { padding: 24px; }
  .post-card-meta { align-items: start; flex-direction: column; gap: 8px; }
  .post-card-footer { align-items: start; flex-direction: column; }
  .blog-controls { padding: 20px; }
  .home-hero {
    --hero-video-h: calc(100svh - var(--hero-header-h));
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero-stage { padding-top: 270px; gap: 32px; }
  .hero-copy { width: min(100%, 330px); margin-inline: auto; }
  .hero-copy h1 { font-size: 30px; line-height: 1.16; }
  .hero-copy p,
  .hero-copy .hero-note { font-size: 18px; line-height: 23px; }
  .media-card-body { padding: 24px 20px; }
  .home-solutions .media-card-body { padding-top: 40px; padding-inline: 0; }
  .home-solutions .card-grid { row-gap: var(--grid-gap); }
  .home-solutions .cards-action { margin-top: 51px; }
  .home-tools .section-heading { width: calc(100% - 30px); margin-bottom: 48px; }
  .home-tools .media-card > img { width: calc(100% - 60px); margin-inline: auto; }
  .home-tools .media-card-body { width: 100%; padding-top: 40px; padding-inline: 30px; }
  .home-tools .media-card-body p { margin-bottom: 24px; }
  .home-tools .media-card .button { margin-top: 20px; }
  .home-tools .card-grid { row-gap: var(--grid-gap); }
  .page-hero { padding: 96px 0 56px; }
  .page-hero.blog-list-hero { padding: 138px 0 46px; }
  .page-hero-standard { padding: 132px 0 52px; }
  .page-hero-standard h1 { font-size: 34px; }
  .blog-post-hero { padding: 132px 0 48px; }
  .section-heading { margin-bottom: 36px; }
  .footer-cta { padding: 64px 0; }
  .solution-product { text-align: center; }
  .solution-product-copy { max-width: none; }
  .solution-product-actions { justify-content: center; }
        .cookie-banner { width: calc(100% - 24px); left: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero-video { display: none; }
  html.motion-ready [data-motion="pop"] { opacity: 1; transform: none; animation: none; }
  html.motion-ready [data-motion="book"] { opacity: 1; transform: none; animation: none; }
}

/* Landing “Claude para Advogados”: composição editorial específica, construída
   sobre os tokens e os componentes do site institucional. */
/* Mesmo fundo, mesma métrica e mesmo respiro do herói de todas as páginas.
   O degradê próprio e o halo laranja saíram: cânone §2.3 proíbe o laranja em
   fundo de seção, e §2.7 tem um herói só. Ver docs/CANONE-DESIGN-SISTEMA.md. */
.course-hero {
  position: relative;
  overflow: hidden;
  padding: 124px 0 58px;
  color: var(--white);
  background: var(--navy);
}
.course-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.course-hero-copy { min-width: 0; }
.course-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.course-identity img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.course-identity .eyebrow { margin: 0; }
.course-hero h1 { max-width: 760px; margin-bottom: 22px; color: var(--white); font-size: var(--fs-hero); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.course-hero h1 small { display: block; margin-top: 19px; color: var(--white); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.course-hero-lead { max-width: 600px; margin-bottom: 20px; color: rgba(255,255,255,.82); font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.course-hero-nobar { max-width: 600px; margin-bottom: 24px; color: #ffd8c9; font-size: 14.5px; line-height: 1.55; }
.course-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; padding: 13px 17px; border-left: 3px solid var(--course-orange); background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); font-size: 14px; font-weight: 500; }
.course-hero-facts i { color: rgba(255,255,255,.28); font-style: normal; }
.course-hero-facts b { color: #ffd8c9; font-weight: 500; }
.course-hero-instructor { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.45; }
.course-hero-instructor img { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); object-fit: cover; object-position: 50% 12%; }
.course-hero-instructor strong { color: var(--white); font-weight: 600; }
.course-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.course-hero .link { color: rgba(255,255,255,.82); }
.course-hero .link:hover { color: var(--white); }
.course-final-cta .link { color: var(--white); }
.course-sticky .link { display: inline-flex; align-items: center; min-height: 44px; }
.course-confirmation-note { margin: 18px 0 0; color: rgba(255,255,255,.52); font-size: 12.5px; line-height: 1.5; }
.course-hero-bonus { display: flex; align-items: center; gap: 11px; margin-top: 22px; padding: 13px 16px; border: 1px dashed rgba(217,119,87,.5); border-radius: 0; color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.45; }
.course-hero-bonus svg { flex: 0 0 17px; }
.course-hero-bonus strong { color: #ffd8c9; font-weight: 600; }

/* Quadro do hero */
.course-hero-visual { min-width: 0; }
.course-visual-topline { display: flex; justify-content: space-between; margin-bottom: 12px; color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.course-visual-topline span:first-child { color: #ffd8c9; }
.course-board { position: relative; padding: 22px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 0; background: rgba(4,20,39,.5); }
.course-board-header, .course-board-footer { position: relative; z-index: 1; display: flex; align-items: center; }
.course-board-header { gap: 11px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.85); font-size: 13px; }
.course-board-header > span:first-child { flex-grow: 1; }
.course-board-status { padding: 4px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.6); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
/* Assimétrico de propósito: a esquerda tem uma frase, a direita tem caminhos
   de arquivo, que não podem quebrar nem ser cortados. */
.course-board-flow { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) 46px minmax(0, 1.38fr); gap: 10px; align-items: center; padding: 25px 0; }
.course-chat-card, .course-flow-card { min-height: 190px; padding: 19px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; background: rgba(5,24,46,.55); }
.course-chat-card { border-top: 3px solid rgba(255,255,255,.4); }
.course-flow-card { border-top: 3px solid var(--course-orange); background: rgba(217,119,87,.08); }
.course-card-label { margin-bottom: 12px; color: rgba(255,255,255,.5); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.course-chat-card h2 { margin-bottom: 11px; color: var(--white); font-size: 21px; line-height: 1.2; }
.course-chat-card > p:not(.course-card-label) { color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.5; }
.course-flow-bridge { display: grid; justify-items: center; gap: 7px; color: var(--course-orange); }
.course-flow-bridge span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(217,119,87,.6); border-radius: 50%; font-size: 8px; font-weight: 700; }
.course-flow-bridge i { display: block; width: 1px; height: 24px; background: rgba(217,119,87,.55); }
.course-flow-bridge b { font-size: 25px; font-weight: 400; line-height: .7; }
.course-flow-item { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.88); font-size: 12px; }
/* O prefixo é o caminho real da pasta do caso, não um número de ordem — por
   isso ganha largura fixa e fonte de código: as linhas alinham como listagem
   de diretório. */
.course-flow-item span { flex: none; min-width: 58px; color: var(--course-orange); font-size: 9px; font-weight: 700; }
.course-flow-item { gap: 6px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: -.2px; white-space: nowrap; }
.course-flow-check { margin-top: 17px; color: #ffd8c9; font-size: 11px; }
.course-flow-check span { display: inline-grid; width: 18px; height: 18px; margin-right: 5px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--course-orange); font-size: 11px; font-weight: 700; }
.course-board-footer { justify-content: space-between; gap: 6px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.5); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; }
.course-hero-visual-note { display: flex; gap: 8px; margin-top: 14px; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.45; }
.course-note-dot { width: 6px; height: 6px; flex: 0 0 6px; margin-top: 5px; border-radius: 50%; background: var(--course-orange); }

/* Barra fixa de inscrição */
.course-sticky { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.1); background: #071c35; color: rgba(255,255,255,.85); }
.course-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 0; }
.course-sticky-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13.5px; }
.course-sticky-facts strong { color: var(--white); font-weight: 600; }
.course-sticky-facts i { color: rgba(255,255,255,.25); font-style: normal; }
.course-sticky-facts b { color: #ffd8c9; font-weight: 400; }
.course-sticky .button { white-space: nowrap; }

/* Faixa de fatos */
.course-facts { border-bottom: 1px solid var(--line); background: var(--white); }
.course-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.course-fact { min-height: 118px; padding: 25px 24px 22px; border-right: 1px solid var(--line); }
.course-fact:first-child { padding-left: 0; }
.course-fact:last-child { padding-right: 0; border-right: 0; }
.course-fact-key { display: block; margin-bottom: 8px; color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.course-fact strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.35; }
.course-fact small { display: block; margin-top: 4px; color: #728090; font-size: 12px; }
.course-fact-highlight .course-fact-key, .course-fact-highlight strong { color: var(--course-orange-dark); }

/* Cabeçalhos de seção */
.course-section { position: relative; }
.course-section-heading { max-width: 860px; margin: 0 0 44px; }
.course-section-heading h2 { margin-bottom: 16px; font-size: var(--fs-h2); line-height: 1.08; }
.course-section-heading > p:not(.eyebrow) { max-width: 720px; line-height: 1.6; }
.course-section-heading .eyebrow { margin-bottom: 18px; }
.course-section-heading-dark h2 { color: var(--white); }
.course-section-heading-dark > p:not(.eyebrow) { color: rgba(255,255,255,.78); font-size: 18px; }

/* O que é o Claude */
.course-claude { overflow: hidden; padding: 82px 0; background: #071c35; color: var(--white); }
.course-claude::after { position: absolute; right: -170px; bottom: -320px; width: 560px; height: 560px; border: 1px solid rgba(217,119,87,.25); border-radius: 50%; content: ''; }
.course-claude .container { position: relative; z-index: 1; }
.course-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.course-capability { padding: 24px 22px; border: 1px solid rgba(255,255,255,.13); border-top: 3px solid var(--course-orange); background: rgba(255,255,255,.04); }
.course-capability h3 { margin-bottom: 8px; color: #ffd8c9; font-size: 17px; line-height: 1.25; }
.course-capability p { margin: 0; color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.55; }
.course-glossary-links {
  max-width: 860px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.7);
  font-size: 14.5px;
  line-height: 1.6;
}
.course-glossary-links a {
  color: #ffd8c9;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.course-glossary-links a:hover { color: var(--white); }

/* Por que um método */
.course-problem { padding: clamp(78px, 8vw, 96px) 0; }
.course-problem-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 80px); align-items: start; }
.course-problem blockquote { margin: 0; padding-left: 27px; border-left: 4px solid var(--course-orange); color: var(--ink); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.035em; line-height: 1.28; text-wrap: pretty; }
.course-problem-copy p { max-width: 610px; margin-bottom: 22px; line-height: 1.65; }
.course-problem-copy .course-emphasis { margin-bottom: 0; color: var(--ink); font-weight: 500; }

/* As três superfícies */
/* Mecanismos */
.course-mechanisms { padding: clamp(80px, 8vw, 96px) 0; }
.course-mechanisms .course-section-heading > p:not(.eyebrow) { color: var(--ink); font-size: 19px; font-weight: 500; }
.course-mechanism-list { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 0; background: var(--line); overflow: hidden; }
.course-mechanism { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: center; padding: 26px 30px; background: var(--white); }
.course-mechanism h3 { margin-bottom: 5px; color: var(--ink); font-size: 20px; }
.course-mechanism small { color: #97a4ae; font-size: 12.5px; line-height: 1.4; }
.course-mechanism-pain { margin: 0; padding-left: 24px; border-left: 3px solid var(--course-orange); color: #5f6d79; font-size: 15.5px; font-style: italic; line-height: 1.5; }
.course-elsewhere { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 16px; padding: 30px 34px; border: 1px solid var(--line); border-left: 4px solid var(--course-orange); background: #fff7f3; }
.course-elsewhere strong { color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.25; }
.course-elsewhere p { margin: 0; color: #6f7c88; font-size: 15px; line-height: 1.6; }
.course-elsewhere p strong { font-size: inherit; }

/* Os dois dias */
.course-days { padding: clamp(80px, 8vw, 96px) 0; }
.course-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-day-card { display: grid; align-content: start; gap: 20px; padding: clamp(25px, 3vw, 36px); border: 1px solid var(--line); border-top: 3px solid var(--blue); background: var(--white); box-shadow: 0 18px 38px rgba(10,34,64,.06); }
.course-day-card-accent { border-top-color: var(--course-orange); }
.course-day-card header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.course-day-card header > div { display: flex; align-items: center; gap: 12px; }
.course-day-number { display: grid; width: 41px; height: 41px; flex: 0 0 41px; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue); font-size: 11px; font-weight: 700; }
.course-day-card-accent .course-day-number { background: var(--course-orange); }
.course-day-card header strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.course-day-card header time { display: block; color: #8b99a6; font-size: 12px; }
.course-day-stages { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: #8b99a6; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.course-day-card h3 { margin: 0; color: var(--ink); font-size: clamp(21px, 2vw, 25px); line-height: 1.18; }
.course-day-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.course-day-card li { position: relative; padding-left: 26px; color: #5f6d79; font-size: 14.5px; line-height: 1.5; }
.course-day-card li::before { position: absolute; top: .6em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); content: ''; }
.course-day-card-accent li::before { background: var(--course-orange); }
.course-day-outcome { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-left: 3px solid var(--course-orange); background: var(--course-orange-soft); }
.course-day-outcome svg { flex: 0 0 19px; }
.course-day-outcome span { display: block; margin-bottom: 2px; color: var(--course-orange-dark); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.course-day-outcome strong { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }

/* Para quem é */
.course-audience { padding: clamp(80px, 8vw, 96px) 0; }
.course-audience-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin: 0; padding: 0; list-style: none; }
.course-audience-list li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); color: #5f6d79; font-size: 15.5px; line-height: 1.5; }
.course-audience-list svg { margin-top: 2px; }

/* Quem conduz */
.course-instructor { padding: clamp(80px, 8vw, 96px) 0; }
.course-instructor-grid { display: grid; grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr); gap: clamp(42px, 8vw, 100px); align-items: center; }
.course-instructor-photo { position: relative; max-width: 390px; margin: 0 auto; }
.course-instructor-photo img { position: relative; z-index: 1; width: 82%; margin-left: 8%; border-radius: 0; object-fit: cover; object-position: 50% 15%; }
.course-photo-caption { position: absolute; z-index: 2; right: -6%; bottom: 6%; padding: 12px 15px; border-left: 3px solid var(--course-orange); color: var(--white); background: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; }
.course-photo-caption small { color: #ffd8c9; font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.course-instructor-copy h2 { margin-bottom: 8px; font-size: var(--fs-h2); }
.course-instructor-role { margin-bottom: 25px; color: var(--course-orange-dark); font-size: 20px; font-weight: 500; }
.course-instructor-copy > p:not(.eyebrow):not(.course-instructor-role) { max-width: 670px; line-height: 1.65; }
.course-credentials { display: grid; gap: 10px; margin-top: 29px; }
.course-credentials span { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid var(--line); color: #6b7985; font-size: 13px; }
.course-credentials b { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Inscrição */
.course-register { scroll-margin-top: 92px; padding: clamp(80px, 8vw, 96px) 0; background: #f6f8fa; }
.course-ebook { position: relative; display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 50px; padding: 34px 38px; border: 1px solid var(--line); border-left: 4px solid var(--course-orange); background: var(--white); box-shadow: 0 14px 34px rgba(10,34,64,.06); }
.course-ebook-draft { position: absolute; top: 14px; right: 16px; padding: 5px 9px; border: 1px dashed #c9d3dc; border-radius: 0; color: #97a4ae; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.course-ebook-cover { position: relative; width: 178px; height: 237px; padding: 22px 18px; border-radius: 0; background: linear-gradient(140deg, #0b2b4b 0%, var(--navy) 62%, #081c35 100%); box-shadow: 0 14px 30px rgba(10,34,64,.28); }
.course-ebook-cover::before { position: absolute; top: 0; left: 0; width: 7px; height: 100%; border-radius: 0; background: var(--course-orange); content: ''; }
.course-ebook-cover span { display: block; margin-bottom: 14px; color: rgba(255,255,255,.5); font-size: 8px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.course-ebook-cover strong { display: block; margin-bottom: 10px; color: var(--white); font-size: 19px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.course-ebook-cover small { color: #ffd8c9; font-size: 11px; line-height: 1.4; }
.course-ebook-copy h3 { margin-bottom: 12px; color: var(--ink); font-size: clamp(22px, 2.2vw, 27px); line-height: 1.15; }
.course-ebook-copy > p { max-width: 620px; margin-bottom: 20px; color: #6f7c88; font-size: 15px; line-height: 1.6; }
.course-ebook-when { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border-left: 3px solid var(--course-orange); background: var(--course-orange-soft); color: var(--course-orange-dark); font-size: 13px; font-weight: 500; }
.course-ebook-when svg { flex: 0 0 15px; }
.course-ebook-note { margin: 14px 0 0; color: #7d8b96; font-size: 12.5px; line-height: 1.5; }
.course-register-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr); gap: clamp(45px, 8vw, 90px); align-items: start; }
.course-register-copy { padding-top: 19px; }
.course-register-copy h2 { max-width: 510px; margin-bottom: 16px; font-size: var(--fs-h2); line-height: 1.08; }
.course-register-copy > p:not(.eyebrow) { max-width: 560px; line-height: 1.65; }
.course-status { display: grid; grid-template-columns: 10px 1fr; gap: 4px 10px; max-width: 470px; margin: 26px 0; padding: 16px 18px; border-left: 3px solid var(--course-orange); background: var(--white); }
.course-status-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--course-orange); grid-row: span 2; }
.course-status strong { color: var(--ink); font-size: 14px; }
.course-status small { color: #6d7a85; font-size: 12px; line-height: 1.45; }
.course-status-closed { border-color: #8b98a3; }
.course-status-closed .course-status-dot { background: #8b98a3; }
.course-quickfaq { max-width: 470px; margin-bottom: 22px; padding: 18px 20px; border: 1px solid var(--line); background: var(--white); }
.course-quickfaq > p { margin-bottom: 12px; color: #8593a0; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.course-quickfaq ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.course-quickfaq li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; align-items: start; color: #6b7883; font-size: 13.5px; line-height: 1.45; }
.course-quickfaq li span { margin-top: 4px; color: var(--course-orange); }
.course-quickfaq strong { color: var(--ink); font-weight: 600; }
.course-privacy-callout { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; max-width: 470px; }
.course-privacy-callout svg { margin-top: 2px; }
.course-privacy-callout p { margin: 0; color: #6b7883; font-size: 13px; line-height: 1.55; }
.course-privacy-callout strong { color: var(--ink); }
/* O formulário da oficina é o `.contact-form` padrão dentro de um cartão. A
   única marca própria é o filete laranja do topo — assinatura do Claude, que
   o cânone §2.3 admite nesta página.
   Até 28/08/2026 ele tinha uma pele paralela inteira: altura de campo, fundo,
   hover, grade de checkbox e dois `fieldset` com legenda em volta dos
   consentimentos. Tudo isso duplicava, com valores ligeiramente diferentes, o
   que o `.contact-form` já resolvia — e era o que fazia o formulário parecer
   de outro site e ocupar o dobro da altura. */
.course-form { padding: clamp(24px, 3.4vw, 38px); border: 1px solid var(--line); border-top: 4px solid var(--course-orange); background: var(--white); box-shadow: 0 18px 44px rgba(10,34,64,.08); }
.course-form-heading { padding-bottom: 4px; }
.course-form-heading .course-card-label { margin-bottom: 10px; color: var(--course-orange-dark); }
.course-form-heading h3 { margin-bottom: 7px; font-size: 27px; }
.course-form-heading p:last-child { color: #73808b; font-size: 13px; }
.course-form .button { width: 100%; margin-top: 5px; }
/* Os campos de calibragem ficam recolhidos: são três, todos opcionais, e
   dobravam a altura do formulário diante de duas perguntas obrigatórias. */
.form-optional { border: 1px solid var(--line); background: #fafbfc; }
.form-optional > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.form-optional > summary::-webkit-details-marker { display: none; }
.form-optional > summary::after {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  content: '';
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.form-optional[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.form-optional > summary em { color: #78868f; font-style: normal; font-weight: 400; }
/* O `display` fica preso ao estado aberto de propósito: declarado solto, ele
   vence a regra do navegador que esconde o conteúdo do `<details>` fechado, e
   o painel nunca fecha. */
.form-optional[open] > .form-optional-fields { display: grid; gap: 16px; padding: 0 15px 16px; }
.course-form-footnote { margin: 0; color: #788691; font-size: 11px; line-height: 1.5; }
.course-register-closed { padding: 42px; border: 1px solid var(--line); border-top: 4px solid var(--blue); background: var(--white); }
.course-register-closed h3 { margin-bottom: 12px; font-size: 28px; }
.course-register-closed p { max-width: 420px; color: #6f7d88; line-height: 1.6; }

/* FAQ, links e CTA final */
.course-faq { padding: clamp(80px, 8vw, 92px) 0; }
.course-faq .faq { max-width: 920px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.course-faq .faq details { border-color: #dbe3ea; box-shadow: none; }
.course-faq .faq summary { padding: 20px; font-size: 14.5px; }
.course-faq .faq p { padding: 0 20px 20px; color: #6f7c88; font-size: 13.5px; line-height: 1.55; }
.course-final-cta { padding: 76px 0; color: var(--white); background: var(--navy); }
.course-final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.course-final-cta h2 { margin-bottom: 10px; color: var(--white); font-size: var(--fs-h2); }
.course-final-cta p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.72); }
.course-related { padding: clamp(56px, 6vw, 64px) 0; }
.course-related-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.course-related-links li { padding: 16px 18px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.72); color: #5b6773; font-size: 14px; line-height: 1.5; }
.course-related-links a { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 600; text-decoration: none; }
.course-related-links a:hover { color: var(--blue); }

@media (max-width: 1080px) {
  .course-mechanism { grid-template-columns: 210px minmax(0, 1fr); gap: 20px 26px; }
  .course-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .course-hero { padding-top: 145px; }
  .course-hero-grid { grid-template-columns: 1fr; gap: 55px; }
  .course-hero-copy, .course-hero-visual { max-width: 750px; }
  .course-elsewhere { grid-template-columns: 1fr; gap: 14px; }
  .course-register-grid { grid-template-columns: 1fr; gap: 35px; }
  .course-register-copy { padding-top: 0; }
  .course-form { max-width: 720px; }
  .course-related-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .course-hero { padding: 148px 0 60px; }
  .course-sticky-inner { flex-wrap: wrap; gap: 12px; }
  .course-sticky-facts { gap: 10px; font-size: 12px; }
  .course-sticky .button { width: 100%; justify-content: center; }
  .course-board-flow { grid-template-columns: minmax(0, .82fr) 34px minmax(0, 1.38fr); }
  .course-chat-card, .course-flow-card { padding: 15px; }
  .course-board-footer { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .course-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .course-fact { min-height: 106px; padding: 20px 16px; border-bottom: 1px solid var(--line); }
  .course-fact:nth-child(2) { border-right: 0; }
  .course-fact:nth-child(3), .course-fact:nth-child(4) { border-bottom: 0; }
  .course-fact:first-child { padding-left: 16px; }
  .course-fact:last-child { padding-right: 16px; }
  .course-problem-grid { grid-template-columns: 1fr; gap: 28px; }
  .course-mechanism { grid-template-columns: 1fr; gap: 12px; }
  .course-mechanism-pain { padding-left: 18px; font-size: 15px; }
  .course-day-grid, .course-audience-list { grid-template-columns: 1fr; }
  .course-day-card header { flex-wrap: wrap; gap: 12px; }
  .course-day-stages { white-space: normal; }
  .course-instructor-grid { grid-template-columns: 1fr; gap: 45px; }
  .course-instructor-photo { width: min(100%, 340px); }
  .course-ebook { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .course-faq .faq { grid-template-columns: 1fr; }
  .course-final-cta-inner { align-items: start; flex-direction: column; }
}

@media (max-width: 520px) {
  .course-register { scroll-margin-top: 150px; }
  .course-hero { padding-top: 142px; }
  .course-hero-lead { font-size: 16px; }
  .course-hero-facts { align-items: flex-start; flex-direction: column; gap: 5px; }
  .course-hero-facts i { display: none; }
  .course-hero-actions { align-items: stretch; flex-direction: column; gap: 15px; }
  .course-hero .button { width: 100%; justify-content: center; }
  .course-hero .link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; }
  .course-board { padding: 17px 13px; }
  .course-board-header { font-size: 11px; }
  .course-board-flow { grid-template-columns: 1fr; gap: 11px; padding: 18px 0; }
  .course-chat-card, .course-flow-card { min-height: 0; }
  .course-flow-bridge { grid-template-columns: 30px 1fr 26px; gap: 8px; justify-items: center; }
  .course-flow-bridge i { width: 24px; height: 1px; }
  .course-flow-bridge b { transform: rotate(90deg); }
  .course-board-footer { font-size: 8px; }
  .course-hero-visual-note { font-size: 10px; }
  .course-capabilities, .course-related-links { grid-template-columns: 1fr; }
  .course-photo-caption { right: 0; }
  .course-fact { padding: 17px 12px; }
  .course-fact:first-child, .course-fact:last-child { padding-inline: 12px; }
  .course-fact strong { font-size: 14px; }
  .course-fact small { font-size: 11px; }
  .course-problem blockquote { padding-left: 18px; font-size: 24px; }
  .course-day-card header > div { flex-wrap: wrap; min-width: 0; }
  .course-sticky .button { width: 100%; }
  .course-ebook-cover { width: 100%; max-width: 178px; }
  .course-credentials span { align-items: start; flex-direction: column; gap: 4px; }
  .course-register-closed { padding: 28px 22px; }
  .course-form { padding: 24px 18px; }
  .course-final-cta { padding: 60px 0; }
}

/* --- Produto: marca, card, bloco e hub ------------------------------------
   Cânone: docs/CANONE-DESIGN-SISTEMA.md §2.8.1. Todo produto usa a mesma
   marca, direto sobre o fundo do card: o J para o Escritório, o avatar para o
   Rito, glifo de linha navy para os produtos de conteúdo. A pílula navy que
   envolvia tudo saiu em 27/08/2026 — ver §2.8.1. O nome acessível fica no
   heading do card. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }

/* Sem pílula. A `min-height` existe para alinhar o título dos cards vizinhos
   mesmo quando as marcas têm alturas diferentes. */
.product-mark {
  display: flex;
  align-items: center;
  min-height: 92px;
}
/* Os três tamanhos diferem de propósito: o que importa é o peso ótico, não a
   altura. Glifo de contorno pesa menos que o J sólido, e o avatar 3D precisa
   de mais área que os dois para ser reconhecível. */
.product-mark .product-icon {
  display: block;
  width: 60px;
  height: 60px;
  color: var(--navy);
}
/* O avatar do Rito é peça própria, quadrada e com alfa — não recorta. Vem
   maior que o J e que os glifos: é um render 3D com modelado e sombra, e
   abaixo de ~84px ele deixa de ser reconhecível e vira uma mancha azul. */
.product-mark .product-avatar {
  display: block;
  width: auto;
  height: 84px;
}
/* O J recortado do logotipo horizontal: navy com a gota azul, que é a versão
   para fundo claro. `cover` + `object-position: left` mostra só os 448px da
   esquerda do arquivo de 2560 — o J e a gota, sem a palavra. */
.product-mark .product-brand-icon {
  display: block;
  width: auto;
  height: 64px;
  aspect-ratio: 448 / 499;
  object-fit: cover;
  object-position: left center;
}

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.product-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { display: flex; min-width: 0; flex-direction: column; }
.product-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 0; }
.product-card-body h3 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
.product-card-body p { margin: 0; font-size: 15px; line-height: 1.55; }
.product-card-body .link, .product-card-body .button { margin-top: auto; padding-top: 2px; }

.product-block-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.product-block-head h2 { max-width: 640px; margin: 0; font-size: 35px; line-height: 40px; letter-spacing: -.6px; }
.product-block-head .eyebrow { margin-bottom: 14px; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: stretch; }
.feature { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); }
 /* Dentro do card com borda, a marca só recebe o respiro das bordas. */
.feature .product-mark { margin: 26px 30px 0; }
.feature-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; }
.feature-body h3 { margin: 0; color: var(--ink); font-size: 26px; letter-spacing: -.02em; line-height: 1.2; }
.feature-body p { margin: 0; font-size: 16px; line-height: 1.55; }
.feature-body .check-list { margin: 0; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 8px; }

.line-list { max-width: 920px; margin-inline: auto; }
.line-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.line-item h3 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.line-item p { margin: 0; font-size: 15px; line-height: 1.55; }

.cta-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta-split h2 { max-width: 640px; margin: 0 0 12px; }
.cta-split p { max-width: 640px; margin: 0; }

@media (max-width: 820px) {
  .product-grid, .product-grid-3, .feature-grid { grid-template-columns: 1fr; }
  .product-block-head { flex-direction: column; align-items: start; gap: 16px; }
  .line-item { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Rodapé como mapa do site --------------------------------------------
   Está em todas as páginas: é o lugar mais barato para dar entrada ao que não
   cabe no menu. Foi o que tirou o Glossário de zero entradas e deu à Oficina a
   primeira entrada estável. Cânone §2.9. */
.footer-map { padding: 76px 0 56px; color: var(--white); background: var(--navy); }
.footer-map-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; align-items: start; }
.footer-map .footer-lockup { display: block; width: min(220px, 100%); height: auto; margin: 0 0 18px; }
.footer-tagline { max-width: 300px; margin: 0 0 24px; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.5; }
.footer-map h2 {
  margin: 0 0 16px;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.footer-map ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-map li { line-height: 1.35; }
.footer-map li a { color: rgba(255, 255, 255, .82); font-size: 15px; text-decoration: none; }
.footer-map li a:hover { color: var(--white); text-decoration: underline; }

@media (max-width: 1199px) {
  .footer-map-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 44px; }
  .footer-map-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .footer-map { padding: 56px 0 40px; }
  .footer-map-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-map-grid { grid-template-columns: 1fr; }
}
.form-note { margin: 0; color: var(--gray); font-size: 14px; line-height: 1.5; }

/* Ação do cabeçalho: o e-book sai da lista e ganha destaque (cânone §2.9). */
.header-cta { flex: 0 0 auto; margin-left: 6px; }
.mobile-menu-cta { justify-self: start; margin-top: 22px; }
@media (max-width: 1199px) { .header-cta { display: none; } }

/* Página de prompts do e-book (destino dos selos COPIAR do PDF). */
.prompt-card { margin: 32px 0; padding: 20px 24px; border: 1px solid rgba(11, 29, 54, .14); border-radius: 12px; background: #fff; }
.prompt-card header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.prompt-card header h2 { font-size: 18px; margin: 0; }
.prompt-card header small { display: block; color: #7A8CA0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.prompt-card pre { margin: 0; padding: 16px; background: #0B1D36; color: #E6EEF8; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.prompt-copy { cursor: pointer; }
.prompt-copy[data-done="1"] { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }

/* Revisão editorial de 2026-09-06: herói da Home com ação secundária, nota
   de acesso no herói do Escritório e a página Quem Somos sem cards de conceito. */
.hero-copy .hero-actions { margin-top: 48px; }
.hero-copy .hero-actions .button { margin-top: 0; }
.page-hero-content .hero-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.about-credentials { display: grid; gap: 10px; margin-top: 28px; }
.about-credentials span { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-secondary, #5f6b78); font-size: 13px; }
.about-credentials b { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 820px) {
  .about-credentials span { align-items: start; flex-direction: column; gap: 4px; }
  .service-nav .container { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
}

/* Ilustrações da oficina e do livro no catálogo e no bloco compartilhado. */
.product-mark .product-illustration { display: block; width: 100px; height: 92px; object-fit: contain; object-position: left center; }