/**
 * Duplo D . camada v2.
 *
 * Portado do projeto Claude Design "Site Duplo D v2" (ago/2026).
 * Uma unica fonte de verdade por conceito. O que NAO foi portado, e por que:
 *
 *   - rampa --gray-* do _ds/tokens/colors.css: duplicava --neutral-* sem
 *     relacao entre as duas. Duas rampas de cinza paralelas viram um arquivo
 *     onde mexer num cinza nao faz efeito na metade dos casos.
 *   - blocos [data-theme="dark"]: nada no site seta esse atributo. CSS morto.
 *   - line-height:100% dos tokens de titulo: corta acento em caixa alta e
 *     descida de c/g/p/q em portugues. Os valores inline do proprio design
 *     (h1 48px/56px) sao a intencao real e sao os que estao aqui.
 *
 * Convive com os --dd-* do style.css do tema filho: aqueles continuam
 * mandando nas paginas antigas, estes so valem dentro de .dd-v2.
 */

/* ============================================================ TOKENS */

.dd-v2 {
  /* Neutros: um matiz quente de 12 graus atravessa a rampa inteira, para
     casar com os fundos --dd-warm do tema em vez de brigar com eles. */
  --n-h: 12;
  --n-s: 4%;
  --neutral-050: hsl(var(--n-h) var(--n-s) 98%);
  --neutral-100: hsl(var(--n-h) var(--n-s) 95%);
  --neutral-200: hsl(var(--n-h) var(--n-s) 90%);
  --neutral-300: hsl(var(--n-h) var(--n-s) 82%);
  --neutral-400: hsl(var(--n-h) var(--n-s) 66%);
  --neutral-500: hsl(var(--n-h) var(--n-s) 50%);
  --neutral-600: hsl(var(--n-h) var(--n-s) 38%);
  --neutral-700: hsl(var(--n-h) 6% 27%);
  --neutral-800: hsl(var(--n-h) 8% 19%);
  --neutral-900: hsl(var(--n-h) 10% 12%);

  /* Marca. O teal fica na interface (link, rotulo, foco) e o vinho no CTA,
     para o elenco de agentes nunca disputar atencao com a acao. */
  --accent: #29a3a3;
  --accent-hover: #178282;
  --action: #bf404a;
  --action-hover: #a32933;
  --link: var(--accent);
  --link-hover: var(--accent-hover);

  /* Familias dos agentes. Matiz vem do personagem; saturacao e luminosidade
     sao identicas nas cinco, nos mesmos seis passos. Dai vem a simetria:
     mesmo contraste de card, mesmo peso de borda. So o matiz anda. */
  --lume-tint: hsl(4 32% 93%);      --lume-line: hsl(4 38% 68%);
  --lume-mark: hsl(4 46% 44%);      --lume-deep: hsl(4 52% 26%);
  --node-tint: hsl(214 32% 93%);    --node-line: hsl(214 38% 68%);
  --node-mark: hsl(214 46% 44%);    --node-deep: hsl(214 52% 26%);
  --signal-tint: hsl(34 32% 93%);   --signal-line: hsl(34 38% 68%);
  --signal-mark: hsl(34 46% 44%);   --signal-deep: hsl(34 52% 26%);
  --contextus-tint: hsl(128 32% 93%); --contextus-line: hsl(128 38% 68%);
  --contextus-mark: hsl(128 46% 44%); --contextus-deep: hsl(128 52% 26%);
  --pharos-tint: hsl(262 32% 93%);  --pharos-line: hsl(262 38% 68%);
  --pharos-mark: hsl(262 46% 44%);  --pharos-deep: hsl(262 52% 26%);

  /* Bandas */
  --band-light: var(--neutral-050);
  --band-paper: var(--neutral-100);
  --band-dark: hsl(12 10% 13%);
  --band-dark-2: hsl(12 8% 18%);
  /* Veu do hero: escurece as duas pontas (titulo no topo, provas no rodape)
     e deixa o meio mais claro para a grama e o caminho de pedra aparecerem. */
  --scrim-hero: linear-gradient(180deg, hsl(12 10% 13% / .82) 0%,
                hsl(12 10% 13% / .72) 45%, hsl(12 10% 13% / .86) 100%);

  /* Tipografia */
  --font-display: Poppins, system-ui, sans-serif;
  --font-ui: Poppins, system-ui, sans-serif;
  --font-body: Montserrat, system-ui, sans-serif;

  /* Escala com line-height utilizavel em portugues */
  --size-display: 48px;  --lh-display: 56px;
  --size-h1: 36px;       --lh-h1: 44px;
  --size-h2: 32px;       --lh-h2: 42px;
  --size-h3: 28px;       --lh-h3: 36px;
  --size-h4: 24px;       --lh-h4: 32px;
  --size-h5: 20px;       --lh-h5: 28px;
  --size-h6: 16px;       --lh-h6: 24px;
  --size-body-lg: 18px;  --lh-body-lg: 28px;
  --size-body: 16px;     --lh-body: 26px;
  --size-body-sm: 14px;  --lh-body-sm: 22px;
  --size-label: 12px;    --lh-label: 18px;
  --track-caps: .08em;

  /* Layout */
  --content-max: 1160px;
  --content-gutter: 120px;
  --band-pad: 96px;
  --card-pad: 24px;
  --gutter-grid: 20px;
  --portrait: 3 / 4;

  /* Controles. 4px e o piso de raio de qualquer botao com superficie. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /*
   * UMA altura de controle, nao duas.
   *
   * Botao, input, select e o campo de busca leem daqui. Enquanto cada um
   * tinha a sua, botao e input lado a lado num formulario desalinhavam por
   * alguns pixels -- o tipo de desencontro que ninguem sabe nomear mas todo
   * mundo ve. Mudar o numero aqui move os quatro juntos.
   */
  --control-h: 52px;
  --control-pad: 28px;

  /*
   * Bordas. O anel e inset (box-shadow), nunca border: assim a borda nao
   * entra na caixa e a altura do controle continua sendo exatamente
   * --control-h, sem depender de box-sizing.
   */
  --ring: inset 0 0 0 1px;
  --ring-2: inset 0 0 0 2px;
  --border: var(--neutral-500);        /* padrao dos componentes */
  --border-strong: var(--neutral-700); /* controles e foco */
  --border-on-dark: hsl(0 0% 100% / .48);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration: 200ms;
}

/* ======================================================== ESTRUTURA */

.dd-v2 {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--neutral-700);
}

.dd-v2 .dd-band {
  padding: var(--band-pad) var(--content-gutter);
}
.dd-v2 .dd-band > * {
  max-width: var(--content-max);
  margin-inline: auto;
}
.dd-v2 .dd-band--light { background: var(--band-light); }
.dd-v2 .dd-band--paper { background: var(--band-paper); }
.dd-v2 .dd-band--dark  { background: var(--band-dark);  color: var(--neutral-200); }
.dd-v2 .dd-band--dark-2 { background: var(--band-dark-2); color: var(--neutral-200); }

.dd-v2 h1, .dd-v2 h2, .dd-v2 h3, .dd-v2 h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--neutral-800);
  margin: 0;
  text-wrap: pretty;
}
.dd-v2 h1 { font-size: var(--size-h1); line-height: var(--lh-h1); }
.dd-v2 h2 { font-size: var(--size-h2); line-height: var(--lh-h2); }
.dd-v2 h3 { font-size: var(--size-h4); line-height: var(--lh-h4); }
.dd-v2 .dd-band--dark h2,
.dd-v2 .dd-band--dark h3,
.dd-v2 .dd-band--dark-2 h2 { color: var(--neutral-050); }

/*
 * Link de texto corrido. Sem esta regra ele herdava a cor de link do
 * Betheme, que nao e o teal da marca -- e o unico elemento das paginas v2
 * que ainda vinha do tema pai.
 *
 * O :not() protege os botoes: .dd-btn e um <a> e nao pode ganhar sublinhado
 * nem a cor de link.
 */
.dd-v2 a:not([class]),
.dd-v2 .dd-prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dd-v2 a:not([class]):hover,
.dd-v2 .dd-prose a:hover { color: var(--link-hover); }
.dd-v2 .dd-band--dark a:not([class]) { color: var(--accent-soft, hsl(180 40% 72%)); }

.dd-v2 .dd-lead {
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  max-width: 68ch;
}
.dd-v2 .dd-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  /* neutral-600, nao 500: em 12px o 500 media 3,8:1 sobre a banda clara. */
  color: var(--neutral-600);
}

/* ================================================ BOTOES E CAMPOS */
/*
 * Botao, input, select e textarea sao o mesmo controle com conteudo
 * diferente: mesma altura, mesmo raio, mesmo anel, mesmo passo de padding.
 * Por isso dividem uma lista de seletores so, e nao duas parecidas que
 * divergem na primeira manutencao.
 *
 * Largura e auto. O botao tem a largura do seu rotulo; o campo cresce com a
 * coluna. Nada de largura fixa em pixel: rotulo em portugues e mais longo
 * que em ingles e estoura caixa dimensionada no olho.
 *
 * Piso de 4px de raio em tudo que tem superficie -- o Betheme zera
 * border-radius em varios botoes, entao o piso e reafirmado e nao herdado.
 * Botao de texto puro (.dd-btn--bare) e link, nao superficie: fica de fora.
 */

.dd-v2 .dd-btn,
.dd-v2 button:not(.dd-btn--bare),
.dd-v2 input[type="submit"],
.dd-v2 input[type="button"],
.dd-v2 input[type="text"],
.dd-v2 input[type="email"],
.dd-v2 input[type="tel"],
.dd-v2 input[type="url"],
.dd-v2 input[type="search"],
.dd-v2 input[type="number"],
.dd-v2 select,
.dd-v2 textarea {
  font-family: var(--font-ui);
  font-size: var(--size-h6);
  line-height: 1;
  height: var(--control-h);
  padding: 0 var(--control-pad);
  border: none;
  border-radius: var(--radius-sm);
  width: auto;
  box-sizing: border-box;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.dd-v2 .dd-btn,
.dd-v2 button:not(.dd-btn--bare),
.dd-v2 input[type="submit"],
.dd-v2 input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

/* Campos: anel escuro, fundo claro, padding menor que o do botao -- o texto
   digitado comeca perto da borda, o rotulo de um botao fica centrado. */
.dd-v2 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dd-v2 select,
.dd-v2 textarea {
  padding-inline: 14px;
  background: var(--neutral-050);
  color: var(--neutral-800);
  box-shadow: var(--ring) var(--border-strong);
}
.dd-v2 textarea {
  height: auto;
  min-height: calc(var(--control-h) * 2);
  padding-block: 14px;
  line-height: var(--lh-body);
  width: 100%;
}
.dd-v2 input:focus,
.dd-v2 select:focus,
.dd-v2 textarea:focus {
  outline: none;
  box-shadow: var(--ring-2) var(--accent);
}
.dd-v2 ::placeholder { color: var(--neutral-500); opacity: 1; }

.dd-v2 .dd-btn--primary {
  background: var(--action);
  color: var(--neutral-050);
  /* O solido tambem ganha anel: no fundo claro ele so aparece pela cor, e o
     contorno mais escuro assenta o botao em vez de deixa-lo flutuando. */
  box-shadow: var(--ring) var(--action-hover);
}
.dd-v2 .dd-btn--primary:hover {
  background: var(--action-hover);
  color: var(--neutral-050);
  text-decoration: none;
}
.dd-v2 .dd-btn--ghost {
  background: transparent;
  color: var(--neutral-800);
  box-shadow: var(--ring) var(--border-strong);
}
.dd-v2 .dd-btn--ghost:hover {
  background: var(--neutral-100);
  text-decoration: none;
}
.dd-v2 .dd-band--dark .dd-btn--ghost {
  color: var(--neutral-050);
  box-shadow: var(--ring) var(--border-on-dark);
}
.dd-v2 .dd-band--dark .dd-btn--ghost:hover {
  background: hsl(0 0% 100% / .08);
}
.dd-v2 .dd-btn--bare {
  background: none;
  border: none;
  padding: 0;
  height: auto;
  font-family: var(--font-ui);
  color: var(--action);
  cursor: pointer;
}
.dd-v2 .dd-btn--bare:hover { color: var(--action-hover); }

.dd-v2 a:focus-visible,
.dd-v2 button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =========================================================== GRADES */

.dd-v2 .dd-grid { display: grid; gap: var(--gutter-grid); }
.dd-v2 .dd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-v2 .dd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dd-v2 .dd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dd-v2 .dd-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.dd-v2 .dd-stack { display: flex; flex-direction: column; gap: 16px; }
.dd-v2 .dd-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }

/* ============================================================ HERO */

.dd-v2 .dd-hero {
  background: var(--scrim-hero), var(--dd-hero-img) center 62% / cover no-repeat;
  padding: 120px var(--content-gutter);
  min-height: 560px;
  display: flex;
  align-items: center;
}
.dd-v2 .dd-hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dd-v2 .dd-hero h1 {
  max-width: 900px;
  font-size: var(--size-display);
  line-height: var(--lh-display);
  color: var(--neutral-050);
}
.dd-v2 .dd-hero .dd-lead { color: var(--neutral-200); }
.dd-v2 .dd-hero .dd-eyebrow { color: var(--neutral-300); }
.dd-v2 .dd-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.dd-v2 .dd-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: var(--size-body-sm);
  color: var(--neutral-200);
}
.dd-v2 .dd-proof span { display: inline-flex; align-items: center; gap: 8px; }
.dd-v2 .dd-proof span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* ========================================================== NUMEROS */

.dd-v2 .dd-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-grid);
  padding: 40px var(--content-gutter);
  max-width: none;
}
.dd-v2 .dd-stats > * { display: flex; flex-direction: column; gap: 4px; }
.dd-v2 .dd-stat__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-800);
}
.dd-v2 .dd-stat__t {
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--neutral-600);
}

/* =========================================================== CARDS */

.dd-v2 .dd-card {
  border-radius: var(--radius-md);
  padding: 32px var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--neutral-050);
  box-shadow: var(--ring) var(--border);
}
.dd-v2 .dd-card__ico { width: 40px; height: 40px; display: block; }
.dd-v2 .dd-card__meta {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  /* neutral-600, nao 500: em 12px caixa alta o 500 media 3,39:1 sobre as
     tintas dos agentes, abaixo do minimo de 4,5:1 para texto normal. */
  color: var(--neutral-600);
}

/* Uma frente por matiz de agente, via data-attribute. */
.dd-v2 [data-fam="lume"]      { background: var(--lume-tint);      box-shadow: var(--ring) var(--lume-mark); }
.dd-v2 [data-fam="node"]      { background: var(--node-tint);      box-shadow: var(--ring) var(--node-mark); }
.dd-v2 [data-fam="signal"]    { background: var(--signal-tint);    box-shadow: var(--ring) var(--signal-mark); }
.dd-v2 [data-fam="contextus"] { background: var(--contextus-tint); box-shadow: var(--ring) var(--contextus-mark); }
.dd-v2 [data-fam="pharos"]    { background: var(--pharos-tint);    box-shadow: var(--ring) var(--pharos-mark); }

.dd-v2 [data-fam="lume"] h3,      .dd-v2 [data-fam="lume"] .dd-agent__role      { color: var(--lume-deep); }
.dd-v2 [data-fam="node"] h3,      .dd-v2 [data-fam="node"] .dd-agent__role      { color: var(--node-deep); }
.dd-v2 [data-fam="signal"] h3,    .dd-v2 [data-fam="signal"] .dd-agent__role    { color: var(--signal-deep); }
.dd-v2 [data-fam="contextus"] h3, .dd-v2 [data-fam="contextus"] .dd-agent__role { color: var(--contextus-deep); }
.dd-v2 [data-fam="pharos"] h3,    .dd-v2 [data-fam="pharos"] .dd-agent__role    { color: var(--pharos-deep); }

/* ========================================================== AGENTES */

.dd-v2 .dd-agent { border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.dd-v2 .dd-agent__fig { margin: 0; aspect-ratio: var(--portrait); overflow: hidden; background: var(--neutral-200); }
/*
 * Os retratos sao 1429x2560 (9:16) num quadro 3/4: o cover corta 25,6% da
 * altura. object-position por agente mantem o rosto e o objeto de cena no
 * quadro, em vez de decapitar no centro.
 */
.dd-v2 .dd-agent__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center var(--dd-agent-pos, 28%);
  display: block;
}
.dd-v2 .dd-agent__body { padding: 20px var(--card-pad) 24px; display: flex; flex-direction: column; gap: 8px; }
.dd-v2 .dd-agent__role {
  font-family: var(--font-ui);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.dd-v2 .dd-agent__desc { font-size: var(--size-body-sm); line-height: var(--lh-body-sm); color: var(--neutral-700); }

/* ======================================================= RESPONSIVO */
/*
 * O design e desenhado em 1440 com banda de 1160 e goteira fixa de 120px.
 * Abaixo de 1280 a goteira vira fluida, senao o conteudo estrangula.
 */

@media (max-width: 1280px) {
  .dd-v2 { --content-gutter: 6vw; --band-pad: 72px; }
}
@media (max-width: 1024px) {
  .dd-v2 { --content-gutter: 5vw; --band-pad: 64px; --size-display: 40px; --lh-display: 48px; }
  .dd-v2 .dd-grid--4, .dd-v2 .dd-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-v2 .dd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dd-v2 {
    --content-gutter: 20px;
    --band-pad: 48px;
    --size-display: 30px; --lh-display: 38px;
    --size-h2: 24px;      --lh-h2: 32px;
    --size-h3: 22px;      --lh-h3: 30px;
  }
  .dd-v2 .dd-grid--2, .dd-v2 .dd-grid--3,
  .dd-v2 .dd-grid--4, .dd-v2 .dd-grid--5,
  .dd-v2 .dd-stats { grid-template-columns: minmax(0, 1fr); }
  .dd-v2 .dd-hero { padding: 72px var(--content-gutter); min-height: 0; }
  /* Largura continua auto no mobile. O padding encolhe para o rotulo caber
     sem o botao virar uma barra da largura da tela. */
  .dd-v2 { --control-pad: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-v2 * { transition: none !important; animation: none !important; }
}

/* ====================================================== SANGRIA NO BETHEME

   O Betheme entrega o conteudo dentro de uma coluna: .section_wrapper tem
   max-width (1080px no desktop) mais 33px de goteira de cada lado. As bandas
   da v2 ja trazem a propria goteira e o proprio --content-max, entao dentro
   dessa coluna elas ficavam duplamente estreitas . e as bandas escuras liam
   como caixas flutuando no branco, em vez de faixas atravessando a pagina.

   Anular a coluna aqui e melhor do que romper de dentro com 100vw: o 100vw
   conta a barra de rolagem, sobra a largura dela, e o que sobra vira corte
   ou rolagem lateral. Zerando a largura maxima, cada banda passa a ocupar a
   largura real do documento e o --content-max de dentro dela continua
   centralizando o texto onde sempre esteve.

   Vale so onde a v2 esta ativa, que o body_class marca com .dd-v2-page. O
   resto do site continua com a coluna do tema. */

body.dd-v2-page .mcb-section.the_content > .section_wrapper {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
body.dd-v2-page .mcb-section.the_content .the_content_wrapper {
  width: 100%;
  margin-inline: 0;
}

/* ========================================= COLISAO DE NOME COM O HERO ANTIGO

   .dd-hero existe duas vezes neste site. No style.css do tema filho ele e o
   hero da BeBuilder do desenho anterior: isolation:isolate, particulas em
   z-index 0 e um veu diagonal em .dd-hero::after com z-index 1, que comeca
   OPACO (#0C2727 em 0%, .94 em 30%) e so abre a partir de 58%. Naquele
   desenho o conteudo era .dd-hero > .section_wrapper, e a regra seguinte do
   style.css levanta esse filho para z-index 2, por cima do veu.

   A v2 herdou o nome da classe e nao o filho: aqui o conteudo e
   .dd-hero__inner, que nao casa com aquele seletor e portanto fica em
   z-index automatico. Texto de elemento estatico pinta ANTES de qualquer
   posicionado com z-index 1, entao o veu ficava por cima do h1 . e o terco
   esquerdo de cada linha, onde o veu e opaco, sumia por completo.

   O sintoma engana: o computed style diz color #fafafa e opacity 1, nenhum
   elemento cobre o ponto, e mesmo assim o pixel medido no h1 da 21,47,47.
   Quem cobria era pseudo-elemento, que nao aparece em querySelectorAll.

   Uma linha resolve: o mesmo z-index 2 que o desenho antigo dava ao filho
   dele. O veu volta a ser o que sempre quis ser . fundo do texto, e nao
   camada por cima dele. */

.dd-v2 .dd-hero__inner {
  position: relative;
  z-index: 2;
}

/* ============================================ BOTAO FANTASMA NO HERO ESCURO

   O .dd-btn--ghost nasceu para fundo claro: texto neutral-800 e anel escuro.
   So a banda escura o clareava. O hero tambem e escuro e ficou de fora, entao
   o segundo CTA da home ficava preto sobre teal quase preto . visivel apenas
   pelo contorno. Vale enquanto o hero estatico existir como alternativa ao
   filme; quando o filme esta ligado o cartao e claro e a regra padrao serve. */

.dd-v2 .dd-hero .dd-btn--ghost {
  color: var(--neutral-050);
  box-shadow: var(--ring) var(--border-on-dark);
}
.dd-v2 .dd-hero .dd-btn--ghost:hover {
  background: hsl(0 0% 100% / .08);
}

/* ================================================== SELOS DO HERO ESTATICO

   Os quatro selos ficam no rodape do hero, que e onde o veu diagonal ja abriu
   e a campina esta no ponto mais claro. Medido sobre o pixel composto, o selo
   da direita dava 4,06:1 em neutral-200 . abaixo dos 4,5:1 de texto normal.
   Branco puro resolve sem escurecer mais a arte. Vale so no hero estatico; no
   filme os selos ficam sobre cartao claro e a cor padrao serve. */

.dd-v2 .dd-hero .dd-proof { color: var(--neutral-050); }

/* E o rotulo tambem: 12px em caixa alta e texto normal para o criterio, e em
   neutral-300 media 3,55:1 sobre a mesma faixa clara. */
.dd-v2 .dd-hero .dd-eyebrow { color: var(--neutral-050); }