/* ==========================================================================
   R&Damasco · Página de campanha HIKMICRO AI56 / AI56L
   Todo o CSS está escopado em .rdx para não vazar no tema do WordPress.
   Paleta e tipografia conforme brandbook R&Damasco.
   ========================================================================== */

.rdx {
  /* ---- Paleta oficial ---- */
  --azul: #112947;          /* primária, dominante */
  --azul-fundo: #0C1E36;    /* tinta derivada da primária, superfícies escuras */
  --azul-painel: #0A1729;   /* tinta derivada, "tela do instrumento" */
  --coral: #CD6B50;         /* acento oficial: filetes, bordas, ícones, marcas gráficas */
  --coral-forte: #B0533A;   /* mesma família, fechada: texto e botão sobre fundo claro (5,1:1) */
  --coral-forte-hv: #96442F;/* estado hover do botão */
  --coral-claro: #E0917B;   /* mesma família, aberta: texto sobre azul marinho (5,7:1) */
  --branco: #FFFFFF;
  --cinza-tec: #4A5568;     /* texto secundário em fundo claro */
  --cinza-claro: #F8F6F3;   /* fundo de seção alternada */

  /* derivados para uso em fundo escuro */
  --linha-escura: rgba(255, 255, 255, .14);
  --linha-clara: rgba(17, 41, 71, .14);
  --texto-escuro-2: rgba(255, 255, 255, .72);
  --texto-escuro-3: rgba(255, 255, 255, .52);

  /* ---- Tipografia ---- */
  --ff: "Maven Pro", "Montserrat", "Trebuchet MS", system-ui, sans-serif;
  --ff-num: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---- Métrica ---- */
  --max: 1180px;
  --gut: clamp(1.25rem, 4.5vw, 3rem);
  --r: 4px;                 /* raio único, leitura técnica */
  --secao: clamp(4.5rem, 9vw, 8rem);

  /* ---- Ritmo vertical ----
     Três degraus, usados na página inteira. Qualquer espaçamento novo deve
     sair de um deles, não de um valor solto. */
  --esp-olho: clamp(1.1rem, 1.8vw, 1.4rem);    /* sobrelinha  -> título        */
  --esp-titulo: clamp(1.4rem, 2.4vw, 1.85rem); /* título      -> corpo de texto */
  --esp-bloco: clamp(2.5rem, 4.5vw, 3.5rem);   /* corpo       -> bloco visual   */

  font-family: var(--ff);
  color: var(--azul);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Reset local, mantido em especificidade (0,1,1) de propósito: precisa vencer
   regras de tema do WordPress do tipo `.entry-content p { margin-bottom: 1em }`.
   ATENÇÃO: por causa disso, toda regra de espaçamento aplicada por classe única
   a <p>, <ul>, <ol> ou <figure> precisa vir prefixada com `.rdx ` para chegar a
   (0,2,0) e vencer este reset. Ver o bloco "Ritmo vertical" mais abaixo. */
.rdx p, .rdx h1, .rdx h2, .rdx h3, .rdx h4, .rdx ul, .rdx ol, .rdx figure { margin: 0; }
.rdx ul, .rdx ol { padding: 0; list-style: none; }
.rdx img, .rdx svg { display: block; max-width: 100%; height: auto; }
.rdx a { color: inherit; }

/* O tema declara `h1, h2, h3, h4 { color: var(--rd-primaria); font-family: Nunito }`
   em assets/css/main.css. Regra de elemento vence herança, e --rd-primaria é
   #112947, o mesmo azul do fundo do hero: sem isto o H1 sai invisível e todos
   os títulos saem em Nunito no lugar de Maven Pro. Aqui os títulos voltam a
   herdar do contêiner de cada seção, que é como a página foi desenhada.
   Só color e font-family: font-weight e line-height ficam de fora de propósito,
   porque .rdx__display e .rdx__h2 os definem em (0,1,0) e perderiam para este
   bloco. As regras que definem cor de título por seção (.rdx__termos h2,
   .rdx__form-ok h3) empatam em (0,1,1) e ganham por virem depois. */
.rdx h1, .rdx h2, .rdx h3, .rdx h4 { color: inherit; font-family: inherit; }

/* --------------------------------------------------------------------------
   Ritmo vertical
   Todas em (0,2,0) para passar por cima do reset acima.
   -------------------------------------------------------------------------- */
.rdx .rdx__olho { margin-bottom: var(--esp-olho); }

/* No hero a sobrelinha é seguida por um bloco preenchido (o selo), que pede
   mais ar do que uma linha de texto para não parecer colado. */
.rdx .rdx__hero .rdx__olho { margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem); }

/* Texto de abertura logo abaixo de um H2 */
.rdx .rdx__intro { margin-top: var(--esp-titulo); }

/* Blocos visuais: grids, listas e figuras que seguem um texto */
.rdx .rdx__duo,
.rdx .rdx__bloco-video,
.rdx .rdx__calc,
.rdx .rdx__modelos,
.rdx .rdx__passos,
.rdx .rdx__itens,
.rdx .rdx__depois,
.rdx .rdx__chips--secao { margin-top: var(--esp-bloco); }

.rdx .rdx__tabela-env { margin-top: var(--esp-bloco); }
.rdx .rdx__fonte { margin-top: var(--esp-titulo); }

.rdx :focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Tipografia base
   -------------------------------------------------------------------------- */
.rdx__display {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.rdx__h2 {
  font-size: clamp(1.85rem, 3.8vw, 3rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.rdx__h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.rdx__lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
}
.rdx__p { font-size: 1.0625rem; line-height: 1.68; }
.rdx__p + .rdx__p { margin-top: 1.1em; }
.rdx__prosa { max-width: 62ch; }

/* Sobrelinha: rótulo estrutural, sempre acompanhado de linha técnica */
.rdx__olho {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral-forte);
}
.rdx__olho::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .38;
  max-width: 8rem;
}
.rdx--escuro .rdx__olho { color: var(--coral-claro); }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
.rdx__wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.rdx__secao { padding-block: var(--secao); }
.rdx--escuro { background: var(--azul); color: var(--branco); }
.rdx--fundo { background: var(--cinza-claro); }
.rdx--escuro .rdx__p, .rdx--escuro .rdx__lead { color: var(--texto-escuro-2); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.rdx__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.0625rem 1.85rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.rdx__btn--principal { background: var(--coral-forte); color: var(--branco); border-color: var(--coral-forte); }
.rdx__btn--principal:hover { background: var(--coral-forte-hv); border-color: var(--coral-forte-hv); }

.rdx__btn--fantasma { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.4); }
.rdx__btn--fantasma:hover { border-color: var(--branco); background: rgba(255,255,255,.07); }

.rdx__btn--contorno { background: transparent; color: var(--azul); border-color: rgba(17,41,71,.28); }
.rdx__btn--contorno:hover { border-color: var(--azul); background: rgba(17,41,71,.05); }

.rdx__btn--bloco { width: 100%; padding-block: 1.15rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Faixa de campanha (topo, fixa)
   -------------------------------------------------------------------------- */
.rdx__faixa {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--azul-painel);
  border-bottom: 1px solid var(--linha-escura);
  color: var(--branco);
}
.rdx__faixa-int {
  max-width: var(--max);
  margin-inline: auto;
  padding: .6rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-size: .8125rem;
  text-align: center;
}
@media (min-width: 48rem) { .rdx__faixa-int { padding-block: .7rem; font-size: .875rem; } }

/* No celular a barra fixa inferior já carrega o CTA: a faixa fica só com o prazo. */
/* A versão longa do texto ocupa 796px somada ao contador e ao link. Ela só
   entra a partir de 64rem, largura em que isso cabe em uma linha só com folga.
   Abaixo disso vale a versão curta. */
.rdx .rdx__amplo { display: none; }
.rdx .rdx__estreito { display: inline; }
@media (min-width: 64rem) {
  .rdx .rdx__amplo { display: inline; }
  .rdx .rdx__contador-item.rdx__amplo { display: flex; }
  .rdx .rdx__estreito { display: none; }
}
@media (max-width: 47.99rem) { .rdx__faixa .rdx__faixa-link { display: none; } }
.rdx__faixa-txt { color: var(--texto-escuro-2); }
.rdx__faixa-txt b { color: var(--branco); font-weight: 700; }
.rdx__faixa-link {
  color: var(--coral-claro);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(224,145,123,.45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.rdx__faixa-link:hover { border-bottom-color: currentColor; }

/* Contador: leitura de instrumento, não cronômetro de varejo */
.rdx__contador { display: flex; align-items: baseline; gap: .4rem; }
.rdx__contador-item { display: flex; align-items: baseline; gap: .18rem; }
.rdx__contador-n {
  font-family: var(--ff-num);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}
.rdx__contador-u { font-size: .7rem; letter-spacing: .06em; color: var(--texto-escuro-3); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rdx__hero { background: var(--azul); color: var(--branco); overflow: hidden; }
.rdx__hero-grade {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3.25rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .rdx__hero-grade { grid-template-columns: 1.06fr .94fr; }
}

.rdx__hero-marcas {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-escuro-3);
}
.rdx__hero-marcas img { height: 19px; width: auto; opacity: .95; }
.rdx__hero-marcas span { display: block; }

/* Selo da oferta: bloco coral sobre o campo azul, com o número em azul marinho.
   Contraste do par 4,0:1, acima do mínimo de 3:1 exigido para texto grande. */
.rdx__oferta {
  display: flex;
  align-items: stretch;
  gap: 1.15rem;
  margin-bottom: 2rem;
}
.rdx__oferta-selo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: .55rem 1.1rem .7rem;
  background: var(--coral);
  border-radius: var(--r);
  color: var(--azul);
  font-weight: 900;
  font-size: clamp(2.9rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.rdx__oferta-selo span { font-size: .5em; letter-spacing: -.02em; margin-left: .04em; }

.rdx__oferta-txt { display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.rdx__oferta-txt b {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--branco);
}
.rdx__oferta-txt span {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-escuro-3);
  max-width: 22ch;
}

/* No hero o selo da oferta é a âncora visual, então o título entra menor
   que o display padrão para o CTA caber na primeira dobra. */
/* Abaixo de 62rem o hero é uma coluna só e o título tem a largura inteira,
   então escala mais rápido. A partir daí divide espaço com a foto do produto. */
.rdx__hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); margin-bottom: var(--esp-titulo); }
@media (min-width: 62rem) { .rdx__hero h1 { font-size: clamp(2.3rem, 4.1vw, 3.4rem); } }
.rdx .rdx__hero-sub { max-width: 44ch; margin-bottom: clamp(2rem, 3.4vw, 2.6rem); }
.rdx__hero-sub b { color: var(--branco); font-weight: 700; }

.rdx__hero-acoes { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2.75rem; }

/* Chips de dado: replicam a leitura de campo do equipamento.
   Empilhados no celular (separador horizontal), em linha a partir de 34rem. */
.rdx__chips { display: grid; border-top: 1px solid var(--linha-escura); }
.rdx__chip { padding: 1rem 0; }
.rdx__chip + .rdx__chip { border-top: 1px solid var(--linha-escura); }

@media (min-width: 34rem) {
  .rdx__chips { grid-template-columns: repeat(3, 1fr); }
  .rdx__chip { padding: 1.15rem 1.25rem 1.15rem 0; }
  .rdx__chip + .rdx__chip { border-top: 0; border-left: 1px solid var(--linha-escura); padding-left: 1.35rem; }
}
.rdx__chip-n {
  font-family: var(--ff-num);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--branco);
  line-height: 1.15;
}
.rdx__chip-r { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-escuro-3); margin-top: .3rem; }

/* Palco do produto: anéis de onda acústica (elemento "linha técnica") */
.rdx__palco { position: relative; display: grid; place-items: center; min-height: 20rem; }
.rdx__ondas { position: absolute; inset: 0; margin: auto; height: min(108%, 46rem); width: auto; aspect-ratio: 1; pointer-events: none; }
.rdx__ondas circle { fill: none; stroke: var(--coral); }
.rdx__produto { position: relative; width: min(100%, 27rem); filter: none; }

@media (prefers-reduced-motion: no-preference) {
  .rdx__ondas circle { animation: rdx-pulso 5.5s ease-out infinite; transform-origin: center; }
  .rdx__ondas circle:nth-child(2) { animation-delay: 1.1s; }
  .rdx__ondas circle:nth-child(3) { animation-delay: 2.2s; }
  .rdx__ondas circle:nth-child(4) { animation-delay: 3.3s; }
  @keyframes rdx-pulso {
    0%   { transform: scale(.42); opacity: 0; }
    18%  { opacity: .5; }
    100% { transform: scale(1); opacity: 0; }
  }
}

/* --------------------------------------------------------------------------
   Capturas reais (figuras com legenda de leitura)
   -------------------------------------------------------------------------- */
.rdx__figura { border: 1px solid var(--linha-escura); border-radius: var(--r); overflow: hidden; background: var(--azul-painel); }
.rdx--claro .rdx__figura, .rdx__figura--claro { border-color: var(--linha-clara); background: var(--branco); }
.rdx__figura img { width: 100%; }
.rdx__figura figcaption {
  padding: .95rem 1.15rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--texto-escuro-3);
  border-top: 1px solid var(--linha-escura);
}
.rdx__figura figcaption b { color: var(--texto-escuro-2); font-weight: 700; }
.rdx__figura--claro figcaption { color: var(--cinza-tec); border-top-color: var(--linha-clara); }
.rdx__figura--claro figcaption b { color: var(--azul); }

.rdx__duo { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .rdx__duo { grid-template-columns: 1fr 1fr; } }

.rdx__fonte { font-size: .8125rem; color: var(--texto-escuro-3); max-width: 62ch; }
.rdx__fonte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Calculadora · a assinatura da página
   A saída é desenhada como a tela do próprio instrumento.
   -------------------------------------------------------------------------- */
.rdx__calc { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 62rem) { .rdx__calc { grid-template-columns: .92fr 1.08fr; } }

.rdx__campos { display: grid; gap: 1.4rem; }
.rdx__campo { display: grid; gap: .5rem; }
.rdx__campo label { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cinza-tec); }
.rdx--escuro .rdx__campo label { color: var(--texto-escuro-3); }
.rdx__campo-dica { font-size: .8125rem; color: var(--cinza-tec); line-height: 1.45; }
.rdx--escuro .rdx__campo-dica { color: var(--texto-escuro-3); }

.rdx__input {
  width: 100%;
  padding: .9rem 1rem;
  font-family: var(--ff-num);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  transition: border-color .15s ease, background-color .15s ease;
  -moz-appearance: textfield;
}
.rdx__input::-webkit-outer-spin-button, .rdx__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rdx__input:hover { border-color: rgba(255,255,255,.3); }
.rdx__input:focus { border-color: var(--coral); background: rgba(255,255,255,.08); outline: none; }

.rdx__avancado { border-top: 1px solid var(--linha-escura); padding-top: 1.4rem; }
.rdx__avancado summary {
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--coral-claro);
  list-style: none;
}
.rdx__avancado summary::-webkit-details-marker { display: none; }
.rdx__avancado summary::before { content: "+ "; font-family: var(--ff-num); }
.rdx__avancado[open] summary::before { content: "− "; }
.rdx__avancado > *:not(summary) { margin-top: 1.4rem; }

/* Réplica da tela do instrumento, montada com a paleta da marca */
.rdx__tela {
  background: var(--azul-painel);
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  overflow: hidden;
}
.rdx__tela-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--linha-escura);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-escuro-3);
}
.rdx__tela-topo b { color: var(--coral-claro); font-weight: 700; letter-spacing: .13em; }

.rdx__tela-corpo { display: grid; grid-template-columns: 1fr auto; }

.rdx__leitura { padding: clamp(1.5rem, 3.2vw, 2.25rem); display: grid; gap: 1.6rem; align-content: start; }
.rdx__leitura-r { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-escuro-3); margin-bottom: .45rem; }
.rdx__leitura-v {
  font-family: var(--ff-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--branco);
}
.rdx__leitura--principal .rdx__leitura-v { font-size: clamp(2.35rem, 6vw, 3.6rem); color: var(--coral-claro); }
.rdx__leitura--principal .rdx__leitura-v small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-right: .18em; }
.rdx__leitura-sec { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; }
.rdx__leitura-sec .rdx__leitura-v { font-size: 1.4rem; }

/* Coluna de espectro: escala vertical à direita, como no visor */
.rdx__espectro { width: 4.75rem; border-left: 1px solid var(--linha-escura); display: grid; grid-template-columns: 1fr auto; }
.rdx__espectro-barras { position: relative; overflow: hidden; }
.rdx__espectro-barras span {
  position: absolute;
  left: 0;
  height: 2px;
  background: var(--coral);
  opacity: .8;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.rdx__espectro-escala {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .55rem .55rem .55rem .3rem;
  font-family: var(--ff-num);
  font-size: .58rem;
  color: var(--texto-escuro-3);
  text-align: right;
}
.rdx__espectro-escala i { font-style: normal; }

.rdx__tela-nota {
  padding: .95rem 1.15rem;
  border-top: 1px solid var(--linha-escura);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--texto-escuro-3);
}
.rdx__calc-cta { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Comparativo AI56 × AI56L
   -------------------------------------------------------------------------- */
.rdx__modelos { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .rdx__modelos { grid-template-columns: 1fr 1fr; } }

.rdx__modelo { border: 1px solid var(--linha-clara); border-radius: var(--r); padding: clamp(1.75rem, 3vw, 2.4rem); background: var(--branco); display: flex; flex-direction: column; }
.rdx__modelo--destaque { border-color: var(--coral); border-width: 2px; }
.rdx__modelo-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-forte);
  border: 1px solid rgba(205,107,80,.5);
  border-radius: var(--r);
  padding: .3rem .6rem;
  margin-bottom: 1.15rem;
}
.rdx__modelo-nome { font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.rdx .rdx__modelo-linha { font-size: 1.0625rem; font-weight: 700; color: var(--coral-forte); margin-top: .6rem; }
.rdx .rdx__modelo-txt { font-size: .9375rem; line-height: 1.62; color: var(--cinza-tec); margin-top: 1rem; }
.rdx .rdx__modelo-lista { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-clara); display: grid; gap: .7rem; }
.rdx__modelo-lista li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; font-size: .9375rem; line-height: 1.5; align-items: start; }
.rdx__modelo-lista svg { width: 1.1rem; height: 1.1rem; margin-top: .18rem; }
.rdx__sim { color: var(--coral-forte); }
.rdx__nao { color: rgba(74,85,104,.45); }
.rdx__modelo-lista li.rdx__off { color: rgba(74,85,104,.62); }

/* Grade de dados */
.rdx__tabela-env { overflow-x: auto; border: 1px solid var(--linha-clara); border-radius: var(--r); }
.rdx__tabela { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .9375rem; }
.rdx__tabela caption { text-align: left; padding: 1.1rem 1.25rem; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cinza-tec); border-bottom: 1px solid var(--linha-clara); }
.rdx__tabela th, .rdx__tabela td { padding: .85rem 1.25rem; text-align: left; vertical-align: middle; }
.rdx__tabela thead th { background: var(--azul); color: var(--branco); font-weight: 700; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; }
.rdx__tabela thead th:not(:first-child), .rdx__tabela tbody td:not(:first-child) { text-align: center; width: 22%; }
.rdx__tabela tbody tr:nth-child(even) { background: var(--cinza-claro); }
.rdx__tabela tbody th { font-weight: 500; color: var(--azul); }
.rdx__tabela td { font-family: var(--ff-num); font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--cinza-tec); }
.rdx__tabela svg { width: 1.05rem; height: 1.05rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Passos (sequência real de uso, por isso numerada)
   -------------------------------------------------------------------------- */
.rdx__passos { display: grid; gap: 0; border-top: 1px solid var(--linha-escura); }
@media (min-width: 52rem) { .rdx__passos { grid-template-columns: repeat(3, 1fr); } }
.rdx__passo { padding: 2rem 0; border-bottom: 1px solid var(--linha-escura); }
@media (min-width: 52rem) {
  .rdx__passo { padding: 2.25rem 2rem 2.5rem 0; border-bottom: 0; }
  .rdx__passo + .rdx__passo { border-left: 1px solid var(--linha-escura); padding-left: 2rem; }
}
.rdx__passo-n { font-family: var(--ff-num); font-size: .8125rem; font-weight: 700; color: var(--coral-claro); letter-spacing: .1em; margin-bottom: 1rem; }
.rdx__passo h3 { margin-bottom: .7rem; }
.rdx__passo p { font-size: .9375rem; line-height: 1.62; color: var(--texto-escuro-2); }

/* --------------------------------------------------------------------------
   Vídeo
   A capa é local e o player do YouTube só entra depois do clique: a página
   não faz requisição a terceiros antes de o usuário pedir.
   -------------------------------------------------------------------------- */
.rdx__video {
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--azul-painel);
}

.rdx__video-bt {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--azul-painel);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.rdx__video-bt img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.rdx__video-bt:hover img { opacity: .78; }

/* Mesmo raio de 4px do resto da página, para o botão pertencer ao sistema */
.rdx__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(3.5rem, 6.5vw, 4.75rem);
  height: clamp(3.5rem, 6.5vw, 4.75rem);
  display: grid;
  place-items: center;
  background: var(--coral-forte);
  border-radius: var(--r);
  color: var(--branco);
  transition: background-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.rdx__video-bt:hover .rdx__video-play { background: var(--coral-forte-hv); transform: scale(1.06); }
.rdx__video-play svg { width: 40%; height: 40%; margin-left: 7%; }

.rdx__video-rot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.6rem, 5.5vw, 2.75rem) 1.15rem clamp(.7rem, 2vw, 1rem);
  text-align: left;
  background: linear-gradient(to top, rgba(10, 23, 41, .93), rgba(10, 23, 41, 0));
  color: var(--branco);
  font-weight: 700;
  font-size: clamp(.8125rem, 1.5vw, .9375rem);
  line-height: 1.3;
}

.rdx__video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .rdx__video-bt:hover .rdx__video-play { transform: none; }
}

/* --------------------------------------------------------------------------
   Garantias / o que acompanha
   -------------------------------------------------------------------------- */
.rdx__itens { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .rdx__itens { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .rdx__itens { grid-template-columns: repeat(4, 1fr); } }
.rdx__item { border-left: 2px solid var(--coral); padding: .2rem 0 .2rem 1.15rem; }
.rdx__item h3 { font-size: 1rem; font-weight: 700; margin-bottom: .45rem; }
.rdx__item p { font-size: .9rem; line-height: 1.6; color: var(--cinza-tec); }
.rdx--escuro .rdx__item p { color: var(--texto-escuro-2); }

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */
.rdx__form-secao { background: var(--azul); color: var(--branco); }
.rdx__form-grade { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) { .rdx__form-grade { grid-template-columns: .82fr 1.18fr; } }

.rdx__form {
  background: var(--azul-painel);
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.rdx__form-campos { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .rdx__form-campos { grid-template-columns: 1fr 1fr; } .rdx__form-campo--full { grid-column: 1 / -1; } }

.rdx__form-campo { display: grid; gap: .45rem; }
.rdx__form-campo label { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-escuro-3); }
.rdx__form-campo label span { color: var(--coral-claro); }

.rdx__form-input, .rdx__form-select, .rdx__form-textarea {
  width: 100%;
  padding: .9rem 1rem;
  font-family: var(--ff);
  font-size: 1rem;
  color: var(--branco);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  transition: border-color .15s ease, background-color .15s ease;
}
.rdx__form-input::placeholder, .rdx__form-textarea::placeholder { color: rgba(255,255,255,.32); }
.rdx__form-input:hover, .rdx__form-select:hover, .rdx__form-textarea:hover { border-color: rgba(255,255,255,.3); }
.rdx__form-input:focus, .rdx__form-select:focus, .rdx__form-textarea:focus { border-color: var(--coral); background: rgba(255,255,255,.08); outline: none; }
.rdx__form-textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }

.rdx__form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23E0917B' stroke-width='1.75'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .72rem;
  padding-right: 2.5rem;
}
.rdx__form-select option { background: var(--azul-painel); color: var(--branco); }

.rdx__consent { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; margin-top: 1.5rem; }
.rdx__consent input { width: 1.4rem; height: 1.4rem; margin-top: .05rem; accent-color: var(--coral-forte); flex-shrink: 0; cursor: pointer; }
.rdx__consent label { cursor: pointer; }
.rdx__consent label { font-size: .8125rem; line-height: 1.55; color: var(--texto-escuro-3); }
.rdx__consent a { color: var(--coral-claro); text-decoration: underline; text-underline-offset: 2px; }

.rdx__form-envio { margin-top: 1.75rem; }
.rdx .rdx__form-rodape { margin-top: 1.15rem; font-size: .78rem; line-height: 1.55; color: var(--texto-escuro-3); text-align: center; }

.rdx .rdx__form-erro { margin-top: 1rem; font-size: .875rem; color: var(--coral-claro); font-weight: 700; }
.rdx__form-ok {
  border: 1px solid var(--coral);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.rdx__form-ok h3 { color: var(--coral-claro); margin-bottom: .5rem; }
.rdx__form-ok p { font-size: .9375rem; line-height: 1.6; color: var(--texto-escuro-2); }
[hidden] { display: none !important; }

/* Lista lateral do formulário */
.rdx__depois { display: grid; gap: 1.4rem; }
.rdx__depois li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.rdx__depois-n {
  font-family: var(--ff-num);
  font-size: .78rem;
  font-weight: 700;
  color: var(--coral-claro);
  border: 1px solid rgba(224,145,123,.4);
  border-radius: var(--r);
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
}
.rdx__depois p { font-size: .9375rem; line-height: 1.6; color: var(--texto-escuro-2); padding-top: .18rem; }
.rdx__depois b { color: var(--branco); font-weight: 700; }

/* --------------------------------------------------------------------------
   Termos da campanha
   -------------------------------------------------------------------------- */
.rdx__termos { border-top: 1px solid var(--linha-escura); }
.rdx__termos-int { padding-block: 2.5rem 3rem; }
.rdx__termos h2 { font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--texto-escuro-3); margin-bottom: 1.15rem; }
.rdx__termos ul { display: grid; gap: .6rem; max-width: 78ch; }
.rdx__termos li { font-size: .8125rem; line-height: 1.58; color: var(--texto-escuro-3); padding-left: 1rem; position: relative; }
.rdx__termos li::before { content: ""; position: absolute; left: 0; top: .62em; width: .35rem; height: 1px; background: var(--coral); }

/* --------------------------------------------------------------------------
   Barra fixa de ação (telas pequenas)
   -------------------------------------------------------------------------- */
.rdx__barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--azul-painel);
  border-top: 1px solid var(--linha-escura);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.rdx__barra.rdx--visivel { transform: translateY(0); }
.rdx__barra-txt { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.35; color: var(--texto-escuro-3); }
.rdx__barra-txt b { display: block; color: var(--branco); font-weight: 700; font-size: .9375rem; }
.rdx__barra .rdx__btn { padding: .8rem 1.35rem; font-size: .9375rem; white-space: nowrap; }
@media (min-width: 62rem) { .rdx__barra { display: none; } }

/* Em telas muito estreitas as duas barras fixas roubam altura demais.
   O prazo já está na faixa do topo, então some daqui. */
@media (max-width: 23.5rem) {
  .rdx__barra { gap: .75rem; padding-inline: 1rem; }
  .rdx__barra-txt span { display: none; }
  .rdx__barra .rdx__btn { padding-inline: 1rem; font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   Revelação no scroll
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rdx__reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
  .rdx__reveal.rdx--dentro { opacity: 1; transform: none; }
}

.rdx__pular {
  position: absolute;
  left: -9999px;
}
.rdx__pular:focus {
  left: var(--gut);
  top: .5rem;
  z-index: 60;
  background: var(--coral);
  color: var(--branco);
  padding: .6rem 1rem;
  border-radius: var(--r);
  font-weight: 700;
}

/* ==========================================================================
   Compatibilidade com o Contact Form 7
   --------------------------------------------------------------------------
   O formulário desta página é renderizado pelo CF7, que envolve cada campo
   num <span class="wpcf7-form-control-wrap"> que não existia no markup de
   homologação. As regras abaixo devolvem o layout ao desenho original.
   Lembrete do reset lá em cima: qualquer margem aplicada por classe única a
   <p>, <ul>, <ol> ou <figure> precisa do prefixo `.rdx ` para vencê-lo.
   ========================================================================== */
.rdx .wpcf7 { margin: 0; }
.rdx .wpcf7-form-control-wrap { display: block; }

.rdx .wpcf7-not-valid-tip {
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--coral-claro);
}
.rdx .rdx__form-input[aria-invalid="true"],
.rdx .rdx__form-select[aria-invalid="true"],
.rdx .rdx__form-textarea[aria-invalid="true"] { border-color: var(--coral); }

/* Consentimento LGPD: o CF7 gera label > input + span, então a grade de duas
   colunas sai do contêiner e vai para o <label>. */
.rdx__consent { display: block; }
.rdx__consent .wpcf7-list-item { margin: 0; }
.rdx__consent .wpcf7-acceptance label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.rdx__consent .wpcf7-list-item-label { font-size: .8125rem; line-height: 1.55; color: var(--texto-escuro-3); }

/* Mensagens de resposta do CF7 (erro de validação, falha de envio, spam). */
.rdx .wpcf7-response-output {
  margin: 1.15rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid var(--linha-escura);
  border-radius: var(--r);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--branco);
}
.rdx form.invalid .wpcf7-response-output,
.rdx form.unaccepted .wpcf7-response-output,
.rdx form.failed .wpcf7-response-output,
.rdx form.spam .wpcf7-response-output { border-color: var(--coral); color: var(--coral-claro); }

.rdx .wpcf7-spinner { margin: .75rem auto 0; display: block; }

/* Aviso de atribuição do reCAPTCHA, injetado por rd_recaptcha_aviso(). */
.rdx .rdx__form .rd-recaptcha-aviso { margin-top: 1.15rem; color: var(--texto-escuro-3); opacity: 1; }
.rdx .rdx__form .rd-recaptcha-aviso a { color: var(--coral-claro); }

/* ==========================================================================
   Botão flutuante do WhatsApp do tema
   --------------------------------------------------------------------------
   Ele é fixo em bottom: 22px / z-index: 99 (assets/css/main.css) e a barra
   fixa desta campanha é bottom: 0 / z-index: 45 — abaixo de 62rem, onde a
   barra aparece, o botão ficaria por cima dela. O botão sobe só enquanto a
   barra está visível, acompanhando a mesma curva de animação.
   Estas são as únicas regras do arquivo fora do escopo .rdx, e o arquivo só é
   enfileirado nesta página (ver o gate em functions.php).
   ========================================================================== */
@media (max-width: 61.99rem) {
  .rd-whatsapp-flutuante { transition: transform .15s ease, bottom .28s cubic-bezier(.22,1,.36,1); }
  body:has(#barra.rdx--visivel) .rd-whatsapp-flutuante { bottom: 96px; }
}