/* src/styles/rics-global.css */
/* Fontes (Google Fonts: Cal Sans + Google Sans Flex, latin e latin-ext) */
@font-face { font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/calsans/v2/fdN99sWUv3gWqXxqqRBStFs04A.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/calsans/v2/fdN99sWUv3gWqXxqqRBctFs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/googlesansflex/v23/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwGpVd4AZzz0v6lJ4qFXNZhGjLvDSkV4USKMo6qQzwliVdHAy8xxxg2a2c.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/googlesansflex/v23/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwGpVd4AZzz0v6lJ4qFXNZhGjLvDSkV4USKMo6qQzwliVdHAy8xyRg2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Tokens ===== */
:root {
  --c-bg: var(--cream, #f3efe6);
  --c-bg-glow: var(--sand, #d4c8af);
  --c-bg-soft: var(--mint, #d6e3db);
  --c-text: var(--ink, #171715);
  --c-heading: var(--forest, #236b43);
  --c-body: var(--stone, #57554f);
  --c-muted: var(--fog, #c8c5bc);
  --c-on-accent: #ffffff;
  --f-display: "Cal Sans", "Google Sans Flex", system-ui, sans-serif;
  --f-body: "Google Sans Flex", system-ui, sans-serif;
}

/* ===== Fundo com gradiente que se move com o scroll ===== */
/* Registrar as variáveis como porcentagem faz o navegador interpolar os valores */
@property --posX { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --posY { syntax: '<percentage>'; inherits: false; initial-value: 20%; }

@keyframes rics-bg-slide {
  0%   { --posX: 10%; --posY: 20%; }
  25%  { --posX: 85%; --posY: 35%; }
  50%  { --posX: 20%; --posY: 80%; }
  75%  { --posX: 90%; --posY: 15%; }
  100% { --posX: 50%; --posY: 90%; }
}

/* overflow-x: clip (e não hidden) evita rolagem lateral sem quebrar o position: sticky no Safari/iPhone */
html { background-color: var(--c-bg); overflow-x: clip; }
body {
  margin: 0;
  color: var(--c-text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  background-color: var(--c-bg);
  background-attachment: fixed;
  background-image: radial-gradient(circle at var(--posX) var(--posY), var(--c-bg-glow), var(--c-bg) 60%);
  animation: rics-bg-slide linear;
  animation-timeline: scroll();
  overflow-x: clip;
}

/* Animações usadas na Home */
@keyframes rx-blink { 50% { opacity: 0; } }

/* Cursor piscando no fim dos títulos com efeito de digitação (“Algumas vezes|”) */
.rx-type::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.04em;
  vertical-align: -0.08em;
  background-color: currentColor;
  animation: rx-blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rx-type::after { animation: none; }
}

/* Bolinha verde do botão “Agendar um horário” */
.rx-btn::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--c-heading);
  transition: background-color 0.2s ease;
}
.rx-btn:hover::before { background-color: #3fae6f; }

/* Bolinha verde ao lado de “Também atendemos agências” */
.rx-agencies__head::before {
  content: "";
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--c-heading);
}

/* Depoimentos — mobile: as aspas do fundo ocupam a largura do slide (sem cortar) e o slide
   tem no mínimo a altura delas; texto por cima, foto embaixo à direita */
@media (max-width: 767px) {
  .rx-quote { display: grid; grid-template-columns: 100%; width: 100%; }
  .rx-quote .rx-quote__bg { position: relative; left: 0; top: 0; grid-area: 1 / 1; width: 100%; height: auto; align-self: start; }
  .rx-quote .rx-quote__body { grid-area: 1 / 1; padding: 96px 8px 24px 24px; max-width: none; }
  .rx-quote .rx-quote__photo { grid-area: 2 / 1; justify-self: end; margin-top: -48px; }
}

/* Depoimentos — desktop: depoimento longo ocupa mais largura (Figma: Component 1/Group 20) */
@media (min-width: 1024px) {
  .rx-quote.rx-quote--wide { width: min(100%, 1100px); }
  .rx-quote--wide .rx-quote__body { width: 100%; max-width: none; box-sizing: border-box; padding: 123px 0 0 100px; }
  .rx-quote--wide .rx-quote__text { max-width: 1001px; }
  .rx-quote--wide .rx-quote__role { max-width: 164px; }
  .rx-quote--wide .rx-quote__photo { align-self: flex-start; margin-left: 281px; margin-top: -80px; }
}

@media (min-width: 768px) {
  .rx-btn::before { width: 20px; height: 20px; }
  .rx-agencies__head::before { width: 41px; height: 41px; margin-top: 12px; }
}
@keyframes rx-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Carrossel de logos: contínuo, sem relação com a rolagem da página.
   Mobile: bem mais rápido e nunca para. Desktop: pausa só com o mouse em cima.
   Sem script: a faixa inteira anda. Com script (.is-ready): cada logo anda sozinha —
   camadas pequenas, porque o Safari/iPhone descarta pedaços de camadas animadas muito largas
   (era isso que fazia as logos “sumirem e aparecerem”). */
/* Carrossel: sem JS anima por CSS com máscara; com JS (is-ready) o script move a faixa e esmaece as bordas por opacidade (sem mask, que some no iOS) */
.rx-marquee .rx-marquee__track { animation: rx-marquee 60s linear infinite; }
.rx-marquee:not(.is-ready) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rx-marquee.is-ready { -webkit-mask-image: none; mask-image: none; }
.rx-marquee.is-ready .rx-marquee__track { animation: none; }

/* =====================================================================
   Estados interativos (ativados pelo script rics-home.js)
   Ficam aqui, e não nas classes do editor, porque o Instatic não aplica
   de forma confiável regras compostas como “.bloco.is-ready .item”.
   Sem o script (ex.: dentro do editor) nada disso entra e o conteúdo aparece estático.
   ===================================================================== */

/* --- Foto do hero: quadros no canvas + hero preso enquanto envelhece --- */
.rx-hero__photo .rx-hero__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.rx-hero__photo.is-frames .rx-hero__canvas { opacity: 1; }
.rx-hero__photo.is-frames .rx-hero__img { opacity: 0; transition: none; }
.rx-hero-track { position: relative; }
.rx-hero-track.is-pinned .rx-hero { position: sticky; top: calc(var(--rx-hero-top, 0) * 1px); }

/* --- Serviços: serviços + seção seguinte presos juntos (a página “pausa”),
       com o serviço ativo no meio da tela e o conteúdo de baixo já no lugar --- */
.rx-svc .rx-svc__item::before { content: ""; position: absolute; left: 0; top: 8px; width: 25px; height: 25px; border-radius: 50%; background: var(--c-heading); transition: transform 0.4s ease; }
.rx-svc .rx-svc__dots { display: none; }
.rx-svc-track { position: relative; }
.rx-svc-track.is-pinned .rx-svc-pin { position: sticky; top: calc(var(--rx-svc-top, 0) * 1px); }
.rx-svc.is-ready .rx-svc__stage { position: relative; height: var(--stage-h); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.rx-svc.is-ready .rx-svc__list { position: relative; height: 100%; display: block; }
.rx-svc.is-ready .rx-svc__item { position: absolute; top: 0; left: 0; right: 0; transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)); opacity: var(--o, 1); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), opacity 0.4s ease; }
.rx-svc.is-ready .rx-svc__item:not(.is-active) .rx-svc__name { color: var(--c-muted); }
.rx-svc.is-ready .rx-svc__item:not(.is-active)::before { transform: scale(0); }
/* só o serviço ativo mostra o texto; os demais mostram apenas o título */
.rx-svc.is-ready .rx-svc__desc { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.rx-svc.is-ready .rx-svc__item.is-active .rx-svc__desc { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.3s, visibility 0s linear 0s; }
@media (min-width: 1100px) {
  .rx-svc .rx-svc__item::before { top: 50%; width: 33px; height: 33px; margin-top: -16px; }
}
@media (max-width: 1099px) {
  .rx-svc.is-ready .rx-svc__stage { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .rx-svc.is-ready .rx-svc__item { visibility: hidden; transition: transform 0.5s ease, opacity 0.2s ease, visibility 0s linear 0.2s; }
  .rx-svc.is-ready .rx-svc__item.is-active { visibility: visible; transition: transform 0.5s ease, opacity 0.35s ease 0.25s, visibility 0s linear 0s; }
  .rx-svc.is-ready .rx-svc__item::before { display: none; }
  .rx-svc.is-ready .rx-svc__dots { display: flex; position: absolute; left: 0; top: 0; width: 25px; margin: 0; padding: 0; list-style: none; flex-direction: column; align-items: center; transform: translateY(calc(var(--dy, 0) * 1px)); transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); }
  .rx-svc.is-ready .rx-svc__dots span { display: block; flex: none; width: 10px; height: 10px; margin: 7px 0; border-radius: 50%; background: var(--c-muted); transition: width 0.4s ease, height 0.4s ease, margin 0.4s ease, background 0.4s ease; }
  .rx-svc.is-ready .rx-svc__dots span.is-on { width: 25px; height: 25px; margin: 0; background: var(--c-heading); }
}

/* --- Sobre: cards subindo e empilhando --- */
.rx-about.is-ready .rx-about__stage { position: sticky; top: calc(var(--rx-about-top, 0) * 1px); }
.rx-about.is-ready .rx-about__cards { gap: 0; }
.rx-about.is-ready .rx-about__card { grid-area: 1 / 1; transform: translateY(calc(var(--ty, 0) * 1px)) rotate(var(--rot, -4deg)); background-color: color-mix(in srgb, var(--c-bg-soft) calc(var(--cover, 0) * 100%), var(--c-heading)); will-change: transform; }
.rx-about.is-ready .rx-about__card p { opacity: calc(1 - var(--cover, 0)); }

/* --- Depoimentos: slider (bolinhas em cima, clique ou arraste) --- */
.rx-trust .rx-trust__dots { display: none; }
.rx-trust.is-ready .rx-trust__dots { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: -16px; }
.rx-trust.is-ready .rx-trust__dots button { display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--c-heading); opacity: 0.25; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; }
.rx-trust.is-ready .rx-trust__dots button:hover { opacity: 0.6; }
.rx-trust.is-ready .rx-trust__dots button.is-on { opacity: 1; transform: scale(1.4); }
.rx-trust.is-ready .rx-trust__dots button:focus-visible { outline: 2px solid var(--c-heading); outline-offset: 4px; }
.rx-trust.is-ready .rx-trust__slider { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; transition: height 0.45s ease; }
.rx-trust.is-ready .rx-trust__slider.is-dragging { cursor: grabbing; }
.rx-trust.is-ready .rx-trust__track { display: flex; gap: 0; align-items: flex-start; transform: translateX(calc(var(--k, 0) * -100% + var(--dx, 0) * 1px)); transition: transform 0.55s cubic-bezier(.2, .7, .2, 1); }
.rx-trust.is-ready .rx-trust__slider.is-dragging .rx-trust__track { transition: none; }
.rx-trust.is-ready .rx-trust__slide { flex: 0 0 100%; }
.rx-trust.is-ready .rx-trust__slide img { -webkit-user-drag: none; pointer-events: none; }


/* src/styles/rics-diagnostico.css */
/* =====================================================================
   Página /diagnostico (todas as regras usam o prefixo .dg, não afetam outras páginas)
   Cores: tokens da marca (--c-*) + acentos do Google (--g-*). Verde = --c-heading / --c-bg-soft.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html:has(.dg) { scroll-behavior: smooth; }
}

.dg { color: var(--c-text); font-family: var(--f-body); font-size: 17px; line-height: 1.55; }
.dg *, .dg *::before, .dg *::after { box-sizing: border-box; }
:where(.dg) :where(h1, h2, h3, h4, p, figure, ol, ul, dl, dd, fieldset, legend, blockquote) { margin: 0; padding: 0; }
:where(.dg) fieldset { border: 0; min-width: 0; }
:where(.dg) :where(h1, h2, h3) { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; }
:where(.dg) :where(ol, ul) { list-style: none; }
:where(.dg) img { display: block; max-width: 100%; }
:where(.dg) a { color: inherit; }
.dg a:focus-visible, .dg button:focus-visible, .dg input:focus-visible, .dg select:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 3px; }
.dg [id] { scroll-margin-top: 80px; }

.dg-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .dg-wrap { padding: 0 40px; } }

.dg-band { padding: 72px 0; }
@media (min-width: 768px) { .dg-band { padding: 112px 0; } }
.dg-band--blue { background: var(--g-blue-soft); }
.dg-band--white { background: var(--c-on-accent); }
.dg-band--yellow { background: var(--g-yellow-soft); }
.dg-band--green { background: var(--c-bg-soft); }
.dg-band--ink { background: var(--c-text); color: var(--c-on-accent); }

/* ---------- Eyebrow, títulos, texto ---------- */
.dg-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body) !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--c-text); }
.dg-eyebrow::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--c-heading)); }
.dg-eyebrow--blue { --dot: var(--g-blue); }
.dg-eyebrow--red { --dot: var(--g-red); }
.dg-eyebrow--yellow { --dot: var(--g-yellow); }
.dg-eyebrow--green { --dot: var(--c-heading); }
.dg-band--ink .dg-eyebrow { color: var(--c-on-accent); }
.dg-eyebrow--four::before { display: none; }
.dg-four { display: inline-flex; gap: 4px; flex: none; }
.dg-four > * { width: 9px; height: 9px; border-radius: 50%; }
.dg-four > :nth-child(1) { background: var(--g-blue); }
.dg-four > :nth-child(2) { background: var(--g-red); }
.dg-four > :nth-child(3) { background: var(--g-yellow); }
.dg-four > :nth-child(4) { background: var(--c-heading); }

.dg-title { font-size: 36px; line-height: 1.12; max-width: 900px; text-wrap: balance; }
@media (min-width: 768px) { .dg-title { font-size: 52px; line-height: 1.08; } }
@media (min-width: 1100px) { .dg-title { font-size: 60px; line-height: 64px; } }
.dg-head-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
@media (min-width: 768px) { .dg-head-block { margin-bottom: 64px; } }
.dg-head-block--center { align-items: center; text-align: center; }
.dg-small { font-size: 14px; line-height: 1.5; color: var(--c-body); }

/* Botão: usa .rx-btn da marca; ajustes para rótulos longos no celular */
.dg a.rx-btn, .dg button.rx-btn { color: var(--c-on-accent); }
.rx-btn.dg-btn { max-width: 100%; justify-content: center; text-align: left; font-size: 18px; line-height: 24px; padding: 18px 28px; min-height: 56px; border: 0; cursor: pointer; }
@media (min-width: 768px) { .rx-btn.dg-btn { font-size: 20px; line-height: 28px; padding: 22px 36px; } }
.rx-btn.dg-btn--full { width: 100%; }
.dg-btn-row { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- 0. Cabeçalho ---------- */
.dg-top { position: sticky; top: 0; z-index: 50; background: var(--c-bg); }
.dg-top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 8px 16px; min-height: 64px; }
@media (min-width: 768px) { .dg-top__in { padding: 10px 40px; min-height: 76px; } }
.dg-top__logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.dg-top__logo img { width: 76px; height: auto; }
@media (min-width: 768px) { .dg-top__logo img { width: 96px; } }
.dg-top__nav { display: none; }
@media (min-width: 1100px) {
  .dg-top__nav { display: flex; align-items: center; gap: 2px; }
}
.dg-top__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 100px; font-size: 15px; color: var(--c-body); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.dg-top__nav a:hover { background: var(--g-blue-soft); color: var(--c-text); }
.dg-top__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 100px; background: var(--c-text); color: var(--c-on-accent) !important; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.dg-top__cta:hover { transform: translateY(-1px); background: var(--g-blue); }

/* ---------- Moldura de celular (placeholder do print) ---------- */
.dg .dg-phone { width: 100%; max-width: 320px; margin: 0 auto; padding: 10px; border-radius: 46px; background: var(--c-text); }
.dg-phone__screen { position: relative; overflow: hidden; border-radius: 36px; background: var(--c-bg); aspect-ratio: 9 / 15.5; display: flex; flex-direction: column; }
.dg-phone__bar { display: flex; align-items: center; gap: 10px; padding: 34px 16px 12px; background: var(--c-heading); color: var(--c-on-accent); }
.dg-phone__bar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; }
.dg-phone__name, .dg-phone__sub { color: var(--c-on-accent); }
.dg-phone__name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.dg-phone__sub { line-height: 1.3; font-size: 12px; opacity: .85; }
.dg-phone__chat { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-start; }
.dg-phone__bubble { align-self: flex-start; width: 88%; padding: 6px; border-radius: 4px 18px 18px 18px; background: var(--c-on-accent); }
.dg-phone__bubble img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.dg-phone__cap { padding: 10px 8px 6px; font-size: 14px !important; line-height: 1.4 !important; color: var(--c-text) !important; }
.dg .dg-phone--lg { max-width: 360px; }

/* ---------- 1. Hero ---------- */
.dg-hero { padding: 48px 0 72px; text-align: center; }
@media (min-width: 768px) { .dg-hero { padding: 72px 0 112px; } }
.dg-hero__in { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dg-hero__title { font-size: clamp(36px, 6.2vw, 76px); line-height: 1.04; max-width: 1060px; text-wrap: balance; }
.dg-hero__lead { max-width: 624px; font-size: 18px; line-height: 1.65; color: var(--c-body); }
@media (min-width: 768px) { .dg-hero__lead { font-size: 20px; line-height: 32px; } }
.dg-hero__note { font-size: 15px; color: var(--c-body); max-width: 420px; }
.dg-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
.dg-hero__phone { margin-top: 32px; width: 100%; }

/* ---------- 2. Comparativo ---------- */
.dg-vs { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .dg-vs { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 24px; } }
.dg-vs__x { display: flex; align-items: center; justify-content: center; align-self: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--c-text); color: var(--c-on-accent); font-family: var(--f-display); font-size: 26px; line-height: 1; }
.dg-side { display: flex; flex-direction: column; gap: 16px; }
.dg-side__label { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--c-text); }
.dg-side__label::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--g-red)); }
.dg-side--good .dg-side__label { --dot: var(--c-heading); }

.dg-gcard { overflow: hidden; border-radius: 24px; background: var(--c-bg); }
.dg-gcard__cover { position: relative; display: flex; align-items: flex-start; padding: 16px; aspect-ratio: 16 / 7; background: var(--c-muted); color: var(--c-body); font-size: 14px; }
.dg-side--good .dg-gcard__cover { background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--g-blue-soft) 100%); color: var(--c-heading); }
.dg-gcard__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 6px 0; }
.dg-gcard__thumbs > * { aspect-ratio: 1; border-radius: 10px; background: var(--c-muted); }
.dg-side--good .dg-gcard__thumbs > * { background: var(--c-heading); }
.dg-side--good .dg-gcard__thumbs > :nth-child(2) { background: #2f8556; }
.dg-side--good .dg-gcard__thumbs > :nth-child(3) { background: var(--c-bg-soft); }
.dg-side--good .dg-gcard__thumbs > :nth-child(4) { background: #3fae6f; }
.dg-gcard__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
@media (min-width: 768px) { .dg-gcard__body { padding: 24px 28px 28px; } }
.dg-gcard__name { font-size: 26px !important; line-height: 1.15 !important; }
.dg-stars { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--c-body); }
.dg-stars b { font-weight: 400; color: var(--c-text); letter-spacing: 2px; font-size: 17px; }
.dg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-pills span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 100px; background: var(--g-blue-soft); color: var(--g-blue); font-size: 15px; font-weight: 600; }
.dg-rows { display: flex; flex-direction: column; gap: 4px; }
.dg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.dg-row dt { font-size: 15px; color: var(--c-body); flex: none; }
.dg-row dd { text-align: right; }
.dg-tag { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.dg-tag--red { background: var(--g-red-soft); color: var(--g-red); }
.dg-tag--green { background: var(--c-bg-soft); color: var(--c-heading); }
.dg-review { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--c-on-accent); }
.dg-review__q { font-size: 16px; line-height: 1.5; color: var(--c-text); }
.dg-review__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--c-body); }
.dg-review__reply { margin-top: 4px; padding: 4px 0 4px 14px; border-left: 3px solid var(--c-heading); font-size: 15px; line-height: 1.5; color: var(--c-body); }
.dg-result { padding: 18px 20px; border-radius: 18px; font-size: 16px; line-height: 1.55; color: var(--c-text); }
.dg-result--red { background: var(--g-red-soft); }
.dg-result--green { background: var(--c-bg-soft); }
.dg-result b { font-weight: 600; }
.dg-vs__note { margin-top: 24px; text-align: center; }

/* ---------- 3. Como funciona ---------- */
.dg-steps { display: grid; gap: 40px; }
@media (min-width: 900px) { .dg-steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.dg-step { display: flex; flex-direction: column; gap: 16px; }
.dg-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--c-on-accent); background: var(--n, var(--g-blue)); }
.dg-num--blue { --n: var(--g-blue); }
.dg-num--red { --n: var(--g-red); }
.dg-num--yellow { --n: var(--g-yellow); color: var(--c-text); }
.dg-num--green { --n: var(--c-heading); }
.dg-step h3 { font-size: 30px; line-height: 1.15; }
.dg-step p { font-size: 18px; line-height: 1.6; color: var(--c-body); max-width: 360px; }

/* ---------- 4. O que você recebe ---------- */
.dg-get { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .dg-get { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; } }
.dg-get__media { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.dg-get__media p { max-width: 360px; font-size: 16px; line-height: 1.55; color: var(--c-body); text-align: center; }
.dg-list { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.dg-list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.dg-list h3 { font-size: 26px; line-height: 1.2; padding-top: 12px; }
.dg-list p { margin-top: 6px; font-size: 18px; line-height: 1.6; color: var(--c-body); }

/* ---------- 5. O que eu analiso ---------- */
.dg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .dg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .dg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dg-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 20px 20px; border-radius: 18px; background: var(--c-bg); border-left: 5px solid var(--edge, var(--g-blue)); transition: transform .2s ease; }
.dg-item:hover { transform: translateY(-2px); }
.dg-item:nth-child(4n+1) { --edge: var(--g-blue); }
.dg-item:nth-child(4n+2) { --edge: var(--g-red); }
.dg-item:nth-child(4n+3) { --edge: var(--g-yellow); }
.dg-item:nth-child(4n+4) { --edge: var(--c-heading); }
.dg-item h3 { font-size: 20px; line-height: 1.2; }
.dg-item p { font-size: 15px; line-height: 1.45; color: var(--c-body); }

/* ---------- 6. Quem faz ---------- */
.dg-who { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dg-who { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }
.dg-who__photo { width: 100%; max-width: 440px; aspect-ratio: 488 / 650; object-fit: cover; border-radius: 28px; margin: 0 auto; }
.dg-who__text { display: flex; flex-direction: column; gap: 20px; }
.dg-who__text > p { font-size: 18px; line-height: 1.65; color: var(--c-text); max-width: 600px; }
@media (min-width: 768px) { .dg-who__text > p { font-size: 20px; line-height: 32px; } }
.dg-facts { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 600px) { .dg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.dg-fact { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px; background: var(--c-bg); }
.dg-fact strong { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--c-heading); }
.dg-fact span { font-size: 15px; line-height: 1.45; color: var(--c-body); }

/* ---------- 7. Para deixar claro ---------- */
.dg-clear { display: flex; flex-direction: column; gap: 24px; max-width: 65ch; }
.dg-clear h2 { font-size: 36px; line-height: 1.12; color: var(--c-on-accent); }
@media (min-width: 768px) { .dg-clear h2 { font-size: 56px; line-height: 64px; } }
.dg-clear p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
@media (min-width: 768px) { .dg-clear p { font-size: 20px; line-height: 34px; } }

/* ---------- 8. Dúvidas ---------- */
.dg-faq { display: grid; gap: 12px; }
@media (min-width: 900px) { .dg-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.dg-faq__item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: var(--c-bg); }
@media (min-width: 768px) { .dg-faq__item { padding: 28px 32px; } }
.dg-faq__item--wide { grid-column: 1 / -1; }
.dg-faq__item h3 { font-family: var(--f-body) !important; font-weight: 600 !important; font-size: 19px; line-height: 1.35; letter-spacing: 0 !important; }
.dg-faq__item p { font-size: 17px; line-height: 1.6; color: var(--c-body); }

/* ---------- 9. Pedido / formulário ---------- */
.dg-order__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
.dg-order__head h2 { font-size: 34px; line-height: 1.14; max-width: 840px; text-wrap: balance; }
@media (min-width: 768px) { .dg-order__head h2 { font-size: 52px; line-height: 1.1; } }
.dg-order__head p { font-size: 18px; line-height: 1.6; color: var(--c-body); max-width: 560px; }
.dg-cards { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dg-card { position: relative; width: 100%; max-width: 480px; overflow: hidden; border-radius: 28px; background: var(--c-on-accent); }
.dg-cards.is-ready .dg-card { display: none; }
.dg-cards.is-ready .dg-card.is-on { display: block; animation: dg-in .35s ease both; }
@keyframes dg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dg-cards.is-ready .dg-card.is-on { animation: none; } }
.dg-progress { height: 6px; background: var(--g-blue-soft); }
.dg-progress--45 { --p: 45%; --pn: 45; }
.dg-progress--90 { --p: 90%; --pn: 90; }
.dg-progress--100 { --p: 100%; --pn: 100; }
.dg-progress > div { display: block; height: 100%; width: var(--p, 45%); background: linear-gradient(90deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--c-heading)); background-size: calc(10000% / var(--pn, 45)) 100%; border-radius: 0 6px 6px 0; }
.dg-card__in { display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px; }
@media (min-width: 480px) { .dg-card__in { padding: 32px 32px 36px; } }
.dg-card__step { font-size: 14px; font-weight: 600; color: var(--g-blue); }
.dg-card__title { font-size: 28px !important; line-height: 1.15 !important; }
.dg-field { display: flex; flex-direction: column; gap: 8px; }
.dg-field label, .dg-field legend { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-text); }
.dg-req { color: var(--g-red); margin-left: 2px; }
.dg-input { width: 100%; min-height: 54px; padding: 0 16px; border: 2px solid transparent; border-radius: 14px; background: var(--c-bg); color: var(--c-text); font: inherit; font-size: 17px; transition: border-color .2s ease, background-color .2s ease; }
.dg-input:hover { border-color: var(--c-muted); }
.dg-input:focus { outline: none; border-color: var(--g-blue); background: var(--c-on-accent); }
select.dg-input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23171715' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.dg-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dg-opt { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border: 2px solid transparent; border-radius: 14px; background: var(--c-bg); font-size: 16px; line-height: 1.35; font-weight: 400; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.dg-opt:hover { border-color: var(--c-muted); }
.dg-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--g-blue); }
.dg-opt:has(input:checked) { background: var(--g-blue-soft); border-color: var(--g-blue); }
.dg-opt:has(input:focus-visible) { outline: 3px solid var(--g-blue); outline-offset: 2px; }
.dg-card__center { text-align: center; }
.dg-card__links a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; margin: -10px 0; }

.dg-done__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.dg-done__text { font-size: 17px; line-height: 1.6; color: var(--c-body); }
.dg-track { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--c-bg); }
.dg-track li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.dg-track .dg-num { width: 40px; height: 40px; font-size: 18px; }
.dg-track li > div > strong { display: block; font-size: 16px; font-weight: 600; }
.dg-track li > div > span { display: block; font-size: 15px; color: var(--c-body); }

/* ---------- 10. Rodapé ---------- */
.dg-foot { padding: 40px 0 48px; background: var(--c-bg); }
.dg-foot__in { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--c-body); }
@media (min-width: 768px) { .dg-foot__in { flex-direction: row; justify-content: space-between; align-items: center; } }
.dg-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dg-foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }


/* src/styles/rics-dx.css */
/* =====================================================================
   Página /diagnostico (v2) — tudo com prefixo .dx
   Cores e fontes só da marca (DESIGN.md seções 1 e 2).
   O reset usa :where(.dx) para não ganhar das classes.
   Estados com script (.is-ready / .is-in) ficam aqui; sem o script
   (ex.: no editor) tudo aparece estático e os 3 cartões do formulário empilhados.
   ===================================================================== */

:where(.dx) *, :where(.dx) *::before, :where(.dx) *::after { box-sizing: border-box; }
:where(.dx) :is(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset, legend) { margin: 0; padding: 0; }
:where(.dx) :is(ul, ol) { list-style: none; }
:where(.dx) img { display: block; max-width: 100%; height: auto; }
:where(.dx) fieldset { border: 0; min-width: 0; }

.dx {
  --dx-m: 16px;
  --dx-sec: 96px;
  --dx-line: rgba(87, 85, 79, 0.1);
  display: block;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
}
@media (min-width: 768px) { .dx { --dx-m: 40px; --dx-sec: 128px; font-size: 18px; } }
@media (min-width: 1100px) { .dx { --dx-sec: 160px; } }

:where(.dx) :is(h1, h2, h3, h4) { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
:where(.dx) a { color: inherit; }
.dx :is(a, button, input, label, summary):focus-visible { outline: 3px solid var(--c-heading); outline-offset: 3px; }
.dx strong { font-weight: 600; color: var(--c-text); }

.dx-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--dx-m); }

/* Eixo editorial: 42% para notas, 58% para o conteúdo */
.dx-split { display: grid; row-gap: 24px; }
@media (min-width: 1100px) {
  .dx-split { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 48px; }
}

.dx-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; color: var(--c-heading); }
.dx-eyebrow::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c-heading); }

.dx-title { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.05; color: var(--c-text); max-width: 1050px; }
.dx-lead { font-size: 20px; line-height: 32px; color: var(--c-body); max-width: 624px; }
.dx-caption { font-size: 14px; line-height: 20px; color: var(--c-body); }

.dx .rx-btn { max-width: 100%; text-align: left; }
@media (max-width: 767px) { .dx .rx-btn { font-size: 18px; line-height: 24px; padding: 18px 26px; } }
.dx .rx-btn:active { transform: translateY(0) scale(0.98); }

/* ---------- Barra do topo ---------- */
.dx-top { padding: 12px 0; }
.dx-top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dx-top__logo { display: inline-flex; padding: 8px 0; }
.dx-top__logo img { width: 96px; height: auto; }
.dx-top__nav { display: none; }
.dx-top__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
  border-radius: 100px; background: var(--c-text); color: var(--c-on-accent) !important;
  font-size: 15px; line-height: 20px; text-decoration: none; white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.dx-top__cta:hover { transform: translateY(-2px); background: var(--c-heading); }
@media (min-width: 768px) { .dx-top { padding: 20px 0; } .dx-top__logo img { width: 134px; } .dx-top__cta { font-size: 16px; padding: 12px 24px; } }
@media (min-width: 1100px) {
  .dx-top__logo img { width: 161px; }
  .dx-top__nav { display: flex; gap: 28px; font-size: 16px; line-height: 24px; }
  .dx-top__nav a { text-decoration: none; color: var(--c-body); padding: 10px 0; transition: color 0.2s ease; }
  .dx-top__nav a:hover { color: var(--c-heading); }
}

/* ---------- Hero ---------- */
.dx-mast { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 200px; overflow: hidden; }
.dx-mast > * { min-width: 0; height: 100%; }
.dx-mast img { width: 100%; height: 100%; object-fit: cover; }
.dx-mast__tile--mint { background: var(--c-bg-soft); }
.dx-mast__tile--forest { background: var(--c-heading); }
.dx-mast__hide-sm { display: none; }
@media (min-width: 768px) {
  .dx-mast { grid-template-columns: 2fr 1fr 1.2fr 1fr 1.4fr; height: 300px; }
  .dx-mast__hide-sm { display: block; }
}
@media (min-width: 1100px) { .dx-mast { height: 280px; } }

.dx-hero__body { padding-top: 40px; padding-bottom: var(--dx-sec); }
.dx-hero__title { margin-top: 20px !important; font-size: clamp(36px, 5vw, 76px); line-height: 1.02; letter-spacing: -0.02em; max-width: 1240px; }
.dx-hero__row { margin-top: 40px; }
.dx-hero__side { display: grid; gap: 24px; align-content: start; }
.dx-hero__who { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 24px; color: var(--c-body); align-self: start; }
.dx-hero__who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.dx-hero__who strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 24px; color: var(--c-heading); }
.dx-hero__main { display: grid; gap: 32px; justify-items: start; }
.dx-hero__lead { font-size: 20px; line-height: 32px; color: var(--c-body); max-width: 624px; }
.dx-cta { display: grid; gap: 14px; justify-items: start; }
.dx-cta__note { font-size: 15px; line-height: 22px; color: var(--c-body); max-width: 520px; }
@media (min-width: 768px) { .dx-hero__body { padding-top: 56px; } .dx-hero__lead { font-size: 22px; line-height: 34px; } }
@media (min-width: 1100px) { .dx-hero__row { margin-top: 56px; } .dx-hero__lead { font-size: 24px; line-height: 36px; } }

/* ---------- Comparação (faixa mint) ---------- */
.dx-band { padding: var(--dx-sec) 0; }
.dx-band--mint { background: var(--c-bg-soft); }
.dx-band--forest { background: var(--c-heading); color: var(--c-on-accent); }
.dx-band--ink { background: var(--c-text); color: var(--c-bg); }

.dx-head { display: grid; gap: 20px; margin-bottom: 48px; }
@media (min-width: 1100px) { .dx-head { margin-bottom: 80px; } }

.dx-vs__grid { display: grid; gap: 64px; }
@media (min-width: 900px) { .dx-vs__grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }
@media (min-width: 1100px) { .dx-vs__grid { gap: 64px; } }
.dx-vs__side { display: grid; gap: 24px; }
.dx-vs__label { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.dx-vs__side--good .dx-vs__label { color: var(--c-heading); }
.dx-vs__then { font-size: 18px; line-height: 28px; color: var(--c-body); max-width: 560px; }
.dx-vs .dx-caption { margin-top: 48px; }

/* Cartão que imita o Perfil da empresa no Google (interface, não ilustração) */
.dx-gp { background: #fff; border-radius: 20px; overflow: hidden; color: var(--c-text); }
.dx-gp__cover { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; height: 168px; overflow: hidden; background: #fff; }
.dx-gp__cover > img { min-height: 0; }
.dx-gp__cover img { width: 100%; height: 100%; object-fit: cover; }
.dx-gp__cover--dull img { filter: grayscale(0.85) brightness(0.92); }
.dx-gp__cover--one { grid-template-columns: 1fr; }
.dx-gp__body { padding: 20px 20px 24px; display: grid; gap: 16px; }
@media (min-width: 768px) { .dx-gp__body { padding: 24px 28px 28px; } }
.dx-gp__name { font-family: var(--f-body) !important; font-size: 22px !important; line-height: 28px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.dx-gp__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; line-height: 22px; color: var(--c-body); margin-top: 4px; }
.dx-gp__rating b { font-weight: 600; color: var(--c-text); }
.dx-gp__stars { color: var(--c-text); letter-spacing: 1px; font-size: 16px; }
.dx-gp__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-gp__btns span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 100px; background: var(--c-bg-soft); color: var(--c-heading); font-size: 14px; line-height: 20px; font-weight: 500; }
.dx-gp__btns span:first-child { background: var(--c-heading); color: var(--c-on-accent); }
.dx-gp__rows { display: grid; gap: 0; }
.dx-gp__row { display: grid; grid-template-columns: 22px 104px 1fr; gap: 8px; align-items: baseline; padding: 10px 0; font-size: 15px; line-height: 22px; border-top: 1px solid var(--dx-line); }
.dx-gp__row dt { color: var(--c-body); }
.dx-gp__row dd { color: var(--c-text); }
.dx-gp__mark { font-weight: 700; font-size: 15px; line-height: 22px; text-align: center; }
.dx-gp--bad .dx-gp__mark { color: #57554f; }
.dx-gp--good .dx-gp__mark { color: var(--c-heading); }
.dx-gp__flag { color: var(--c-body); font-size: 14px; }
.dx-gp__review { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--c-bg); font-size: 15px; line-height: 22px; }
.dx-gp__review q { font-size: 16px; line-height: 24px; color: var(--c-text); }
.dx-gp__meta { color: var(--c-body); font-size: 14px; line-height: 20px; }
.dx-gp__reply { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 22px; color: var(--c-text); }
.dx-gp__reply b { display: block; font-size: 14px; line-height: 20px; color: var(--c-heading); font-weight: 600; margin-bottom: 2px; }

/* ---------- Como funciona ---------- */
.dx-steps { display: grid; gap: 56px; }
.dx-step { display: grid; gap: 12px; }
.dx-step__when { font-family: var(--f-display); font-size: 18px; line-height: 24px; color: var(--c-heading); display: flex; align-items: center; gap: 10px; }
.dx-step__when::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-heading); }
.dx-step h3 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; }
.dx-step p { color: var(--c-body); max-width: 560px; }
.dx-how__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.dx-how__aside { display: grid; gap: 32px; align-content: start; }
@media (max-width: 1099px) { .dx-how__photo { aspect-ratio: 16 / 10; max-height: 360px; } }
@media (min-width: 1100px) {
  .dx-steps { gap: 80px; }
  .dx-step { grid-template-columns: 200px 1fr; column-gap: 32px; align-items: baseline; }
  .dx-step__when { grid-row: 1 / span 2; }
}

/* ---------- O que você recebe (faixa verde) ---------- */
.dx-get .dx-title { color: var(--c-on-accent); }
.dx-get .dx-lead { color: rgba(255, 255, 255, 0.86); margin-top: 24px; }
.dx-get__left { display: grid; gap: 40px; align-content: start; }
.dx-get__list { display: grid; gap: 48px; }
.dx-get__item h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: var(--c-on-accent); }
.dx-get__item p { margin-top: 10px; color: rgba(255, 255, 255, 0.86); max-width: 520px; }
.dx-get__item { padding-left: 32px; position: relative; }
.dx-get__item::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bg-soft); }
.dx-get__item--wa::before { background: #3fae6f; }
.dx-get .dx-cta__note { color: rgba(255, 255, 255, 0.8); }
.dx-get .dx-split { row-gap: 64px; }

/* Conversa de WhatsApp (interface) */
.dx-chat { background: var(--c-bg); border-radius: 22px; overflow: hidden; color: var(--c-text); max-width: 460px; width: 100%; }
.dx-chat__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--c-text); color: var(--c-bg); }
.dx-chat__bar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dx-chat__bar b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.dx-chat__bar span { font-size: 14px; line-height: 18px; opacity: 0.75; }
.dx-chat__log { display: grid; gap: 10px; padding: 18px; }
.dx-chat__msg { max-width: 92%; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #fff; font-size: 15px; line-height: 22px; }
.dx-chat__msg b { color: var(--c-heading); font-weight: 600; }
.dx-chat__msg ol { list-style: decimal; padding-left: 20px; }
.dx-chat__time { display: block; text-align: right; font-size: 14px; line-height: 18px; color: var(--c-body); margin-top: 4px; }
.dx-chat__cap { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.8); margin-top: 12px; }

/* ---------- O que eu analiso (checklist interativo) ---------- */
.dx-check__grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .dx-check__grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 48px; align-items: start; } }
.dx-check__aside { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1100px) { .dx-check__aside { position: sticky; top: 32px; } }
.dx-check__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dx-meter { padding: 24px; background: var(--c-bg-soft); border-radius: 20px; display: grid; gap: 12px; }
.dx-meter__num { font-family: var(--f-display); font-size: 56px; line-height: 1; color: var(--c-heading); }
.dx-meter__num small { font-size: 24px; color: var(--c-body); }
.dx-meter__bar { height: 10px; border-radius: 10px; background: rgba(35, 107, 67, 0.15); overflow: hidden; }
.dx-meter__bar span { display: block; height: 100%; width: calc(var(--p, 0) * 10%); background: var(--c-heading); border-radius: 10px; transition: width 0.4s cubic-bezier(.2, .7, .2, 1); }
.dx-meter__text { font-size: 16px; line-height: 24px; color: var(--c-body); }
.dx-meter__hint { font-size: 16px; line-height: 24px; color: var(--c-text); }

.dx-items { display: grid; }
.dx-item { position: relative; display: grid; grid-template-columns: 1fr 48px; gap: 16px; align-items: center; padding: 18px 0; cursor: pointer; }
.dx-item h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; transition: color 0.2s ease; }
.dx-item p { margin-top: 4px; color: var(--c-body); font-size: 17px; line-height: 26px; }
.dx-item__box { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--c-bg-soft); display: grid; place-items: center; justify-self: end; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.dx-item__box input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx-item__tick { width: 14px; height: 8px; border-left: 3px solid var(--c-heading); border-bottom: 3px solid var(--c-heading); transform: translateY(-2px) rotate(-45deg) scale(0.6); opacity: 0.35; transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease; }
.dx-item:hover .dx-item__box { transform: scale(1.06); }
.dx-item:has(input:checked) .dx-item__box { background: var(--c-heading); }
.dx-item:has(input:checked) .dx-item__tick { border-color: #fff; opacity: 1; transform: translateY(-2px) rotate(-45deg) scale(1); }
.dx-item:has(input:checked) h3 { color: var(--c-heading); }
.dx-item:has(input:focus-visible) .dx-item__box { outline: 3px solid var(--c-heading); outline-offset: 3px; }

/* ---------- Quem faz ---------- */
.dx-who__text { display: grid; gap: 20px; }
.dx-who__text p { color: var(--c-body); max-width: 640px; }
.dx-who__text p:first-child { font-size: 20px; line-height: 32px; color: var(--c-text); }
.dx-who__mosaic { margin-top: 64px; display: grid; gap: 16px; }
.dx-who__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dx-facts { background: var(--c-heading); color: var(--c-on-accent); padding: 32px 28px; display: grid; gap: 28px; align-content: center; }
.dx-fact h4 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1; color: var(--c-on-accent); }
.dx-fact p { margin-top: 6px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.86); }
@media (min-width: 900px) { .dx-who__mosaic { grid-template-columns: 2fr 1fr; gap: 16px; } .dx-facts { padding: 40px; } }
@media (min-width: 1100px) { .dx-who__mosaic { margin-top: 96px; } }

/* ---------- Para deixar claro (faixa tinta) ---------- */
.dx-clear .dx-eyebrow { color: var(--c-bg-soft); }
.dx-clear .dx-eyebrow::before { background: #3fae6f; }
.dx-clear__title { margin-top: 24px !important; font-size: clamp(36px, 6vw, 92px); line-height: 1; letter-spacing: -0.02em; color: var(--c-bg); max-width: 1100px; }
.dx-clear__text { margin-top: 40px; font-size: 20px; line-height: 32px; color: rgba(243, 239, 230, 0.85); max-width: 680px; }
@media (min-width: 1100px) { .dx-clear__text { margin-top: 64px; font-size: 24px; line-height: 38px; } }

/* ---------- Dúvidas ---------- */
.dx-faq { display: grid; }
.dx-faq__row { display: grid; gap: 12px; padding: 28px 0; }
.dx-faq__row h3 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; }
.dx-faq__row p { color: var(--c-body); max-width: 560px; }
@media (min-width: 1100px) {
  .dx-faq__row { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 48px; padding: 40px 0; align-items: baseline; }
  .dx-faq__row p { font-size: 19px; line-height: 30px; }
}

/* ---------- Pedido (faixa mint + formulário) ---------- */
.dx-order__head { display: grid; gap: 24px; align-content: start; }
.dx-order__title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; color: var(--c-heading); max-width: 1100px; margin-bottom: 48px !important; }
@media (min-width: 1100px) { .dx-order__title { margin-bottom: 72px !important; } }
.dx-order__sub { font-size: 20px; line-height: 32px; color: var(--c-body); max-width: 520px; }
.dx-order__who { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--c-body); }
.dx-order__who img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.dx-order__who strong { display: block; color: var(--c-text); font-weight: 600; }
.dx-order .dx-split { row-gap: 48px; }

.dx-cards { display: grid; gap: 24px; }
.dx-card { background: #fff; border-radius: 24px; padding: 28px 20px; display: grid; gap: 24px; }
@media (min-width: 768px) { .dx-card { padding: 40px; } }
.dx-cards.is-ready .dx-card { display: none; }
.dx-cards.is-ready .dx-card.is-on { display: grid; animation: dx-card-in 0.45s cubic-bezier(.2, .7, .2, 1); }
@keyframes dx-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.dx-progress { display: grid; gap: 10px; }
.dx-progress span { font-size: 15px; line-height: 20px; color: var(--c-body); }
.dx-progress i { display: block; height: 6px; border-radius: 6px; background: var(--c-bg-soft); overflow: hidden; }
.dx-progress i::after { content: ""; display: block; height: 100%; width: var(--w, 50%); background: var(--c-heading); border-radius: 6px; }
.dx-card__title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.dx-card__title:focus { outline: none; }

.dx-field { display: grid; gap: 8px; }
.dx-field label { font-size: 16px; line-height: 22px; font-weight: 500; }
.dx-field label small { font-weight: 400; color: var(--c-body); font-size: 15px; }
.dx-input {
  width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 14px;
  border: 2px solid transparent; background: var(--c-bg); color: var(--c-text);
  font: inherit; font-size: 17px; line-height: 24px; transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dx-input:hover { border-color: rgba(35, 107, 67, 0.3); }
.dx-input:focus { outline: none; border-color: var(--c-heading); background: #fff; }
.dx-input[aria-invalid="true"] { border-color: #8a3a2f; }
.dx-form { display: grid; gap: 20px; }
.dx-form .rx-btn { justify-content: center; width: 100%; border: 0; cursor: pointer; }
.dx-form__notes { display: grid; gap: 8px; font-size: 14px; line-height: 21px; color: var(--c-body); }
.dx-form__notes a { color: var(--c-heading); }

.dx-q { display: grid; gap: 12px; }
.dx-q legend { font-family: var(--f-display); font-size: 20px; line-height: 26px; margin-bottom: 12px; }
.dx-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-opt { position: relative; }
.dx-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dx-opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 100px;
  background: var(--c-bg); font-size: 16px; line-height: 22px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.dx-opt span:hover { background: var(--c-bg-soft); }
.dx-opt span:active { transform: scale(0.97); }
.dx-opt input:checked + span { background: var(--c-heading); color: var(--c-on-accent); }
.dx-opt input:focus-visible + span { outline: 3px solid var(--c-heading); outline-offset: 2px; }

.dx-done__text { color: var(--c-body); }
.dx-track { display: grid; gap: 0; }
.dx-track li { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding-bottom: 20px; }
.dx-track li::before { content: ""; width: 16px; height: 16px; margin: 4px 0 0 6px; border-radius: 50%; background: var(--c-muted); }
.dx-track li::after { content: ""; position: absolute; left: 13px; top: 24px; bottom: 0; width: 2px; background: var(--c-bg-soft); }
.dx-track li:last-child::after { display: none; }
.dx-track li.is-done::before { background: var(--c-heading); }
.dx-track li.is-now::before { background: #3fae6f; box-shadow: 0 0 0 5px rgba(63, 174, 111, 0.2); }
.dx-track h4 { font-family: var(--f-body); font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: 0; }
.dx-track p { font-size: 15px; line-height: 22px; color: var(--c-body); }

/* ---------- Rodapé ---------- */
.dx-foot { padding: 80px 0 48px; }
.dx-foot__in { display: grid; gap: 32px; }
.dx-foot__logo img { width: 161px; height: auto; }
.dx-foot__legal { font-size: 15px; line-height: 24px; color: var(--c-body); }
.dx-foot__links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 16px; line-height: 24px; }
.dx-foot__links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--c-heading); text-decoration: none; }
.dx-foot__links a:hover { text-decoration: underline; }
@media (min-width: 1100px) { .dx-foot__in { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 48px; align-items: end; } }

/* ---------- Movimento (só com o script: .dx.is-ready) ---------- */
.dx.is-ready [data-dx-reveal] { transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.dx.is-ready [data-dx-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
.dx.is-ready .dx-hero__title { clip-path: inset(0 0 0 0); }
.dx.is-ready .dx-hero__title:not(.is-in) { transform: translateY(40px); }
.dx.is-ready .dx-mast img { transform: scale(calc(1.08 - var(--mp, 0) * 0.08)); transition: transform 0.1s linear; }