/* Texto corrido: Literata, desde 05/09/2026 (substituiu a Newsreader, escolha
   da Ruth). Fonte variável: um arquivo cobre todos os pesos, e o eixo óptico
   ajusta o desenho ao tamanho do texto sozinho. */
@font-face {
  font-family: "Literata";
  src: url("assets/fonts/Literata-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("assets/fonts/Literata-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("assets/fonts/Lato-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy-950: #0f182b;
  --navy-900: #16213a;
  --navy-700: #22304a;
  --navy-500: #3a4b6b;
  --navy-300: #6b7a94;
  --navy-100: #d7dce6;
  --navy-50: #eef1f6;
  --orange: #d25c1e;
  --orange-soft: #e28d60;
  --white: #ffffff;
  --ink: #18243a;
  --serif: "Poppins", "Lato", Arial, sans-serif;
  --sans: "Lato", Arial, sans-serif;
  --shell: min(1380px, calc(100vw - 96px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  color: var(--navy-900);
  background: var(--white);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(8, 11, 17, 0.32), rgba(8, 11, 17, 0));
  transition: background 240ms ease, box-shadow 240ms ease;
}

.site-header.is-scrolled,
.menu-open .site-header,
.site-header:has(.main-nav[data-open="true"]) {
  background: rgba(15, 24, 43, 0.93);
  box-shadow: 0 12px 38px rgba(3, 8, 18, 0.18);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transition: min-height 240ms ease;
}

.site-header.is-scrolled .header-inner {
  min-height: 82px;
}

.brand {
  display: inline-flex;
  width: 265px;
  flex: 0 0 auto;
  transition: width 240ms ease;
}

.site-header.is-scrolled .brand {
  width: 248px;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 30px);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  padding-block: 10px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--orange-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.main-nav .nav-contact {
  color: var(--orange-soft);
  font-weight: 700;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 900px;
  height: 100svh;
  max-height: 1050px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
}

.hero-video,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.08) brightness(0.9);
}

.hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 24, 43, 0.99) 0%, rgba(15, 24, 43, 0.88) 43%, rgba(15, 24, 43, 0.32) 74%, rgba(15, 24, 43, 0.2) 100%),
    linear-gradient(0deg, rgba(15, 24, 43, 0.88) 0%, transparent 48%);
}

.hero-arcs {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.58;
}

.hero-arcs .arc {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-arcs .arc-single {
  stroke: url("#hero-arc-gradient");
  stroke-width: 10;
  filter: drop-shadow(0 0 10px rgba(226, 141, 96, 0.28));
  animation: hero-arc-breathe 8s ease-in-out infinite alternate;
}

@keyframes hero-arc-breathe {
  from { opacity: 0.5; transform: translate3d(18px, -12px, 0); }
  to { opacity: 0.9; transform: translate3d(-8px, 12px, 0); }
}

@keyframes arc-turn {
  to { transform: rotate(360deg); }
}

.hero-traces {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

.hero-traces path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.2;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: trace-draw 10s ease-in-out infinite alternate;
}

.hero-traces path:nth-child(2) {
  animation-delay: 0.8s;
}

.hero-traces .trace-accent {
  stroke: var(--orange-soft);
  stroke-width: 1.8;
  animation-delay: 1.5s;
}

.hero-traces .light-trail {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.6;
  stroke-dasharray: 120 1680;
  stroke-dashoffset: 1800;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
  animation: light-run 8.5s linear infinite;
}

.hero-traces .light-trail-accent {
  stroke: var(--orange-soft);
  stroke-width: 3.2;
  stroke-dasharray: 170 1630;
  filter: drop-shadow(0 0 11px rgba(226, 141, 96, 0.95));
  animation-duration: 10.5s;
  animation-delay: -4s;
}

@keyframes trace-draw {
  0%, 12% { stroke-dashoffset: 1800; opacity: 0; }
  48%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes light-run {
  to { stroke-dashoffset: 0; }
}

.hero-content {
  position: relative;
  z-index: 3;
  min-height: calc(100% - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 152px;
}

.hero-content h1 {
  max-width: 840px;
  margin: 30px 0 30px;
  font-family: var(--serif);
  font-size: clamp(3rem, 4.15vw, 4.75rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.2vw, 1.28rem);
  font-weight: 300;
  line-height: 1.6;
}

.eyebrow {
  margin: 0;
  color: var(--orange);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow.light {
  color: var(--orange-soft);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 42px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button-accent {
  color: var(--white);
  background: var(--orange);
}

.button-accent:hover,
.button-accent:focus-visible {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-block: 6px;
  border-bottom: 1px solid var(--orange);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-link.light {
  border-color: rgba(255, 255, 255, 0.42);
}

.text-link span {
  transition: transform 180ms ease;
}

.text-link:hover span,
.text-link:focus-visible span {
  transform: translateX(5px);
}

.hero-geometry {
  position: absolute;
  z-index: 3;
  right: 3vw;
  bottom: 124px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right bottom;
}

.hero-line {
  width: 100px;
  height: 1px;
  background: var(--orange-soft);
}

.hero-foot {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-foot span:not(:first-child) {
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.news-strip {
  color: var(--navy-900);
  background: var(--white);
  border-bottom: 1px solid var(--navy-100);
}

.news-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr 1fr 1fr;
}

.news-heading,
.news-item {
  min-height: 420px;
  padding: 40px 30px 42px;
}

.news-heading {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news-heading h2 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.3vw, 2.7rem);
  font-weight: 300;
  line-height: 1.08;
}

.news-heading h2 strong {
  display: block;
  color: var(--orange);
  font-weight: 300;
}

.news-heading a,
.news-item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--orange);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.news-item {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--navy-100);
  transition: color 220ms ease, background 220ms ease;
}

.news-featured {
  color: var(--white);
  background: var(--navy-900);
  border-top: 5px solid var(--orange);
  padding-top: 35px;
}

.news-mosaic {
  min-height: 145px;
  margin: -40px -30px 30px;
  border-bottom: 1px solid var(--navy-100);
  background-color: var(--navy-50);
  background-image: url("assets/brand/mosaic-block.svg");
  background-repeat: repeat-x;
  background-size: 235px 235px;
}

.news-featured .news-mosaic {
  margin-top: -35px;
  border-bottom-color: rgba(255, 255, 255, 0.16);
  background-color: var(--navy-950);
  background-image: url("assets/brand/mosaic-dark.svg");
  background-size: auto 145px;
}

.news-mosaic-a { background-position: 10% 44%; }
.news-mosaic-b { background-position: 48% 28%; }
.news-mosaic-c { background-position: 88% 72%; }

.news-meta {
  margin: 0 0 22px;
  color: var(--orange);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-featured .news-meta {
  color: var(--orange-soft);
}

.news-item h3 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.35vw, 1.38rem);
  font-weight: 400;
  line-height: 1.35;
}

.news-featured h3 {
  font-size: clamp(1.25rem, 1.65vw, 1.7rem);
  font-weight: 300;
}

.news-item:not(.news-featured):hover {
  color: var(--white);
  background: var(--navy-500);
}

.section {
  padding: 150px 0;
}

.statement-grid,
.method-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 3.15fr);
  gap: 7vw;
}

.section-marker {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 8px;
  color: var(--navy-300);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-marker span {
  color: var(--orange);
}

.section-marker p {
  margin: 0;
}

.statement-copy h2,
.section-heading h2,
.method-main h2,
.contact h2 {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: clamp(2.65rem, 4vw, 4.65rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.statement-copy h2 {
  max-width: 1020px;
}

.statement-body {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  margin: 64px 0 38px;
  padding-top: 32px;
  border-top: 1px solid var(--navy-100);
}

.statement-body p {
  margin: 0;
  color: var(--navy-500);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.6;
}

.audiences {
  color: var(--white);
  background: var(--navy-500);
}

.audiences .section-marker,
.audiences .section-marker span {
  color: rgba(255, 255, 255, 0.66);
}

.audiences .section-marker span {
  color: var(--orange-soft);
}

.audiences .section-heading {
  margin-bottom: 70px;
}

.audience-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.audience-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
}

.audience-card + .audience-card {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.audience-card > span {
  color: var(--orange-soft);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.audience-card h3 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.7vw, 3.3rem);
  font-weight: 400;
  line-height: 1.08;
}

.audience-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.55;
}

.audience-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
}

.audience-image::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--audience-image);
  background-position: center;
  background-size: cover;
  opacity: 0.5;
  transition: transform 600ms ease, opacity 600ms ease;
}

.audience-company {
  --audience-image: url("assets/article-capag-v07.webp");
}

.audience-family {
  --audience-image: url("assets/article-itbi-v07.webp");
}

.audience-public {
  --audience-image: url("assets/article-contrato-publico-v07.webp");
}

.audience-image::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 24, 43, 0.35), rgba(15, 24, 43, 0.97));
}

.audience-image:hover::before {
  transform: scale(1.045);
  opacity: 0.55;
}

.renewal {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: #080b11;
}

.renewal-grid {
  min-height: 820px;
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
  gap: 6vw;
  align-items: center;
}

.renewal-copy {
  position: relative;
  z-index: 2;
  padding: 120px 0;
}

.renewal .section-marker {
  margin-bottom: 96px;
  color: rgba(255, 255, 255, 0.58);
}

.renewal .section-marker span {
  color: var(--orange-soft);
}

.renewal-message h2 {
  max-width: 690px;
  margin: 22px 0 34px;
  font-family: var(--serif);
  font-size: clamp(3rem, 4.35vw, 5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.renewal-message h2 strong {
  color: var(--orange-soft);
  font-weight: 400;
}

.renewal-message > p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.7;
}

.renewal-message .renewal-note {
  margin-top: 30px;
  padding: 22px 0 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  border-left: 2px solid var(--orange);
  color: rgba(255, 255, 255, 0.92);
}

.renewal-art {
  position: relative;
  min-height: 820px;
  display: grid;
  place-items: center;
  margin-right: -12vw;
  isolation: isolate;
}

.renewal-art svg {
  position: absolute;
  width: min(60vw, 850px);
  height: min(60vw, 850px);
}

.renewal-ring {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.renewal-ring.ring-main {
  stroke: url("#renewal-arc-gradient");
  stroke-width: 12;
  stroke-dasharray: 1115 406;
  filter: drop-shadow(0 0 12px rgba(226, 141, 96, 0.34));
  animation: arc-turn 36s linear infinite;
}

.renewal-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.2;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  vector-effect: non-scaling-stroke;
  animation: renewal-flow 8s ease-in-out infinite alternate;
}

.renewal-route.route-accent {
  stroke: var(--orange-soft);
  animation-delay: 1.2s;
}

.renewal-center {
  min-width: 152px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 22px;
  border-left: 3px solid var(--orange-soft);
  border-right: 3px solid var(--orange-soft);
  color: var(--white);
  background: rgba(8, 11, 17, 0.94);
  box-shadow: 0 0 42px rgba(8, 11, 17, 0.9);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@keyframes renewal-flow {
  0%, 12% { stroke-dashoffset: 1500; opacity: 0.15; }
  76%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

.practice {
  color: var(--white);
  background: var(--navy-900);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 3.15fr);
  gap: 7vw;
  margin-bottom: 86px;
}

.section-heading h2 {
  max-width: 980px;
}

.inverse .section-marker,
.inverse .section-marker span {
  color: rgba(255, 255, 255, 0.5);
}

.inverse .section-marker span {
  color: var(--orange-soft);
}

.practice-list {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.practice-item {
  position: relative;
  min-height: 145px;
  display: grid;
  grid-template-columns: 70px minmax(230px, 1.15fr) minmax(300px, 1fr) 40px;
  gap: 34px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 220ms ease, padding 220ms ease;
}

.practice-item:hover {
  padding-inline: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.practice-item.featured {
  min-height: 190px;
  background: var(--orange);
  border-bottom-color: var(--orange);
  padding-inline: 28px;
}

.practice-number,
.practice-kicker {
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.practice-number {
  color: var(--orange-soft);
}

.featured .practice-number,
.featured .practice-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.practice-kicker {
  margin: 0 0 8px;
}

.practice-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}

.practice-item > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.55;
}

.featured > p {
  color: rgba(255, 255, 255, 0.88);
}

.practice-arrow {
  font-size: 1.25rem;
}

.focus-band {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: var(--white);
  background: var(--navy-500);
}

.focus-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 2fr) minmax(260px, 0.8fr);
  gap: 5vw;
  align-items: center;
}

.focus-art {
  position: relative;
  min-height: 180px;
  display: grid;
  place-items: center;
}

.focus-art img {
  position: relative;
  z-index: 2;
  width: 135px;
}

.focus-art span {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.focus-band blockquote {
  margin: 0;
}

.focus-band blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.focus-note {
  margin: 0;
  padding-left: 30px;
  border-left: 2px solid var(--orange-soft);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
}

.method {
  background:
    linear-gradient(90deg, transparent 49.96%, rgba(34, 48, 74, 0.08) 50%, transparent 50.04%),
    var(--white);
}

.method-main h2 {
  max-width: 900px;
}

.method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 72px;
  border-top: 1px solid var(--navy-100);
}

.method-steps article {
  min-height: 360px;
  padding: 34px 34px 34px 0;
}

.method-steps article + article {
  padding-left: 34px;
  border-left: 1px solid var(--navy-100);
}

.method-steps span {
  color: var(--orange);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.method-steps h3 {
  max-width: 260px;
  margin: 72px 0 20px;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.15;
}

.method-steps p {
  margin: 0;
  color: var(--navy-500);
}

.people {
  background: var(--navy-50);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-card {
  min-height: 650px;
  display: grid;
  grid-template-rows: 230px 1fr;
  padding: 54px;
}

.person-dark {
  color: var(--white);
  background: var(--navy-900);
}

.person-light {
  color: var(--navy-900);
  background: var(--white);
}

.person-monogram {
  align-self: start;
  color: var(--orange-soft);
  font-family: var(--serif);
  font-size: 7rem;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.08em;
  opacity: 0.9;
}

.person-light .person-monogram {
  color: var(--navy-100);
}

.person-role {
  margin: 0 0 10px;
  color: var(--orange-soft);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.person-light .person-role {
  color: var(--orange);
}

.person-copy h3 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 3.4vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
}

.person-copy > p:not(.person-role) {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--serif);
  font-size: 1.08rem;
}

.person-light .person-copy > p:not(.person-role) {
  color: var(--navy-500);
}

.person-copy dl {
  margin: 36px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.person-light .person-copy dl {
  border-color: var(--navy-100);
}

.person-copy dl div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.person-light .person-copy dl div {
  border-color: var(--navy-100);
}

.person-copy dt {
  color: var(--orange-soft);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.person-light .person-copy dt {
  color: var(--orange);
}

.person-copy dd {
  margin: 0;
  font-size: 1rem;
}

.contact {
  padding: 130px 0;
  color: var(--white);
  background:
    radial-gradient(circle at calc(100% + 95px) calc(100% + 65px), transparent 0 304px, rgba(226, 141, 96, 0.4) 305px 309px, transparent 310px),
    var(--navy-500);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 10vw;
}

.contact h2 {
  max-width: 750px;
}

.contact-copy {
  max-width: 480px;
  padding-top: 36px;
}

.contact-copy > p {
  margin: 0 0 34px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif);
  font-size: 1.18rem;
}

.contact-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
}

.site-footer {
  color: var(--white);
  background: var(--navy-950);
}

.footer-top {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.footer-top > img {
  width: 265px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px 34px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--orange-soft);
}

.footer-bottom {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  :root {
    --shell: min(100% - 56px, 920px);
  }

  .main-nav {
    gap: 20px;
  }

  .main-nav a:not(.nav-contact) {
    display: none;
  }

  .hero {
    min-height: 820px;
  }

  .hero-content h1 {
    max-width: 650px;
  }

  .statement-grid,
  .method-grid,
  .section-heading {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 50px;
  }

  .news-grid {
    grid-template-columns: 0.75fr 1.25fr;
  }

  .news-heading,
  .news-item {
    min-height: 390px;
  }

  .news-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--navy-100);
  }

  .news-item:nth-child(4) {
    border-top: 1px solid var(--navy-100);
  }

  .renewal-grid {
    min-height: 760px;
    grid-template-columns: minmax(360px, 0.9fr) minmax(400px, 1.1fr);
    gap: 34px;
  }

  .renewal-copy {
    padding: 96px 0;
  }

  .renewal-art {
    min-height: 760px;
    margin-right: -18vw;
  }

  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .audience-card:first-child {
    grid-column: 1 / -1;
  }

  .audience-card:nth-child(2) {
    border-left: 0;
  }

  .practice-item {
    grid-template-columns: 48px minmax(220px, 1fr) minmax(260px, 1fr) 24px;
    gap: 22px;
  }

  .focus-grid {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .focus-note {
    grid-column: 2;
  }

  .person-card {
    padding: 40px;
  }

}

@media (max-width: 760px) {
  :root {
    --shell: calc(100% - 40px);
  }

  .site-header {
    position: fixed;
  }

  .header-inner {
    min-height: 82px;
  }

  .brand {
    width: 205px;
  }

  .site-header.is-scrolled .header-inner {
    min-height: 82px;
  }

  .site-header.is-scrolled .brand {
    width: 205px;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    color: var(--white);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .menu-icon,
  .menu-icon::after {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }

  .menu-icon::after {
    transform: translateY(6px);
  }

  .menu-open .menu-icon {
    transform: translateY(3px) rotate(45deg);
  }

  .menu-open .menu-icon::after {
    transform: rotate(-90deg);
  }

  .main-nav {
    position: fixed;
    inset: 82px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 46px 20px;
    color: var(--white);
    background: var(--navy-950);
    transform: translateX(100%);
    transition: transform 220ms ease;
  }

  .main-nav[data-open="true"] {
    transform: translateX(0);
  }

  .main-nav a,
  .main-nav a:not(.nav-contact) {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--serif);
    font-size: 1.7rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .hero {
    min-height: 760px;
    height: 100svh;
  }

  .hero-video {
    object-position: 54% center;
  }

  .hero-arcs {
    transform: translateX(18%);
    opacity: 0.44;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(15, 24, 43, 0.97), rgba(15, 24, 43, 0.55)),
      linear-gradient(0deg, rgba(15, 24, 43, 0.94), transparent 55%);
  }

  .hero-content {
    min-height: calc(100% - 118px);
    padding-top: 116px;
  }

  .hero-content h1 {
    max-width: 15ch;
    margin: 24px 0;
    font-size: clamp(2.35rem, 9.4vw, 3.05rem);
    line-height: 1.08;
  }

  .hero-lead {
    max-width: 35ch;
    font-size: 1.1rem;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
  }

  .hero-geometry {
    display: none;
  }

  .hero-foot {
    min-height: 100px;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 0.9rem;
  }

  .hero-foot span:nth-child(3) {
    display: none;
  }

  .hero-foot span:not(:first-child) {
    padding-left: 18px;
  }

  .section {
    padding: 92px 0;
  }

  .statement-grid,
  .method-grid,
  .section-heading {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .news-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .news-heading,
  .news-item {
    min-height: 0;
    padding: 34px 20px 38px;
  }

  .news-heading {
    min-height: 190px;
  }

  .news-item,
  .news-item:nth-child(3),
  .news-item:nth-child(4) {
    min-height: 355px;
    border-top: 1px solid var(--navy-100);
    border-left: 0;
  }

  .news-featured {
    padding-top: 33px;
    border-top: 5px solid var(--orange);
  }

  .news-mosaic {
    min-height: 130px;
    margin: -34px -20px 26px;
  }

  .news-featured .news-mosaic {
    margin-top: -33px;
    background-size: auto 130px;
  }

  .section-heading {
    margin-bottom: 54px;
  }

  .section-marker {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--navy-100);
  }

  .inverse .section-marker,
  .compact .section-marker {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .statement-copy h2,
  .section-heading h2,
  .method-main h2,
  .contact h2 {
    font-size: clamp(2.35rem, 10.2vw, 3.5rem);
  }

  .statement-body {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 44px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .audience-card,
  .audience-card:first-child {
    min-height: 360px;
    grid-column: auto;
    padding: 32px 24px;
  }

  .audience-card + .audience-card {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 0;
  }

  .renewal-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .renewal-copy {
    padding: 92px 0 44px;
  }

  .renewal .section-marker {
    margin-bottom: 58px;
    border-color: rgba(255, 255, 255, 0.18);
  }

  .renewal-message h2 {
    font-size: clamp(2.65rem, 11vw, 3.7rem);
  }

  .renewal-art {
    min-height: 510px;
    margin: 0 -120px -45px -80px;
  }

  .renewal-art svg {
    width: 540px;
    height: 540px;
  }

  .renewal-center {
    min-width: 138px;
    padding: 15px 18px;
    font-size: 0.92rem;
  }

  .practice-item,
  .practice-item.featured {
    min-height: 0;
    grid-template-columns: 36px 1fr 24px;
    gap: 14px;
    padding: 32px 0;
  }

  .practice-item:hover {
    padding-inline: 0;
  }

  .practice-item.featured {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .practice-item > p {
    grid-column: 2 / -1;
  }

  .practice-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .focus-band {
    padding: 86px 0;
  }

  .focus-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .focus-art {
    min-height: 120px;
    justify-items: start;
  }

  .focus-art img {
    width: 100px;
  }

  .focus-art span {
    left: -80px;
    width: 220px;
    height: 220px;
  }

  .focus-note {
    grid-column: 1;
  }

  .method {
    background: var(--white);
  }

  .method-steps {
    grid-template-columns: 1fr;
    margin-top: 50px;
  }

  .method-steps article,
  .method-steps article + article {
    min-height: 0;
    padding: 30px 0 42px;
    border-left: 0;
    border-bottom: 1px solid var(--navy-100);
  }

  .method-steps h3 {
    max-width: none;
    margin: 26px 0 14px;
  }

  .people-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .person-card {
    min-height: 0;
    grid-template-rows: 140px 1fr;
    padding: 34px 28px 42px;
  }

  .person-monogram {
    font-size: 5rem;
  }

  .person-copy dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .insight-card,
  .lead-card {
    min-height: 360px;
    grid-column: auto;
    padding: 34px 0;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .contact {
    padding: 92px 0;
  }

  .contact-grid {
    gap: 34px;
  }

  .contact-copy {
    padding-top: 0;
  }

  .footer-top {
    min-height: 260px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-bottom {
    min-height: 140px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   Modo de composição: cada faixa pode alternar entre o site publicado e o
   protótipo. Estes controles existem apenas nesta versão de trabalho.
   -------------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

.compare-band {
  position: relative;
  scroll-margin-top: 82px;
}

.version-picker {
  position: absolute;
  z-index: 14;
  top: 22px;
  right: max(20px, calc((100vw - min(1380px, calc(100vw - 96px))) / 2));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(22, 33, 58, 0.16);
  box-shadow: 0 10px 28px rgba(8, 11, 17, 0.16);
  backdrop-filter: blur(12px);
}

.compare-band[data-compare-section="hero"] .version-picker {
  top: 118px;
}

.version-picker > span {
  padding: 0 9px 0 7px;
  color: var(--navy-500);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.version-picker button,
.comparison-toolbar button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.version-picker button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--navy-500);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.version-picker button[aria-pressed="true"] {
  color: var(--white);
  background: var(--navy-900);
}

.comparison-toolbar {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  color: var(--white);
  background: rgba(15, 24, 43, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 14px 38px rgba(8, 11, 17, 0.28);
  backdrop-filter: blur(14px);
}

.comparison-toolbar span {
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.comparison-toolbar button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.comparison-toolbar button:hover,
.comparison-toolbar button:focus-visible {
  color: var(--navy-900);
  background: var(--white);
}

.compare-ui-hidden .version-picker {
  display: none;
}

.hero-published .site-header {
  background: rgba(15, 24, 43, 0.95);
  box-shadow: 0 12px 38px rgba(3, 8, 18, 0.15);
  backdrop-filter: blur(16px);
}

/* Faixas publicadas, reconstruídas para comparação lado a lado no protótipo. */

.published-pane {
  color: var(--navy-900);
  background: var(--white);
  font-family: "Literata", Georgia, serif;
}

.published-pane h1,
.published-pane h2,
.published-pane h3 {
  font-family: "Poppins", var(--sans);
  font-weight: 300;
}

.published-pane p {
  margin: 0;
}

.published-pane .published-lead {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.5;
}

.published-hero {
  min-height: 820px;
  display: grid;
  align-items: center;
  padding: 160px 0 90px;
  background: var(--white);
}

.published-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
}

.published-hero-copy h1 {
  max-width: 760px;
  margin: 22px 0 32px;
  font-size: clamp(3.5rem, 6vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.published-hero-copy h1 strong {
  display: block;
  color: var(--orange);
  font-weight: 300;
}

.published-hero-copy > p:not(.eyebrow) {
  max-width: 34ch;
  color: var(--navy-500);
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
}

.published-symbol {
  display: flex;
  justify-content: center;
}

.published-symbol img {
  width: min(28vw, 390px);
  animation: symbol-float 7s ease-in-out infinite alternate;
}

.published-button {
  color: var(--white);
  background: var(--navy-700);
  border-radius: 999px;
}

.published-news {
  padding: 110px 0 120px;
}

.published-news-heading {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 58px;
}

.published-news-heading h2 {
  margin-top: 18px;
  font-size: clamp(2.8rem, 4vw, 4.8rem);
  line-height: 1.05;
}

.published-news-heading h2 strong {
  display: block;
  color: var(--orange);
  font-weight: 300;
}

.published-mosaic,
.published-cover {
  background-color: var(--navy-50);
  background-image: url("assets/brand/mosaic-block.svg");
  background-repeat: repeat;
}

.published-mosaic {
  min-height: 190px;
  background-size: 245px 245px;
  background-position: 50% 42%;
}

.published-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.published-news-grid article {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--navy-900);
}

.published-cover {
  min-height: 180px;
  margin-bottom: 4px;
  background-size: 260px 260px;
}

.cover-a { background-position: 10% 38%; }
.cover-b { background-position: 52% 62%; }
.cover-c { background-position: 86% 24%; }

.published-news-grid h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  line-height: 1.28;
}

.published-news-grid article > p:last-child {
  color: var(--navy-500);
  font-size: 1.06rem;
}

.published-office-grid {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
  gap: clamp(50px, 7vw, 110px);
}

.published-office h2 {
  max-width: 12ch;
  margin-top: 20px;
  font-size: clamp(2.8rem, 4.2vw, 5rem);
  line-height: 1.08;
}

.published-office-grid > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 26px;
  color: var(--navy-500);
  font-size: 1.25rem;
}

.published-audiences {
  background: var(--navy-50);
}

.published-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 72px);
  margin-top: 46px;
}

.published-audience-grid article {
  padding-top: 26px;
  border-top: 2px solid var(--navy-900);
}

.published-audience-grid h2 {
  max-width: 15ch;
  margin: 0 0 20px;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  line-height: 1.2;
}

.published-audience-grid p {
  color: var(--navy-500);
  font-size: 1.2rem;
}

.published-principles {
  padding: 88px 0;
  color: var(--white);
  background: var(--navy-700);
}

.published-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.published-principles article {
  padding-right: 44px;
}

.published-principles article + article {
  padding-left: 44px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.published-principles article > span {
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--orange-soft);
}

.published-principles h2 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  font-weight: 400;
}

.published-principles p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.03rem;
}

.published-practice {
  overflow: hidden;
}

.published-practice-grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: stretch;
}

.published-practice h2 {
  max-width: 14ch;
  margin: 20px 0 42px;
  font-size: clamp(2.6rem, 4vw, 4.8rem);
  line-height: 1.08;
}

.published-practice-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy-900);
  list-style: none;
}

.published-practice-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 19px 0;
  border-bottom: 1px solid var(--navy-100);
  color: var(--navy-300);
  font-family: "Poppins", var(--sans);
  font-size: 1.18rem;
}

.published-practice-list li span {
  color: var(--orange);
  font-size: 0.88rem;
  font-weight: 700;
}

.published-practice-list .is-active {
  color: var(--navy-900);
}

.published-practice-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 70px;
  background: var(--navy-50);
}

.published-practice-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  margin: 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--navy-100);
  list-style: none;
}

.published-practice-panel li {
  color: var(--navy-500);
  font-family: "Poppins", var(--sans);
  font-size: 1.03rem;
}

.published-commitment {
  padding: 90px 0;
  border-bottom: 1px solid var(--navy-100);
}

.published-commitment-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  align-items: start;
}

.published-commitment-grid > span {
  width: 58px;
  height: 3px;
  margin-top: 17px;
  background: var(--orange);
}

.published-commitment p {
  max-width: 28ch;
  font-family: "Poppins", var(--sans);
  font-size: clamp(2rem, 3vw, 3.7rem);
  font-weight: 300;
  line-height: 1.14;
}

.published-method {
  color: var(--white);
  background: var(--navy-950);
}

.published-method-heading {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 72px;
}

.published-method-heading h2 {
  max-width: 14ch;
  margin-top: 18px;
  font-size: clamp(3rem, 4.6vw, 5.3rem);
  line-height: 1.08;
}

.published-method-heading > p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.18rem;
}

.published-method-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 55px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.published-method-steps li {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.published-method-steps span {
  color: var(--orange-soft);
  font-family: "Poppins", var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.published-method-steps h3 {
  margin: 18px 0 14px;
  color: var(--white);
  font-size: 1.7rem;
}

.published-method-steps p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.08rem;
}

.published-people-heading {
  max-width: 880px;
  margin: 0 auto 68px;
  text-align: center;
}

.published-people-heading h2 {
  margin: 18px 0;
  font-size: clamp(3rem, 4.8vw, 5rem);
  line-height: 1.08;
}

.published-people-heading > p:last-child {
  color: var(--navy-500);
  font-size: 1.28rem;
}

.published-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(54px, 8vw, 120px);
}

.published-people-grid article {
  padding-top: 32px;
  border-top: 1px solid var(--navy-900);
}

.published-people-grid h3 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 2.8vw, 3rem);
  font-weight: 400;
}

.published-people-grid article > p:last-child {
  margin-top: 28px;
  color: var(--navy-500);
  font-size: 1.18rem;
}

.published-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(52px, 8vw, 120px);
}

.published-contact h2 {
  max-width: 12ch;
  margin: 18px 0 30px;
  font-size: clamp(3rem, 4.8vw, 5.1rem);
  line-height: 1.08;
}

.published-contact-grid > div > p:not(.eyebrow) {
  max-width: 38ch;
  margin-bottom: 20px;
  color: var(--navy-500);
  font-size: 1.2rem;
}

.published-contact-grid > div > a {
  color: var(--orange);
  font-family: "Poppins", var(--sans);
  font-weight: 500;
}

.published-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
}

.published-form label {
  color: var(--navy-500);
  font-family: "Poppins", var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.published-form input,
.published-form textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--navy-100);
  border-radius: 0;
  color: var(--navy-900);
  background: transparent;
  font: 1.08rem "Literata", Georgia, serif;
}

.published-form .wide {
  grid-column: 1 / -1;
}

.published-form .button {
  justify-self: start;
}

/* Notícias do protótipo: composição editorial alinhada e imagens ligadas às áreas. */

.news-editorial {
  padding: 112px 0 122px;
}

.news-editorial-heading {
  display: grid;
  grid-template-columns: minmax(340px, 1.3fr) minmax(280px, 0.75fr) auto;
  gap: 56px;
  align-items: end;
  padding: 38px 0 46px;
  border-top: 1px solid var(--navy-900);
}

.news-editorial-heading h2 {
  margin: 14px 0 0;
  font-size: clamp(3.2rem, 5.2vw, 6.35rem);
  line-height: 0.98;
}

.news-editorial-heading h2 strong {
  color: var(--orange);
  font-weight: inherit;
}

.news-editorial-heading > a {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--orange);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.news-intro {
  max-width: 480px;
  margin: 0;
  color: var(--navy-500);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.6;
}

.news-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--navy-100);
  border-bottom: 1px solid var(--navy-100);
}

.editorial-card {
  min-height: 590px;
  display: grid;
  grid-template-rows: 265px 1fr;
  overflow: hidden;
  border-right: 1px solid var(--navy-100);
  background: var(--white);
}

.editorial-card:first-child {
  border-left: 1px solid var(--navy-100);
}

.editorial-card-featured {
  color: var(--white);
  background: var(--navy-900);
}

.editorial-photo {
  min-height: 265px;
  background-position: center;
  background-size: cover;
  filter: saturate(0.72) contrast(1.06);
  transition: transform 650ms ease, filter 650ms ease;
}

.editorial-card:hover .editorial-photo {
  transform: scale(1.035);
  filter: saturate(0.95) contrast(1.08);
}

.editorial-photo.article-itbi {
  background-image: linear-gradient(rgba(15, 24, 43, 0.05), rgba(15, 24, 43, 0.3)), url("assets/article-itbi-v07.webp");
  background-position: 50% 55%;
}

.editorial-photo.article-capag {
  background-image: linear-gradient(rgba(15, 24, 43, 0.06), rgba(15, 24, 43, 0.24)), url("assets/article-capag-v07.webp");
  background-position: 52% 52%;
}

.editorial-photo.article-public-contract {
  background-image: linear-gradient(rgba(15, 24, 43, 0.06), rgba(15, 24, 43, 0.24)), url("assets/article-contrato-publico-v07.webp");
  background-position: 50% 60%;
}

.editorial-copy {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 34px;
}

.editorial-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.7vw, 1.82rem);
  font-weight: 300;
  line-height: 1.3;
}

.editorial-copy > a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  border-bottom: 1px solid var(--orange);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.editorial-card-featured .news-meta {
  color: var(--orange-soft);
}

/* Alterações vindas do PowerPoint editado. */

.statement-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 70px;
}

.statement-symbol {
  width: min(19vw, 270px);
  margin-left: -8px;
}

.renewal-symbol {
  position: absolute;
  z-index: 2;
  width: min(34vw, 460px);
  filter: drop-shadow(0 0 32px rgba(226, 141, 96, 0.12));
  animation: symbol-float 7s ease-in-out infinite alternate;
}

@keyframes symbol-float {
  from { transform: translateY(-10px) rotate(-1deg); }
  to { transform: translateY(12px) rotate(1deg); }
}

.renewal-art .renewal-center {
  position: absolute;
  z-index: 3;
  top: 79%;
  left: 50%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}

.focus-band.focus-light {
  padding: 145px 0;
  color: var(--navy-900);
  background: #f7f5f1;
}

.focus-light-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.focus-light blockquote {
  max-width: 1100px;
}

.focus-light blockquote p {
  font-size: clamp(3rem, 5vw, 6.1rem);
}

.focus-light .focus-note {
  max-width: 680px;
  padding: 34px 0 0;
  border-top: 2px solid var(--orange);
  border-left: 0;
  color: var(--navy-500);
  font-size: 1.25rem;
}

@media (max-width: 1050px) {
  .published-hero-grid,
  .published-office-grid,
  .published-practice-grid,
  .published-contact-grid {
    grid-template-columns: 1fr;
  }

  .published-symbol img {
    width: 250px;
  }

  .published-news-grid,
  .published-audience-grid,
  .published-principles-grid,
  .published-method-steps {
    grid-template-columns: 1fr;
  }

  .published-principles-grid {
    gap: 34px;
  }

  .published-principles article,
  .published-principles article + article {
    padding: 28px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }

  .news-editorial-heading {
    grid-template-columns: 1.25fr 1fr;
    gap: 28px 44px;
  }

  .news-editorial-heading > a {
    grid-column: 2;
    justify-self: start;
  }

  .news-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-card:nth-child(3) {
    min-height: 420px;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    border-top: 1px solid var(--navy-100);
  }
}

@media (max-width: 760px) {
  .version-picker {
    top: 12px;
    right: 10px;
  }

  .compare-band[data-compare-section="hero"] .version-picker {
    top: 92px;
  }

  .version-picker > span {
    display: none;
  }

  .comparison-toolbar {
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow-x: auto;
  }

  .comparison-toolbar span {
    display: none;
  }

  .comparison-toolbar button {
    flex: 1 0 auto;
  }

  .published-hero {
    min-height: 760px;
    padding: 150px 0 80px;
  }

  .published-hero-grid,
  .published-news-heading,
  .published-office-grid,
  .published-practice-grid,
  .published-method-heading,
  .published-contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .published-hero-copy h1 {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .published-news,
  .published-commitment,
  .published-principles {
    padding: 86px 0;
  }

  .published-news-grid,
  .published-audience-grid,
  .published-people-grid,
  .published-method-steps {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .published-practice-panel {
    padding: 34px 24px;
  }

  .published-practice-panel ul,
  .published-form {
    grid-template-columns: 1fr;
  }

  .published-commitment-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .news-editorial {
    padding: 86px 0;
  }

  .news-editorial-heading,
  .news-editorial-grid {
    grid-template-columns: 1fr;
  }

  .editorial-card,
  .editorial-card:nth-child(3) {
    min-height: 0;
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 250px minmax(280px, auto);
    border-top: 1px solid var(--navy-100);
  }

  .news-editorial-heading {
    gap: 24px;
    padding: 38px 0;
  }

  .news-editorial-heading > a {
    grid-column: auto;
  }

  .editorial-card {
    grid-template-rows: 250px minmax(280px, auto);
  }

  .statement-side {
    gap: 34px;
  }

  .statement-symbol {
    width: 160px;
  }

  .renewal-symbol {
    width: 330px;
  }

  .renewal-art .renewal-center {
    top: 76%;
  }

  .focus-band.focus-light {
    padding: 100px 0;
  }

  .focus-light blockquote p {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
}

@media print {
  .version-picker,
  .comparison-toolbar {
    display: none !important;
  }
}


/* Ajustes da home, pedidos pela Ruth na revisão do protótipo em 04/09/2026.
   Cada item é numerado e traz o motivo. Para desfazer um deles, apague o bloco
   correspondente e monte a home de novo (node _montagem/home/montar-home.mjs).
   O prefixo #palco existe porque todo o conteúdo da página fica dentro de uma
   div com esse id: é o que garante que estas regras vençam as do base.css. */

/* --- pedidos feitos nos comentários, 04/09/2026 ------------------ */

/* 1. Sem o arco decorativo na abertura. */
#palco .hero-arcs { display: none; }

/* 2. Botão principal branco, laranja quando o mouse passa
      (era o contrário: laranja cheio, branco no hover). */
#palco .button-accent {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
}
#palco .button-accent:hover,
#palco .button-accent:focus-visible {
  color: var(--white);
  background: var(--orange);
  border-color: var(--orange);
}
/* o link ao lado do botão segue a mesma regra: laranja quando o mouse passa */
#palco .text-link:hover,
#palco .text-link:focus-visible { color: var(--orange); }
#palco .text-link.light:hover,
#palco .text-link.light:focus-visible { color: var(--orange-soft); }

/* 3. Rodapé da abertura centralizado, em branco e com a cidade ao lado da
      atuação, separadas pelo filete que o protótipo já usava.
      (Sem uso desde 06/09/2026: o rodapé da abertura saiu inteiro, a pedido
      dela, no montar-home.mjs. As regras ficam para o caso de voltar.) */
#palco .hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 32px;
  text-align: center;
  color: var(--white);
}
#palco .hero-foot span { color: var(--white); }
#palco .hero-foot span:not(:first-child) { padding-left: 32px; }

/* 4. Faixa de artigos na versão publicada: as fotos do protótipo no lugar
      do mosaico, mantido todo o resto (títulos, chamadas, três colunas). */
#palco .published-cover {
  background-color: var(--navy-100);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#palco .cover-a {
  background-image: linear-gradient(rgba(15, 24, 43, 0.05), rgba(15, 24, 43, 0.3)), url("assets/article-itbi-v07.webp");
}
#palco .cover-b {
  background-image: linear-gradient(rgba(15, 24, 43, 0.06), rgba(15, 24, 43, 0.24)), url("assets/article-capag-v07.webp");
}
/* a terceira capa é o texto do Tema 1.113 na lei de Belo Horizonte: entrou uma
   vista da cidade no lugar da foto de contrato público, que não casava */
#palco .cover-c {
  background-image: linear-gradient(rgba(15, 24, 43, 0.1), rgba(15, 24, 43, 0.34)), url("assets/bh-praca-liberdade.jpg");
  background-position: 50% 58%;
}

/* 5. Sem os números decorativos das seções e dos cards de Quem atendemos.
      Os do método e das áreas continuam, porque ali a ordem é informação. */
#palco .section-marker span,
#palco .audience-card > span { display: none; }
#palco .audience-card { justify-content: flex-end; }

/* 6. O rótulo da seção ("O escritório", "Quem atendemos") maior e com
      mais contraste, em vez do cinza claro. */
#palco .section-marker {
  font-size: 1.26rem;
  letter-spacing: 0.14em;
  color: var(--navy-900);
}
#palco .audiences .section-marker,
#palco .renewal .section-marker,
#palco .practice .section-marker,
#palco .section-heading.inverse .section-marker { color: var(--white); }

/* 7. Ícone maior na faixa O escritório. A coluna da esquerda precisa crescer
      junto, senão a imagem esbarra na largura da própria coluna. */
#palco .statement-grid { grid-template-columns: minmax(220px, 1.35fr) minmax(0, 2.65fr); }
#palco .statement-side { justify-content: flex-start; }
#palco .statement-symbol {
  width: min(27vw, 380px);
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(-15.5%);
}

/* 8. Faixa Direção: o ícone virou desenho na própria página, o cliente é a
      bolinha do centro, e o rótulo anda junto com o símbolo. */
#palco .renewal-art { display: grid; place-items: center; }
#palco .renewal-nucleo {
  position: relative;
  width: min(34vw, 460px);
  animation: symbol-float 7s ease-in-out infinite alternate;
}
#palco .renewal-art svg.renewal-icone {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 32px rgba(226, 141, 96, 0.12));
}
#palco .ri-c, #palco .ri-n {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
}
#palco .ri-c { stroke-width: 47.948; }
#palco .ri-n { stroke-width: 43.036; }
#palco .ri-a {
  fill: none;
  stroke: var(--orange);
  stroke-width: 43.036;
  stroke-linecap: round;
}
#palco .ri-ponto { fill: var(--white); }
/* o anel do centro fica, parado: marca a bolinha sem chamar atenção */
#palco .ri-halo {
  fill: none;
  stroke: var(--orange-soft);
  stroke-width: 7;
  opacity: 0.62;
  transform-origin: 207.033px 248.773px;
  transform: scale(1.95);
}
/* o rótulo "O cliente" saiu a pedido: a frase da faixa já diz isso, e o que
   marca o centro é o anel pulsando na bolinha */
/* 9. Faixa Direção: os traços atravessam a faixa e TODOS terminam na bolinha
      do centro, o cliente. Ficam dentro do mesmo desenho do símbolo, por isso
      acompanham o movimento dele e nunca param no meio do nada. */
#palco .ri-tracado {
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0;
}
#palco .ri-tracado-acento {
  stroke: var(--orange-soft);
  stroke-width: 4.2;
}

/* A coreografia da faixa, disparada quando ela entra na tela: as três linhas
   chegam ao centro, a bolinha nasce no ponto de encontro e só então a marca
   se desenha. Sem a classe "anima" (JS desligado, movimento reduzido, ou
   quem chega depois da animação) tudo aparece pronto. */
#palco .ri-c, #palco .ri-n, #palco .ri-a {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
#palco .ri-ponto { transform-origin: 207.033px 248.773px; }

/* cada traço entra, e todos se apagam juntos no instante em que a bolinha nasce */
#palco .renewal.anima .ri-tracado {
  animation: ri-linha 2.2s ease-out both, ri-linha-some 0.7s ease-in 2.6s forwards;
}
#palco .renewal.anima .ri-tracado:nth-of-type(2) { animation-delay: 0.3s, 2.6s; }
#palco .renewal.anima .ri-tracado-acento { animation-delay: 0.6s, 2.6s; }
#palco .renewal.anima .ri-ponto { animation: ri-ponto-nasce 0.7s ease-out 2.7s backwards; }
#palco .renewal.anima .ri-halo { animation: ri-halo-nasce 0.9s ease-out 2.9s backwards; }
#palco .renewal.anima .ri-c { animation: ri-desenha 1.4s ease-in-out 3.3s backwards; }
#palco .renewal.anima .ri-n { animation: ri-desenha 1.1s ease-in-out 4.2s backwards; }
#palco .renewal.anima .ri-a { animation: ri-desenha 0.9s ease-in-out 5s backwards; }

@keyframes ri-linha {
  from { stroke-dashoffset: 1; opacity: 0; }
  35% { opacity: 0.55; }
  to { stroke-dashoffset: 0; opacity: 0.55; }
}
@keyframes ri-linha-some {
  from { opacity: 0.55; }
  to { opacity: 0; }
}
@keyframes ri-ponto-nasce {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ri-halo-nasce {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 0.62; transform: scale(1.95); }
}
@keyframes ri-desenha {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
#palco .renewal-grid { position: relative; z-index: 1; }
/* o texto fica por cima dos traços que vêm da esquerda */
#palco .renewal-copy { position: relative; z-index: 2; }
#palco .renewal-art { z-index: 0; }

/* 10. Faixa Direção: texto mais claro e sem o filete laranja na lateral. */
#palco .renewal-message > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.92); }
#palco .renewal-message .renewal-note {
  padding-left: 0;
  border-left: 0;
  color: var(--white);
}

/* 11. Áreas de atuação, versão publicada: lista em uma coluna e letra maior. */
#palco .published-practice-panel ul {
  grid-template-columns: 1fr;
  gap: 16px;
}
#palco .published-practice-panel li { font-size: 1.2rem; }

/* 12. Contato publicado com a cor da faixa do protótipo. */
#palco .published-contact {
  color: var(--white);
  background:
    radial-gradient(circle at calc(100% + 95px) calc(100% + 65px), transparent 0 304px, rgba(226, 141, 96, 0.4) 305px 309px, transparent 310px),
    var(--navy-500);
}
#palco .published-contact h2 { max-width: 20ch; }
#palco .published-contact .eyebrow { color: var(--orange-soft); }
#palco .published-contact-grid > div > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.82); }
#palco .published-contact-grid > div > a { color: var(--orange-soft); }
#palco .published-contact .published-form label { color: rgba(255, 255, 255, 0.78); }
#palco .published-contact .published-form input,
#palco .published-contact .published-form textarea {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.34);
}
#palco .published-contact .published-form input::placeholder,
#palco .published-contact .published-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#palco .published-contact .published-button {
  color: var(--navy-900);
  background: var(--white);
}
#palco .published-contact .published-button:hover,
#palco .published-contact .published-button:focus-visible {
  color: var(--white);
  background: var(--orange);
}

/* 17. Os links do rodapé ficam todos na mesma linha, ao lado da marca e no
       mesmo eixo dela, em vez de quebrarem para uma segunda linha. Só em tela
       larga: no celular eles continuam podendo quebrar. */
@media (min-width: 900px) {
  #palco .footer-links {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 26px;
    font-size: 0.84rem;
  }
}

/* 13. Rodapé: sobrou uma linha, então a grade passa a ter duas colunas, e o
       filete acima dela atravessa a tela inteira, não só a área de texto. */
#palco .footer-bottom {
  grid-template-columns: 1fr auto;
  position: relative;
  border-top: 0;
}
#palco .footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
#palco .site-footer { overflow-x: clip; }

/* 14. Marca do cabeçalho um pouco maior (só onde há espaço para isso). */
@media (min-width: 900px) {
  #palco .brand { width: 310px; }
  #palco .site-header.is-scrolled .brand { width: 292px; }
}

/* 15. O mosaico é o arquivo oficial da identidade (mosaico-faixa-8x3.svg),
       desenhado na própria página para poder ganhar movimento. Nenhuma medida
       dele mudou: células de 100, arcos de raio 50, traço 6, grade 2. A grade
       e as peças cinza ficam paradas; as quatro peças coloridas se movem, cada
       uma com tempo, distância e direção próprios. */
#palco .published-mosaic {
  position: relative;
  overflow: hidden;
  background-image: none;
  /* a faixa acompanha a proporção do desenho, 8 células por 3, para as três
     fileiras caberem inteiras e nenhuma peça aparecer cortada */
  min-height: 0;
  aspect-ratio: 8 / 3;
}
#palco .published-mosaic .mosaico {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#palco .mosaico-grade path {
  fill: none;
  stroke: #e3e7ee;
  stroke-width: 2;
}
#palco .mosaico-textura path {
  fill: none;
  stroke: #d7dce6;
  stroke-width: 6;
  stroke-linecap: round;
}
#palco .mosaico-textura circle { fill: #d7dce6; }
#palco .mosaico-peca path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
#palco .mosaico-peca.cinza path { stroke: #d7dce6; }
#palco .mosaico-peca.marinho path { stroke: #22304a; }
#palco .mosaico-peca.laranja path { stroke: #d25c1e; }

/* Cada peça gira no lugar, um quarto de volta por vez, em torno do centro da
   própria célula (o eixo vem no atributo style de cada grupo, gerado a partir
   do arquivo oficial). Entre um giro e outro ela descansa; os arcos vão se
   encaixando com os vizinhos e formando caminhos que se desfazem no giro
   seguinte. As peças não giram juntas: o atraso de cada uma segue a posição
   na grade, então a onda de giros corre pela faixa. */
#palco .mosaico-peca {
  transform-box: view-box;
  animation: mosaico-quarto-de-volta 36s cubic-bezier(0.55, 0, 0.15, 1) infinite;
}
@keyframes mosaico-quarto-de-volta {
  0%   { transform: rotate(0deg); }
  17%  { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  42%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  67%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  92%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}


/* 16. Fora o risco vertical que atravessava a faixa Forma de atuação. Ele era
       um degradê fixo em 50% da largura, e por isso não coincidia com nenhuma
       coluna do conteúdo: as colunas ali são 0.85 e 3.15, não meio a meio. As
       divisórias entre as três etapas continuam, essas separam o que precisa. */
#palco .method { background: var(--white); }

/* 18. As etiquetas sobre fundo escuro passam a ser brancas, sem tarja. O
       laranja cheio sobre o azul dava contraste de 3,4 para 1, abaixo do
       mínimo de leitura para texto pequeno; o branco dá acima de 8 para 1.
       O marca-texto foi testado e descartado por ela em 04/09/2026. Sobre
       fundo branco a etiqueta continua laranja, que ali já tem contraste. */
#palco .hero .eyebrow,
#palco .audiences .eyebrow,
#palco .renewal .eyebrow,
#palco .practice .eyebrow,
#palco .contact .eyebrow,
#palco .published-contact .eyebrow {
  color: var(--white);
}

/* 19. O botão do formulário deixa de ser oval. */
#palco .published-button { border-radius: 0; }

/* 20. Os três cards de Quem atendemos com a mesma largura. O protótipo dava
       1,2 de largura ao primeiro e 1 aos outros dois, o que deixava o de
       Empresas maior sem motivo. */
#palco .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- pedidos de 05/09/2026 ----------------------------------------- */

/* 21. As etiquetas (Áreas de atuação, Do caos nasce o direito, As sócias...)
       em Poppins, a fonte dos títulos. Nas faixas trazidas do site antigo elas
       herdavam a Literata, serifada, que ela não quis ("queria algo moderno");
       nas demais herdavam a Lato. Agora é uma fonte só, em todas. */
#palco .eyebrow {
  font-family: "Poppins", var(--sans);
  font-weight: 600; /* semi-negrito verdadeiro (Poppins-SemiBold), pedido em 06/09/2026 */
  font-size: 0.94rem;
  letter-spacing: 0.18em;
}

/* 22. Áreas de atuação: a área escolhida não se mexe, só muda de cor. Fora a
       seta laranja que aparecia embaixo do nome e empurrava a lista. */
#palco .published-practice-list li button { color: var(--navy-300); }
#palco .published-practice-list .is-active button,
#palco .published-practice-list li button:hover { color: var(--navy-900); }

/* 23. Faixa Forma de atuação num cinza claro, em vez de branco: eram duas
       faixas brancas seguidas antes do contato. */
#palco .method { background: var(--navy-50); }

/* 24. Faixa das sócias: o mosaico da identidade como fundo, bem claro,
       transparente e parado, atrás do texto. */
#palco .published-people {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
#palco .published-people > .shell { position: relative; z-index: 1; }
#palco .mosaico-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}
#palco .mosaico-fundo svg { display: block; width: 100%; height: 100%; }
#palco .mosaico-fundo .mosaico-grade path { stroke: #eef1f6; stroke-width: 2; }
#palco .mosaico-fundo .mosaico-textura path,
#palco .mosaico-fundo .mosaico-peca path { stroke: #e3e7ee; }
#palco .mosaico-fundo .mosaico-textura circle { fill: #e3e7ee; }
#palco .mosaico-fundo .mosaico-peca.marinho path { stroke: #d7dce6; }
#palco .mosaico-fundo .mosaico-peca.laranja path { stroke: #f1dbd0; }
#palco .mosaico-fundo .mosaico-peca { animation: none; }

/* 25. Rótulo das sócias ("Advogada e contadora") em Poppins, maior e em
       semi-negrito (peso 600, arquivo novo Poppins-SemiBold). A cor era o
       Laranja 300 sobre branco, que quase não se lia; passa ao Laranja 700,
       o tom da paleta para texto pequeno. */
#palco .person-role,
#palco .person-light .person-role {
  color: #a24514;
  font-family: "Poppins", var(--sans);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* 26. Posicionamento e Forma de atuação lado a lado, numa faixa só de duas
       colunas que vão de borda a borda da tela (06/09/2026). A da esquerda
       (Posicionamento) em Marinho 500, o "marinho claro" das faixas Quem
       atendemos e Contato; a da direita (Forma de atuação) em branco. Abaixo
       de 900px as colunas voltam a empilhar. */
#palco .faixa-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#palco .faixa-dupla > section {
  min-width: 0;
  padding: clamp(80px, 8vw, 120px) clamp(36px, 5.5vw, 96px);
}
#palco .faixa-dupla .shell {
  width: 100%;
  max-width: 640px;
  margin-inline: 0;
}
/* a coluna da esquerda encosta o conteúdo na direita, e a da direita na
   esquerda, para os dois textos ficarem perto do eixo central da faixa */
#palco .faixa-dupla .focus-light .shell { margin-left: auto; }

#palco .faixa-dupla .focus-band.focus-light {
  display: flex;
  align-items: center; /* a coluna da direita é mais alta: a citação fica no meio */
  color: var(--white);
  background: var(--navy-500);
}
/* 06/09/2026, fim do dia: as caixas brancas (do Posicionamento e das etapas,
   com sombras, em várias versões) foram testadas e retiradas por ela: "vamos
   deixar como estava antes sem caixa, metade azul e metade branca". Fica só o
   alinhamento com a coluna de conteúdo do site, regra dela para o monitor
   largo: o texto da esquerda começa na mesma margem em que começa o conteúdo
   das outras faixas (o .shell tem no máximo 1380px centralizados, então, nesta
   coluna que é metade da tela, a margem = largura da coluna - 690px), e o
   texto da direita termina na margem oposta. Cores sangram até a borda. */
#palco .faixa-dupla .focus-band.focus-light {
  padding-left: calc(100% - min(690px, 50vw - 48px));
}
#palco .faixa-dupla .focus-light .shell {
  width: 100%;
  max-width: none;
  margin-left: 0;
}
#palco .faixa-dupla .focus-light .eyebrow { color: var(--white); }
#palco .faixa-dupla .focus-light blockquote p {
  font-size: clamp(2.2rem, 3.1vw, 3.6rem);
}
#palco .faixa-dupla .focus-light .focus-note {
  max-width: none;
  color: rgba(255, 255, 255, 0.82);
  border-top-color: var(--orange-soft);
}

#palco .faixa-dupla .method {
  background: var(--white);
  padding-right: calc(100% - min(690px, 50vw - 48px));
}
#palco .faixa-dupla .method .shell { max-width: none; }
#palco .faixa-dupla .method-grid {
  grid-template-columns: 1fr;
  gap: 22px;
}
#palco .faixa-dupla .method-main h2 {
  max-width: none;
  font-size: clamp(2.2rem, 3.1vw, 3.6rem);
}
#palco .faixa-dupla .method-steps {
  grid-template-columns: 1fr;
  margin-top: 46px;
}
#palco .faixa-dupla .method-steps article,
#palco .faixa-dupla .method-steps article + article {
  min-height: 0;
  padding: 26px 0 30px;
  border-left: 0;
  border-bottom: 1px solid var(--navy-100);
}
#palco .faixa-dupla .method-steps h3 {
  max-width: none;
  margin: 14px 0 10px;
  font-size: 1.55rem;
}

@media (max-width: 900px) {
  #palco .faixa-dupla { grid-template-columns: 1fr; }
  #palco .faixa-dupla .shell { max-width: none; }
  #palco .faixa-dupla .focus-band.focus-light { padding-left: clamp(36px, 5.5vw, 96px); }
  #palco .faixa-dupla .method { padding-right: clamp(36px, 5.5vw, 96px); }
}

/* 27. Barra do topo: opção C do comparativo de 06/09/2026, escolha dela.
       Branca com um fio embaixo, marca na cor original com 34px de altura
       (a mesma das outras páginas), menu em Poppins caixa alta pequena e
       Contato em Laranja 700. A barra deixa de flutuar sobre o vídeo: fica
       fixa no alto como bloco próprio, e a abertura começa abaixo dela. Nas
       páginas de artigos e transação a barra continua em Marinho 100, com
       este mesmo menu (estilo.css). */
#palco .site-header,
#palco .site-header.is-scrolled,
#palco .menu-open .site-header {
  position: sticky;
  top: 0;
  color: var(--navy-700);
  background: var(--white);
  border-bottom: 1px solid var(--navy-100);
  box-shadow: none;
  backdrop-filter: none;
}
#palco .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(15, 24, 43, 0.08); }
#palco .header-inner,
#palco .site-header.is-scrolled .header-inner { min-height: 88px; }
#palco .brand,
#palco .site-header.is-scrolled .brand { width: auto; }
#palco .brand img { width: auto; height: 34px; }
#palco .main-nav {
  gap: 30px;
  font-family: "Poppins", var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#palco .main-nav a { padding-block: 6px; }
#palco .main-nav a::after { bottom: 0; background: var(--orange); }
#palco .main-nav .nav-contact { color: #a24514; font-weight: 600; }
#palco .main-nav .nav-contact::after { display: none; }
#palco .menu-toggle { color: var(--navy-700); }
/* a abertura ocupa a tela abaixo da barra, não mais atrás dela */
#palco .hero { height: calc(100svh - 88px); min-height: 780px; }
@media (max-width: 760px) {
  #palco .header-inner,
  #palco .site-header.is-scrolled .header-inner { min-height: 72px; }
  #palco .brand img { height: 28px; }
  #palco .main-nav { inset: 72px 0 0; }
  #palco .main-nav a,
  #palco .main-nav a:not(.nav-contact) {
    font-family: "Poppins", var(--sans);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #palco .main-nav .nav-contact { color: var(--orange-soft); }
  #palco .hero { height: calc(100svh - 72px); min-height: 700px; }
}

/* 28. Título dos artigos: "Depois do caos" na linha de cima, na mesma
       Poppins fina, um degrau menor que "Nasce a clareza." (06/09/2026). */
#palco .published-news-heading h2 .antes {
  display: block;
  margin-bottom: 0.18em;
  font-size: 0.62em;
  font-weight: 300;
  color: var(--navy-500);
}

/* 29. Fora a Literata da home (ela, 06/09/2026: "tire a fonte Literata, ainda
       tem, por exemplo em Tributário"). As faixas vindas do site antigo
       (artigos, áreas, sócias, contato) usavam a Literata no texto corrido e na
       etiqueta dos cards; passam à Lato, a mesma das outras faixas, e a
       etiqueta "Tributário" dos cards vai para a Poppins das demais etiquetas. */
#palco .published-pane { font-family: var(--sans); }
#palco .published-form input,
#palco .published-form textarea { font-family: var(--sans); }
#palco .published-news-grid .news-meta {
  font-family: "Poppins", var(--sans);
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* 30. Pílula coral no Escritório (11/09/2026). Artigos e Escritório eram duas
       faixas brancas seguidas; ela desenhou uma pílula grande envolvendo a
       etiqueta e o título, arredondada à esquerda e saindo pela direita da
       tela. Escolha final, depois de estudar contorno, creme, marinho e vários
       laranjas (_estudos/claude-pirula, v1 a v5): coral da paleta, texto
       afastado da curva, etiqueta em branco, maior. O branco sobre o coral tem
       contraste baixo (2,56:1) e ela manteve assim, sabendo disso. A etiqueta
       fica no semi-negrito (600), o peso mais forte da Poppins instalada; 700
       sairia negrito falso. */
#palco #escritorio { overflow: hidden; }
#palco #escritorio .pirula {
  position: relative;
  padding: 52px 0 54px 124px;
}
#palco #escritorio .pirula::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: -58px;
  right: -60vw;
  background: var(--orange-soft);
  border-radius: 999px 0 0 999px;
}
#palco #escritorio .pirula > * {
  position: relative;
  z-index: 1;
}
#palco #escritorio .pirula .eyebrow {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}
#palco #escritorio .pirula h2 { color: var(--navy-900); }

@media (max-width: 900px) {
  #palco #escritorio .pirula { padding: 34px 0 36px 48px; }
  #palco #escritorio .pirula::before {
    left: -22px;
    border-radius: 60px 0 0 60px;
  }
  #palco #escritorio .pirula .eyebrow { font-size: 1.05rem; }
}

/* 31. Faixa Direção: coluna do texto um pouco mais larga (11/09/2026). Em tela
       grande a letra do título chega ao máximo (80 px) e a coluna tinha só
       569 px, então "O direito é apenas o meio." caía em três linhas. Ela pediu
       duas. As colunas passam de 0,9 / 1,1 para metade cada uma; o desenho da
       marca à direita cede o espaço. Só acima de 1050 px: no tablet e no
       celular a faixa já é outra. */
@media (min-width: 1051px) {
  #palco .renewal-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(480px, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #palco .mosaico-peca,
  #palco .renewal-nucleo,
  #palco .renewal.anima .ri-tracado,
  #palco .renewal.anima .ri-c,
  #palco .renewal.anima .ri-n,
  #palco .renewal.anima .ri-a,
  #palco .renewal.anima .ri-ponto,
  #palco .renewal.anima .ri-halo { animation: none; }
}

/* ==========================================================================
   32) Menu suspenso de Atuacao na barra da home (12/09/2026), o mesmo das
   outras paginas. Em 13/09/2026 saiu daqui a coluna de foto da faixa de areas
   (e seus ajustes 32b a 32e): ela pediu a faixa de volta como era antes.
   ========================================================================== */
#palco .main-nav .tem-sub { position: relative; display: inline-flex; align-items: center; }
#palco .main-nav .sub-botao {
  font: inherit; color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer;
  letter-spacing: inherit; text-transform: inherit;
}
#palco .main-nav .sub-botao::after { content: "\25BE"; margin-left: 7px; font-size: 11px; color: var(--orange); }
#palco .main-nav .sub-botao[aria-expanded="true"] { color: #a24514; }
#palco .main-nav .submenu {
  position: absolute; top: calc(100% + 12px); left: -20px; min-width: 300px; z-index: 40;
  display: flex; flex-direction: column; padding: 8px 0;
  background: #fff; border: 1px solid var(--line, #d7dce6); border-top: 2px solid var(--orange);
  box-shadow: 0 18px 40px rgba(34, 48, 74, 0.16);
}
#palco .main-nav .submenu[hidden] { display: none; }
#palco .main-nav .submenu a {
  font-family: "Poppins", var(--sans); font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--navy-700);
  padding: 11px 22px; white-space: nowrap;
}
#palco .main-nav .submenu a::after { display: none; }
#palco .main-nav .submenu a:hover { background: #eef1f6; color: var(--navy-900); }
#palco .main-nav .submenu .submenu-todas {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7a94;
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid #d7dce6;
}
@media (max-width: 760px) {
  /* no menu empilhado o submenu fica aberto e recuado, sem flutuar */
  #palco .main-nav .tem-sub { display: block; }
  #palco .main-nav .submenu {
    position: static; min-width: 0; border: 0; box-shadow: none;
    background: transparent; padding: 0 0 10px 16px;
  }
  #palco .main-nav .submenu[hidden] { display: flex; }
  #palco .main-nav .submenu a { padding: 8px 0; color: inherit; font-size: 1rem; }
  #palco .main-nav .sub-botao::after { content: ""; }
}

/* ==========================================================================
   33) Faixa de areas cabendo inteira na tela (13/09/2026)
   Pedido dela, vendo em 100% num monitor de 1858 x 910 px: "em 100% nao da pra
   ver tudo. Alargue a coluna para conseguir visualizar a faixa toda". Medido
   antes: 1280 px de altura (150 de folga em cima e embaixo, titulo em 5 linhas
   preso a 641 px de largura maxima, 22 px de folga em cada area da lista).
   Solucao testada ao vivo em quatro variacoes: a faixa alarga ate 1680 px
   (so ela; as outras seguem em 1380), as duas colunas ficam iguais, o titulo
   perde o limite de largura e cai para 3 linhas, a lista e o quadro azul
   apertam as folgas. Resultado em 1858 x 910: 770 px da etiqueta ao fim do
   quadro, dentro dos 821 px livres abaixo da barra.
   ========================================================================== */
/* 34) Mesmo dia, depois: o quadro azul saiu ("nao ficou bom, vamos tirar esse
   quadrado azul e quando a pessoa clicar ela e direcionada para a pagina").
   A faixa virou titulo a esquerda e lista de links a direita. Sem o quadro,
   ela ja cabe na tela, entao o alargamento ate 1680 px e as folgas apertadas
   do item 33 sairam: a faixa volta a alinhar com as outras. Os estilos do link
   da lista estao no montar-home.mjs (bloco "so no site"). */
#palco #atuacao.section { padding-top: 96px; padding-bottom: 96px; }
@media (min-width: 1051px) {
  #palco #atuacao .published-practice-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  #palco #atuacao h2 { max-width: none; }
}

/* 35) 13/09/2026, "diminui um pouco o tamanho da fonte" nesta faixa. Cerca de 15%
   a menos: titulo de 74 para 62 px em 1858, de 58 para 49 px em 1440 e de 42 para
   37 px no celular; nomes das areas de 23 para 20 px e numeros de 16 para 14 px.
   So nesta faixa: os titulos das outras seguem no tamanho de antes. */
#palco #atuacao h2 { font-size: clamp(2.3rem, 3.4vw, 3.9rem); }
#palco #atuacao .published-practice-list li a { font-size: 1.25rem; padding-top: 19px; padding-bottom: 19px; }
#palco #atuacao .published-practice-list li span { font-size: 0.875rem; }

/* ==========================================================================
   36) Escala de 75% em tela de computador (15/09/2026)
   Pedido dela: "reduz a escala para 75%. No 100% fica tudo grande." Ela vinha
   usando o zoom do navegador em 75% para ver o site como gosta. Aqui a escala
   passa a ser do proprio site, a partir de 1200 px de largura; celular e
   tablet seguem em 100%.
   Conferido em 1912 x 910 contra o zoom real de 75% (viewport de 2549 px):
   mesmos tamanhos de titulo (76, 74, 80, 62, 58 e 82 px) e mesma altura da
   abertura. Com zoom no CSS as medidas de altura de tela (svh) tambem
   encolhem, entao a abertura recebe a conta de volta (/ 0.75). Os links do
   menu continuam parando logo abaixo da barra.
   ========================================================================== */
@media (min-width: 1200px) {
  html { zoom: 0.75; }
  #palco .hero { height: calc(100svh / 0.75 - 88px); }
}


/* --- só no site: caminho para a página de artigos ----------------- */
#palco .publicado-todos {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--navy-100);
}
#palco .publicado-todos a {
  font-family: "Poppins", var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy-900);
}
#palco .publicado-todos a:hover,
#palco .publicado-todos a:focus-visible { color: var(--orange); }

/* --- só no site: a etiqueta de cada artigo ("Tributário") centralizada --- */
#palco .published-news-grid .news-meta { text-align: center; }

/* --- só no site: cada área da lista é um link para a página dela ----- */
#palco .published-practice-list li { display: block; padding: 0; }
#palco .published-practice-list li a {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 0;
  color: var(--navy-300);
  text-decoration: none;
  font-family: "Poppins", var(--sans);
  font-size: 1.46rem;
  transition: color 0.15s ease;
}
/* o número acompanha, mas continua bem menor que o nome da área */
#palco .published-practice-list li span { font-size: 0.98rem; }
/* a seta à direita avisa que a linha leva a outra página; ela não ocupa linha
   própria (a seta antiga, dentro do botão, empurrava a lista para baixo) */
#palco .published-practice-list li .seta {
  font-style: normal; color: var(--orange); font-size: 1.2rem;
  opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease, transform 0.2s ease;
}
#palco .published-practice-list li a:hover { color: var(--navy-900); }
#palco .published-practice-list li a:hover .seta,
#palco .published-practice-list li a:focus-visible .seta { opacity: 1; transform: none; }
#palco .published-practice-list li a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #palco .published-practice-list li a,
  #palco .published-practice-list li .seta { transition: none; }
}