/* =============================================================
   ROLESPINHO — blocks.css
   CSS específico do sistema de blocos de conteúdo (Builder).
   Ordem das secções:
   1. Secções (rp-section)
   2. Blocos base (rp-blocks, rp-block-*)
   3. Tabelas dentro de blocos
   4. Bloco Colunas (rp-columns)
   5. Bloco Texto / TinyMCE (rp-block-text)
   6. CER — pesquisa de rolamentos (cerx)
   7. Tabulator (block-tabulator)
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. SECÇÕES (rp-section)
   ───────────────────────────────────────────────────────────── */

.rp-section.is-contained .rp-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.rp-section.is-full .rp-section__inner {
  width: 100%;
  padding: 0 16px;
}

.rp-section__grid {
  display: grid;
  align-items: start;
}

.rp-section.cols-1 .rp-section__grid { grid-template-columns: 1fr; }
.rp-section.cols-2 .rp-section__grid { grid-template-columns: 1fr 1fr; }
.rp-section.cols-3 .rp-section__grid { grid-template-columns: 1fr 1fr 1fr; }

.rp-section.gap-sm .rp-section__grid { gap: 12px; }
.rp-section.gap-md .rp-section__grid { gap: 24px; }
.rp-section.gap-lg .rp-section__grid { gap: 40px; }

/* Colunas nunca esticam o layout (CSS Grid) */
.rp-section__col { min-width: 0; }
.rp-section__col .table-scroll,
.rp-section__col .rp-table-scroll { max-width: 100%; }

@media (max-width: 900px) {
  .rp-section.cols-2 .rp-section__grid,
  .rp-section.cols-3 .rp-section__grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   2. BLOCOS BASE (rp-blocks, rp-block-*)
   ───────────────────────────────────────────────────────────── */

/* Espaçamento padrão entre blocos */
.rp-blocks > * + * { margin-top: 18px; }

.rp-block-title { margin: 0; }
.rp-block-text  { margin: 0; }

/* Imagens */
.rp-block-image { margin: 0; }
.rp-block-image img { display: block; max-width: 100%; height: auto; }

.rp-block-image--left   { text-align: left; }
.rp-block-image--center { text-align: center; }
.rp-block-image--right  { text-align: right; }

.rp-block-image--left   img { margin-left: 0; margin-right: auto; }
.rp-block-image--center img { margin-left: auto; margin-right: auto; }
.rp-block-image--right  img { margin-left: auto; margin-right: 0; }


/* ─────────────────────────────────────────────────────────────
   3. TABELAS DENTRO DE BLOCOS
   ───────────────────────────────────────────────────────────── */

/* Wrappers de scroll */
.rp-table-scroll,
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.rp-table-scroll > table,
.table-scroll > table { border-collapse: collapse; }

/* Tabelas rp-table dentro de scroll: largura natural */
.rp-table-scroll table.rp-table,
.table-scroll table.rp-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

/* Mobile: activar scroll horizontal */
@media (max-width: 1023px) {
  .rp-table-scroll,
  .table-scroll,
  .rp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* rp-block-table */
.rp-block-table {
  display: inline-block;
  max-width: 100%;
  overflow-x: visible;
}

.rp-block-table table { border-collapse: collapse; }

.rp-block-table td,
.rp-block-table th { vertical-align: middle; }

/* Variante compacta */
.block-variant-compact .rp-table th,
.block-variant-compact .rp-table td { padding: 6px 8px; }

/* rp-table dentro de bloco — nowrap por defeito */
.rp-table th, .rp-table td { white-space: nowrap; }

@media (max-width: 600px) {
  .rp-table th, .rp-table td { font-size: 14px; }
}

/* Tabelas tablesgenerator — não forçar largura */
.rp-block-table table.tg { width: auto; }


/* ─────────────────────────────────────────────────────────────
   4. BLOCO COLUNAS (rp-columns)
   ───────────────────────────────────────────────────────────── */

.rp-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: stretch;
}

.rp-columns__col {
  flex: 0 0 calc(var(--col-width) - 16px);
  min-width: 0;
}

.rp-columns__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .rp-columns { flex-direction: column; }
  .rp-columns__col { flex: 0 0 100%; width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   5. BLOCO TEXTO / TINYMCE (rp-block-text)
   ───────────────────────────────────────────────────────────── */

/* Scroll horizontal em mobile */
.rp-block-text { overflow-x: visible; }
@media (max-width: 1023px) { .rp-block-text { overflow-x: auto; } }

/* Tabelas criadas pelo TinyMCE */
.rp-block-text table {
  border-collapse: collapse;
  table-layout: auto;
  margin: 12px 0;
}

.rp-block-text table td,
.rp-block-text table th {
  padding: 8px 10px;
  vertical-align: middle;
  border: 1px solid #e5e7eb;
  word-break: normal;
  line-height: 1.4;
}

.rp-block-text table th { font-weight: 600; }

.rp-block-text table.no-border td,
.rp-block-text table.no-border th { border: none !important; }

/* Eliminar margens de elementos injectados pelo TinyMCE dentro de células */
.rp-block-text table td > div,
.rp-block-text table td > p,
.rp-block-text table th > div,
.rp-block-text table th > p { margin: 0; padding: 0; }

/* Listas dentro de células */
.rp-block-text table td ul,
.rp-block-text table td ol,
.rp-block-text table th ul,
.rp-block-text table th ol { list-style: none; margin: 0; padding: 0; }

.rp-block-text table td li,
.rp-block-text table th li { margin: 0; padding: 0; }

/* Código dentro de células */
.rp-block-text table td code,
.rp-block-text table th code { font-family: inherit; font-size: inherit; background: none; padding: 0; }

/* Esconder títulos vazios gerados pelo TinyMCE */
.rp-block-text h2:empty,
.rp-block-text h3:empty { display: none; }
.rp-block-text h2:has(> br:only-child),
.rp-block-text h3:has(> br:only-child) { display: none; }


/* ─────────────────────────────────────────────────────────────
   6. CER — PESQUISA DE ROLAMENTOS (cerx)
   ───────────────────────────────────────────────────────────── */

.cerx { padding: 18px 0; }
.cerx * { box-sizing: border-box; }

.cerx h1 { font-size: 30px; font-weight: 700; margin: 0 0 18px; }
.cerx label { font-size: 14px; font-weight: 500; display: block; margin: 0 0 6px; }

.cerx input, .cerx select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.cerx .cer-card { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px; background: #fff; }

.cerx .btn-primary {
  background: #112A8E;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.cerx .btn-primary:hover { background: #0e2475; }

.cerx .btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #111827;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.cerx .btn-clear:hover { background: #d1d5db; }

.cerx .cer-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 767px) { .cerx .cer-grid-6 { grid-template-columns: 1fr 1fr; } }

/* Cabeçalho da tabela azul */
.cerx .cer-table-head th { background: #112A8E; color: #fff; border-bottom: 1px solid rgba(255,255,255,.22) !important; }
.cerx .cer-table-head th:first-child { border-top-left-radius: 12px; }
.cerx .cer-table-head th:last-child  { border-top-right-radius: 12px; }


/* ─────────────────────────────────────────────────────────────
   7. TABULATOR (block-tabulator)
   ───────────────────────────────────────────────────────────── */

.block-tabulator .rp-table td,
.block-tabulator .rp-table th {
  height: var(--rp-row-height, auto);
  line-height: var(--rp-row-height, normal);
  vertical-align: middle;
}


/* ─────────────────────────────────────────────────────────────
   8. HERO PRODUTO (rp-hero-produto)
   ───────────────────────────────────────────────────────────── */

.rp-hero-produto {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}

.rp-hero-produto--brand { background: none; }
.rp-hero-produto--dark  { background: #0f1f6e; color: #fff; padding: 40px 24px; border-radius: 12px; }
.rp-hero-produto--light { background: #f3f4f6; padding: 40px 24px; border-radius: 12px; }

.rp-hero-produto__content { flex: 1; min-width: 0; }

.rp-hero-produto__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #112A8E;
  margin: 0 0 8px;
}
.rp-hero-produto--dark .rp-hero-produto__eyebrow { color: #93c5fd; }

.rp-hero-produto__title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #112A8E;
}
.rp-hero-produto--dark .rp-hero-produto__title { color: #fff; }

.rp-hero-produto__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 24px;
  max-width: 560px;
}
.rp-hero-produto--dark .rp-hero-produto__subtitle { color: #d1d5db; }

.rp-hero-produto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.rp-hero-produto__image {
  flex: 0 0 380px;
  max-width: 380px;
}
.rp-hero-produto__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .rp-hero-produto { flex-direction: column; }
  .rp-hero-produto__image { flex: 0 0 100%; max-width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   9. INTRO TÉCNICA (rp-intro-tecnica)
   ───────────────────────────────────────────────────────────── */

.rp-intro-tecnica {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 24px 0;
}

.rp-intro-tecnica--img-right  { flex-direction: row; }
.rp-intro-tecnica--img-left   { flex-direction: row-reverse; }

.rp-intro-tecnica__text { flex: 1; min-width: 0; }

.rp-intro-tecnica__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 16px;
}

.rp-intro-tecnica__image {
  flex: 0 0 340px;
  max-width: 340px;
}
.rp-intro-tecnica__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .rp-intro-tecnica,
  .rp-intro-tecnica--img-left { flex-direction: column; }
  .rp-intro-tecnica__image { flex: 0 0 100%; max-width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   10. DESTAQUES (rp-destaques)
   ───────────────────────────────────────────────────────────── */

.rp-destaques { padding: 24px 0; }

.rp-destaques__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 8px;
}

.rp-destaques__intro {
  color: #374151;
  margin: 0 0 24px;
}

.rp-destaques__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.rp-destaques__item {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
}

.rp-destaques__icon {
  margin-bottom: 10px;
  color: #112A8E;
}
.rp-destaques__icon .rp-icon { width: 28px; height: 28px; }

.rp-destaques__item-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.rp-destaques__item-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   11. VARIANTES (rp-variantes)
   ───────────────────────────────────────────────────────────── */

.rp-variantes { padding: 24px 0; }

.rp-variantes__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 8px;
}

.rp-variantes__intro {
  color: #374151;
  margin: 0 0 24px;
}

.rp-variantes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.rp-variantes__card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
}

.rp-variantes__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #112A8E;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rp-variantes__card-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.rp-variantes__card-body {
  padding: 16px;
  flex: 1;
}

.rp-variantes__card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.rp-variantes__card-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.rp-variantes__card-action {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
}


/* ─────────────────────────────────────────────────────────────
   12. DOWNLOADS (rp-downloads)
   ───────────────────────────────────────────────────────────── */

.rp-downloads { padding: 24px 0; }

.rp-downloads__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 8px;
}

.rp-downloads__intro {
  color: #374151;
  margin: 0 0 20px;
}

.rp-downloads__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-downloads__item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.rp-downloads__item--highlight {
  border-color: #112A8E;
}

.rp-downloads__link {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 12px 16px;
  text-decoration: none;
  color: #111827;
  transition: background .15s;
}
.rp-downloads__link:hover { background: #f8fafc; }

.rp-downloads__icon {
  font-size: 18px;
  color: #112A8E;
  flex-shrink: 0;
}

.rp-downloads__label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.rp-downloads__type {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: capitalize;
}


/* ─────────────────────────────────────────────────────────────
   13. CTA FINAL (rp-cta-final)
   ───────────────────────────────────────────────────────────── */

.rp-cta-final {
  padding: 40px 32px;
  border-radius: 12px;
  text-align: center;
  margin: 24px 0;
}

.rp-cta-final--brand { background: #112A8E; color: #fff; }
.rp-cta-final--dark  { background: #0f1f6e; color: #fff; }
.rp-cta-final--light { background: #f3f4f6; color: #111827; }

.rp-cta-final__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
  color: inherit;
}

.rp-cta-final__text {
  font-size: 15px;
  margin: 0 0 24px;
  opacity: .9;
}

.rp-cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
   14. BOTÕES GLOBAIS (rp-btn)
   ───────────────────────────────────────────────────────────── */

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  border: 2px solid transparent;
}

.rp-btn--primary {
  background: #112A8E;
  color: #fff;
  border-color: #112A8E;
}
.rp-btn--primary:hover { background: #0e2475; border-color: #0e2475; }

.rp-btn--secondary {
  background: transparent;
  color: #112A8E;
  border-color: #112A8E;
}
.rp-btn--secondary:hover { background: #112A8E; color: #fff; }

.rp-btn--outline {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}
.rp-btn--outline:hover { border-color: #112A8E; color: #112A8E; }

.rp-cta-final--brand .rp-btn--secondary,
.rp-cta-final--dark .rp-btn--secondary {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.rp-cta-final--brand .rp-btn--secondary:hover,
.rp-cta-final--dark .rp-btn--secondary:hover {
  background: rgba(255,255,255,.15);
}

/* Botão primário dentro de CTA brand/dark — contraste invertido */
.rp-cta-final--brand .rp-btn--primary,
.rp-cta-final--dark .rp-btn--primary {
  background: #fff;
  color: #112A8E;
  border-color: #fff;
}
.rp-cta-final--brand .rp-btn--primary:hover,
.rp-cta-final--dark .rp-btn--primary:hover {
  background: #e8edf8;
  border-color: #e8edf8;
}

/* ─────────────────────────────────────────────────────────────
   15. LISTAS COM MARCADORES PERSONALIZADOS
   ───────────────────────────────────────────────────────────── */

.rp-block-text ul.list-bullet,
.rp-block-text ol.list-bullet { list-style: disc; padding-left: 1.5em; }

.rp-block-text ul.list-square,
.rp-block-text ol.list-square { list-style: square; padding-left: 1.5em; }

.rp-block-text ul.list-arrow li,
.rp-block-text ol.list-arrow li { list-style: none; padding-left: 1.4em; position: relative; }
.rp-block-text ul.list-arrow li::before,
.rp-block-text ol.list-arrow li::before { content: '›'; position: absolute; left: 0; color: #112A8E; font-weight: 700; font-size: 1.1em; }

.rp-block-text ul.list-check li,
.rp-block-text ol.list-check li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-check li::before,
.rp-block-text ol.list-check li::before { content: '✓'; position: absolute; left: 0; color: #112A8E; font-weight: 700; }

.rp-block-text ul.list-dash li,
.rp-block-text ol.list-dash li { list-style: none; padding-left: 1.4em; position: relative; }
.rp-block-text ul.list-dash li::before,
.rp-block-text ol.list-dash li::before { content: '—'; position: absolute; left: 0; color: #6b7280; }

.rp-block-text ul.list-icon-bolt li,
.rp-block-text ol.list-icon-bolt li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-icon-bolt li::before,
.rp-block-text ol.list-icon-bolt li::before { content: '⚡'; position: absolute; left: 0; }

.rp-block-text ul.list-icon-cog li,
.rp-block-text ol.list-icon-cog li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-icon-cog li::before,
.rp-block-text ol.list-icon-cog li::before { content: '⚙️'; position: absolute; left: 0; }

.rp-block-text ul.list-icon-shield li,
.rp-block-text ol.list-icon-shield li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-icon-shield li::before,
.rp-block-text ol.list-icon-shield li::before { content: '🛡️'; position: absolute; left: 0; }

.rp-block-text ul.list-icon-check-circle li,
.rp-block-text ol.list-icon-check-circle li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-icon-check-circle li::before,
.rp-block-text ol.list-icon-check-circle li::before { content: '✅'; position: absolute; left: 0; }

.rp-block-text ul.list-icon-cube li,
.rp-block-text ol.list-icon-cube li { list-style: none; padding-left: 1.6em; position: relative; }
.rp-block-text ul.list-icon-cube li::before,
.rp-block-text ol.list-icon-cube li::before { content: '📦'; position: absolute; left: 0; }

/* Marcadores em parágrafos individuais */
.rp-block-text p.list-arrow  { padding-left: 1.4em; position: relative; }
.rp-block-text p.list-arrow::before  { content: '›';  position: absolute; left: 0; color: #112A8E; font-weight: 700; font-size: 1.1em; }

.rp-block-text p.list-check  { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-check::before  { content: '✓';  position: absolute; left: 0; color: #112A8E; font-weight: 700; }

.rp-block-text p.list-dash   { padding-left: 1.4em; position: relative; }
.rp-block-text p.list-dash::before   { content: '—';  position: absolute; left: 0; color: #6b7280; }

.rp-block-text p.list-icon-bolt         { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-icon-bolt::before         { content: '⚡'; position: absolute; left: 0; }

.rp-block-text p.list-icon-cog          { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-icon-cog::before          { content: '⚙️'; position: absolute; left: 0; }

.rp-block-text p.list-icon-shield       { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-icon-shield::before       { content: '🛡️'; position: absolute; left: 0; }

.rp-block-text p.list-icon-check-circle { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-icon-check-circle::before { content: '✅'; position: absolute; left: 0; }

.rp-block-text p.list-icon-cube         { padding-left: 1.6em; position: relative; }
.rp-block-text p.list-icon-cube::before         { content: '📦'; position: absolute; left: 0; }

/* Marcadores — sem prefixo para funcionar dentro do editor TinyMCE */
p.list-arrow  { padding-left: 1.4em; position: relative; }
p.list-arrow::before  { content: '›';  position: absolute; left: 0; color: #112A8E; font-weight: 700; font-size: 1.1em; }

p.list-check  { padding-left: 1.6em; position: relative; }
p.list-check::before  { content: '✓';  position: absolute; left: 0; color: #112A8E; font-weight: 700; }

p.list-dash   { padding-left: 1.4em; position: relative; }
p.list-dash::before   { content: '—';  position: absolute; left: 0; color: #6b7280; }

p.list-icon-bolt { padding-left: 1.6em; position: relative; }
p.list-icon-bolt::before { content: '⚡'; position: absolute; left: 0; }

p.list-icon-cog { padding-left: 1.6em; position: relative; }
p.list-icon-cog::before { content: '⚙️'; position: absolute; left: 0; }

p.list-icon-shield { padding-left: 1.6em; position: relative; }
p.list-icon-shield::before { content: '🛡️'; position: absolute; left: 0; }

p.list-icon-check-circle { padding-left: 1.6em; position: relative; }
p.list-icon-check-circle::before { content: '✅'; position: absolute; left: 0; }

p.list-icon-cube { padding-left: 1.6em; position: relative; }
p.list-icon-cube::before { content: '📦'; position: absolute; left: 0; }

ul.list-arrow li, ol.list-arrow li { list-style: none; padding-left: 1.4em; position: relative; }
ul.list-arrow li::before, ol.list-arrow li::before { content: '›'; position: absolute; left: 0; color: #112A8E; font-weight: 700; font-size: 1.1em; }

ul.list-check li, ol.list-check li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-check li::before, ol.list-check li::before { content: '✓'; position: absolute; left: 0; color: #112A8E; font-weight: 700; }

ul.list-dash li, ol.list-dash li { list-style: none; padding-left: 1.4em; position: relative; }
ul.list-dash li::before, ol.list-dash li::before { content: '—'; position: absolute; left: 0; color: #6b7280; }

ul.list-icon-bolt li, ol.list-icon-bolt li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-icon-bolt li::before, ol.list-icon-bolt li::before { content: '⚡'; position: absolute; left: 0; }

ul.list-icon-cog li, ol.list-icon-cog li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-icon-cog li::before, ol.list-icon-cog li::before { content: '⚙️'; position: absolute; left: 0; }

ul.list-icon-shield li, ol.list-icon-shield li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-icon-shield li::before, ol.list-icon-shield li::before { content: '🛡️'; position: absolute; left: 0; }

ul.list-icon-check-circle li, ol.list-icon-check-circle li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-icon-check-circle li::before, ol.list-icon-check-circle li::before { content: '✅'; position: absolute; left: 0; }

ul.list-icon-cube li, ol.list-icon-cube li { list-style: none; padding-left: 1.6em; position: relative; }
ul.list-icon-cube li::before, ol.list-icon-cube li::before { content: '📦'; position: absolute; left: 0; }

/* ─────────────────────────────────────────────────────────────
   16. TABELA DE COMPARAÇÃO (rp-comparacao)
   ───────────────────────────────────────────────────────────── */

.rp-comparacao { padding: 24px 0; }

.rp-comparacao__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 16px;
}

.rp-comparacao__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.rp-comparacao__th {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.rp-comparacao__th--criteria {
  text-align: left;
  background: #f8fafc;
}

.rp-comparacao__th--normal {
  background: #f3f4f6;
  color: #374151;
}

.rp-comparacao__th--highlight {
  background: #112A8E;
  color: #fff;
}

.rp-comparacao__th--muted {
  background: #e5e7eb;
  color: #6b7280;
}

.rp-comparacao__tr:nth-child(even) { background: #f8fafc; }
.rp-comparacao__tr:hover { background: #f0f4ff; }

.rp-comparacao__td {
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  text-align: center;
  vertical-align: middle;
}

.rp-comparacao__td--criteria {
  text-align: left;
  font-weight: 500;
  color: #374151;
  background: #fff;
}

.rp-comparacao__td--positive { color: #15803d; }
.rp-comparacao__td--negative { color: #dc2626; }
.rp-comparacao__td--neutral  { color: #9ca3af; }

.rp-comparacao__icon {
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  margin-right: 4px;
}

.rp-comparacao__icon--neutral { font-weight: 400; }

.rp-comparacao__cell-text {
  font-size: 13px;
  display: inline-block;
}

/* Estilos de cabeçalho adicionais — tabela de comparação */
.rp-comparacao__th--blue-light { background: #dbeafe; color: #1e40af; }
.rp-comparacao__th--green      { background: #15803d; color: #fff; }
.rp-comparacao__th--red        { background: #dc2626; color: #fff; }
.rp-comparacao__th--orange     { background: #ea580c; color: #fff; }
.rp-comparacao__th--yellow     { background: #ca8a04; color: #fff; }
.rp-comparacao__th--dark       { background: #111827; color: #fff; }
.rp-comparacao__th--white      { background: #fff;    color: #111827; border-bottom: 2px solid #e5e7eb; }

/* ─────────────────────────────────────────────────────────────
   17. TABELA SIMPLES (rp-tabela-simples)
   ───────────────────────────────────────────────────────────── */

.rp-tabela-simples { padding: 24px 0; }

.rp-tabela-simples__title {
  font-size: 22px;
  font-weight: 700;
  color: #112A8E;
  margin: 0 0 16px;
}

.rp-tabela-simples__table {
  border-collapse: collapse;
  table-layout: auto;
}

.rp-tabela-simples__th {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.rp-tabela-simples__tr:nth-child(even) { background: #f8fafc; }
.rp-tabela-simples__tr:hover { background: #f0f4ff; }
.rp-tabela-simples__tr--header { background: #f3f4f6 !important; }

.rp-tabela-simples__th-row {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #374151;
}

.rp-tabela-simples__td {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  color: #374151;
  vertical-align: middle;
}

.rp-ts__icon { margin-right: 6px; }

/* Cores de fundo das células */
.rp-ts-bg-blue    { background: #112A8E !important; color: #fff !important; }
.rp-ts-bg-blue-lt { background: #dbeafe !important; color: #1e40af !important; }
.rp-ts-bg-green   { background: #dcfce7 !important; color: #15803d !important; }
.rp-ts-bg-red     { background: #fee2e2 !important; color: #dc2626 !important; }
.rp-ts-bg-orange  { background: #ffedd5 !important; color: #ea580c !important; }
.rp-ts-bg-yellow  { background: #fef9c3 !important; color: #ca8a04 !important; }
.rp-ts-bg-gray    { background: #f3f4f6 !important; color: #374151 !important; }
.rp-ts-bg-dark    { background: #111827 !important; color: #fff !important; }

/* ─────────────────────────────────────────────────────────────
   18. PALETA GENÉRICA (rp-bg-*)
   Aplicável a qualquer bloco: columns, destaques, variantes,
   intro_tecnica, downloads, cta_final, tabela_simples
   ───────────────────────────────────────────────────────────── */

/* Base comum */
[class*="rp-bg-"] { border-radius: 8px; padding: 20px; }

/* ── AZUL MARCA ── */
.rp-bg-brand       { background: #112A8E; color: #fff; }
.rp-bg-brand-mid   { background: #3d5fc4; color: #fff; }
.rp-bg-brand-light { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }

/* ── VERDE ── */
.rp-bg-green       { background: #15803d; color: #fff; }
.rp-bg-green-mid   { background: #86efac; color: #14532d; }
.rp-bg-green-light { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }

/* ── VERMELHO ── */
.rp-bg-red         { background: #dc2626; color: #fff; }
.rp-bg-red-mid     { background: #fca5a5; color: #7f1d1d; }
.rp-bg-red-light   { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

/* ── LARANJA ── */
.rp-bg-orange       { background: #ea580c; color: #fff; }
.rp-bg-orange-mid   { background: #fdba74; color: #7c2d12; }
.rp-bg-orange-light { background: #ffedd5; color: #7c2d12; border: 1px solid #fdba74; }

/* ── AMARELO ── */
.rp-bg-yellow       { background: #ca8a04; color: #fff; }
.rp-bg-yellow-mid   { background: #fde047; color: #713f12; }
.rp-bg-yellow-light { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }

/* ── ROXO ── */
.rp-bg-purple       { background: #7c3aed; color: #fff; }
.rp-bg-purple-mid   { background: #c4b5fd; color: #3b0764; }
.rp-bg-purple-light { background: #ede9fe; color: #3b0764; border: 1px solid #c4b5fd; }

/* ── CINZA ── */
.rp-bg-gray         { background: #4b5563; color: #fff; }
.rp-bg-gray-mid     { background: #d1d5db; color: #111827; }
.rp-bg-gray-light   { background: #f3f4f6; color: #111827; border: 1px solid #d1d5db; }

/* ── PRETO ── */
.rp-bg-dark         { background: #111827; color: #fff; }
.rp-bg-dark-mid     { background: #374151; color: #fff; }
.rp-bg-dark-light   { background: #e5e7eb; color: #111827; border: 1px solid #9ca3af; }

/* ── CORES DE MARCA — FABRICANTES ── */
.rp-bg-ntn          { background: #009bde; color: #fff; }
.rp-bg-snr          { background: #feed00; color: #1a1a00; }
.rp-bg-tsubaki      { background: #008dd3; color: #fff; }

/* ── GRADIENTES HORIZONTAIS ── */
.rp-bg-grad-blue-cyan      { background: linear-gradient(to right, #1d4ed8, #06b6d4); color: #fff; }
.rp-bg-grad-blue-purple    { background: linear-gradient(to right, #1e3a8a, #7c3aed); color: #fff; }
.rp-bg-grad-green-cyan     { background: linear-gradient(to right, #15803d, #06b6d4); color: #fff; }
.rp-bg-grad-yellow-orange  { background: linear-gradient(to right, #ca8a04, #ea580c); color: #fff; }
.rp-bg-grad-orange-red     { background: linear-gradient(to right, #ea580c, #dc2626); color: #fff; }
.rp-bg-grad-pink-purple    { background: linear-gradient(to right, #ec4899, #7c3aed); color: #fff; }
.rp-bg-grad-blue-green     { background: linear-gradient(to right, #1d4ed8, #15803d); color: #fff; }
.rp-bg-grad-purple-pink    { background: linear-gradient(to right, #7c3aed, #ec4899); color: #fff; }
.rp-bg-grad-gray-blue      { background: linear-gradient(to right, #e5e7eb, #bfdbfe); color: #1e3a8a; }
.rp-bg-grad-rolespinho     { background: linear-gradient(to right, #a02037, #5b294c, #202866, #1a2d79); color: #fff; }

/* Cantos arredondados — tabela simples (opt-in) */
.rp-tabela-simples--rounded { border-radius: 8px; overflow: hidden; }
.rp-tabela-simples--rounded .rp-tabela-simples__table { border-radius: 8px; overflow: hidden; }

/* Remover border-radius das células — o arredondamento é só no wrapper */
.rp-tabela-simples__td[class*="rp-bg-"],
.rp-tabela-simples__th[class*="rp-bg-"],
.rp-tabela-simples__th-row[class*="rp-bg-"] {
  border-radius: 0;
  padding: 10px 14px;
}

/* Largura controlada por bloco */
.rp-block-image--w-20  { width: 20%; }
.rp-block-image--w-25  { width: 25%; }
.rp-block-image--w-30  { width: 30%; }
.rp-block-image--w-33  { width: 33%; }
.rp-block-image--w-40  { width: 40%; }
.rp-block-image--w-50  { width: 50%; }
.rp-block-image--w-60  { width: 60%; }
.rp-block-image--w-66  { width: 66%; }
.rp-block-image--w-70  { width: 70%; }
.rp-block-image--w-75  { width: 75%; }
.rp-block-image--w-80  { width: 80%; }
.rp-block-image--w-100 { width: 100%; }

@media (max-width: 767px) {
  [class*="rp-block-image--w-"] { width: 100% !important; }
}

/* Imagens com hiperligação — limitar área clicável à imagem */
.rp-block-text p a { display: inline-block; }
.rp-block-text p a img { display: block; }