/* ===== BLINDAGEM CONTRA CSS GLOBAL DO ELEMENTOR ===== */
.elementor-widget-html, .elementor-widget-html .elementor-widget-container,
.elementor-element.elementor-widget-html {
  max-width: none !important;
  width: 100% !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section, .elementor-container, .elementor-row,
.elementor-column, .elementor-column > .elementor-widget-wrap {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  contain: none !important;
  overflow: visible !important;
}
html, body { overflow: visible !important; }
.ronchetti-page a { color: inherit; text-decoration: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        #F4F8FC;
  --paper:     #FFFFFF;
  --ink:       #011224;
  --ink-soft:  #014478;
  --muted:     #4A6480;
  --muted-2:   #7A9AB8;
  --line:      #D0DDE9;
  --line-2:    #C2D4E4;
  --warm:      #EBF2FA;
  --warm-2:    #DAE6F2;
  --dark:      #011224;
  --dark-2:    #012040;
  --accent:    #014478;
  --teal:      #02A9A7;
  --blue:      #014478;
  --ice:       #DAE6F2;
  --light-blue:#A8D9FF;
  --serif: 'Raleway', system-ui, sans-serif;
  --sans:  'Raleway', system-ui, sans-serif;
  --container: 1180px;
  --gutter: 56px;
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 61px;
}
/* O body do tema tem fundo azul-marinho escuro por padrao (usado em outras
   paginas do site atras de heros com foto). Sem isso, esse escuro aparece
   atras de qualquer trecho do blog que nao tenha fundo proprio definido. */
html:has(.rc-blog-page), body:has(.rc-blog-page) { background: var(--bg) !important; }
.rc-blog-page { font-family: var(--sans); line-height: 1.55; color: var(--ink); background: var(--bg); }
.rc-blog-page .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* TYPE */
.rc-blog-page .eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 12px; }
.rc-blog-page .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--teal); }
.rc-blog-page .h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.03em; color: #053160 !important; }
.rc-blog-page .h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: #014478 !important; display: block; }
.rc-blog-page .lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: var(--muted); max-width: 480px; font-weight: 400; letter-spacing: .01em; }

/* BUTTONS */
.rc-blog-page .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--teal) !important; color: var(--paper) !important; border: 1px solid var(--teal); border-color: var(--teal) !important; border-radius: 999px; padding: 16px 30px; font: 600 15px/1 var(--sans); letter-spacing: .01em; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(1,18,36,.18); transition: opacity .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.rc-blog-page .btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); pointer-events: none; transition: left .55s ease; }
.rc-blog-page .btn:hover::after { left: 130%; }
.rc-blog-page .btn .arrow { display: inline-flex; align-items: center; transition: transform .35s var(--ease); }
.rc-blog-page .btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(1,18,36,.3); }
.rc-blog-page .btn:hover .arrow { transform: translateX(3px); }
.rc-blog-page .btn:active { transform: scale(.97); }

/* REVEAL */
.rc-blog-page .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rc-blog-page .reveal.in { opacity: 1; transform: translateY(0); }
.rc-blog-page .reveal-1 { transition-delay: .05s; }
.rc-blog-page .reveal-2 { transition-delay: .15s; }
.rc-blog-page .reveal-3 { transition-delay: .25s; }
.rc-blog-page .reveal-4 { transition-delay: .35s; }

/* CATEGORY NAV BAR, logo abaixo do header fixo do site. padding-top (nao
   margin-top) de proposito: o header e transparente/texto branco no topo,
   entao o fundo escuro desta barra precisa continuar atras dele. */
.rc-blog-page .cat-nav { background: linear-gradient(100deg, #011224 0%, #014478 100%); position: relative; z-index: 5; padding-top: var(--header-h); }
.rc-blog-page .cat-nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px var(--gutter); overflow-x: auto; scrollbar-width: none; }
/* So centraliza quando cabe tudo sem precisar de scroll (telas largas). Em
   telas estreitas, centralizar com overflow corta o primeiro item pra fora
   da tela (o scroll comeca "no meio" do conteudo), entao mantem alinhado
   a esquerda por padrao e centraliza so a partir daqui. */
@media (min-width: 700px) {
  .rc-blog-page .cat-nav-inner { justify-content: center; padding: 12px 0; }
}
.rc-blog-page .cat-nav-inner::-webkit-scrollbar { display: none; }
.rc-blog-page .cat-nav a { flex-shrink: 0; padding: 9px 20px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); border-radius: 999px; white-space: nowrap; transition: color .25s var(--ease), background-color .25s var(--ease); }
.rc-blog-page .cat-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.rc-blog-page .cat-nav a.active { color: var(--paper); background: var(--teal); }

/* Quando a barra de categorias vive dentro do hero (home do blog), ela nao
   e mais uma faixa propria: reseta o fundo/offset do header (o .page-hero
   ja cuida disso) e centraliza sem o gutter extra, ja que o hero-inner
   ja e uma coluna estreita e centralizada. */
.rc-blog-page .hero-cat-nav.cat-nav { background: none; position: static; z-index: auto; padding-top: 0; margin-bottom: 28px; }
.rc-blog-page .hero-cat-nav .cat-nav-inner { padding: 0; justify-content: center; }

/* ===== LISTAGEM (/blog) ===== */
.rc-blog-page .page-hero { min-height: 560px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: var(--header-h); background: url('../img/blog_hero_desktop_1x.webp') center / cover no-repeat, var(--bg); }
@media (max-width: 640px) {
  .rc-blog-page .page-hero { background-image: url('../img/blog_hero_mobile_1x.webp'); }
}
/* Padding assimetrico de proposito: o --header-h ja empurra o conteudo pra
   baixo por conta do header fixo por cima do gradiente, entao um padding-top
   igual ao padding-bottom deixava o respiro de cima quase o dobro do de
   baixo. Reduzido pra equilibrar visualmente. */
.rc-blog-page .page-hero > .container { position: relative; z-index: 2; padding: 32px var(--gutter) 88px; width: 100%; box-sizing: border-box; }
.rc-blog-page .page-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.rc-blog-page .page-hero h1 { color: var(--blue) !important; margin-bottom: 32px; }
.rc-blog-page .hero-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.rc-blog-page .hero-search input { flex: 1; min-width: 0; padding: 16px 22px; border-radius: 999px; border: none; font: 15px/1 var(--sans); color: var(--ink); outline: none; }
.rc-blog-page .hero-search input::placeholder { color: var(--muted-2); }
.rc-blog-page .hero-search button { flex-shrink: 0; padding: 16px 26px; border-radius: 999px; border: none; background: var(--blue); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; transition: opacity .25s var(--ease); }
.rc-blog-page .hero-search button:hover { opacity: .85; }

.rc-blog-page .blog-section { padding: 64px 0 100px; }

/* Fileiras da home do blog (destaque, mais recentes, uma por categoria,
   todos os artigos) alternam fundo branco / azul clarinho, cada uma na sua
   propria secao de largura total, pra ficar visualmente separada da
   anterior mesmo sem borda ou divisor. */
.rc-blog-page .blog-band { padding: 56px 0; background: var(--paper); }
.rc-blog-page .blog-band-alt { background: var(--bg); }
.rc-blog-page .blog-band .rail,
.rc-blog-page .blog-band .featured-story,
.rc-blog-page .blog-band .featured-story-label { margin-bottom: 0; }
/* Nas fileiras de fundo branco, os cards eram brancos tambem (so a borda de
   1px separava), sem contraste nenhum. Nas de fundo azul-clarinho o card
   fica branco (contraste ja existe do outro lado). Cuidado: .blog-band-alt
   tambem carrega a classe .blog-band junto (nao e substituta), entao
   precisa excluir explicitamente com :not(), senao o seletor de cima pega
   as duas fileiras. */
.rc-blog-page .blog-band:not(.blog-band-alt) .blog-card,
.rc-blog-page .blog-band:not(.blog-band-alt) .featured-story,
.rc-blog-page .blog-band:not(.blog-band-alt) .all-post-card { background: #F2F6FA; }
.rc-blog-page .blog-band-alt .blog-card,
.rc-blog-page .blog-band-alt .featured-story,
.rc-blog-page .blog-band-alt .all-post-card { background: var(--paper); }

.rc-blog-page .featured-story-label { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--teal) !important; margin-bottom: 20px; }
.rc-blog-page .featured-story { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); margin-bottom: 88px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.rc-blog-page .featured-story:hover { border-color: var(--teal); box-shadow: 0 20px 48px rgba(1,18,36,.1); }
.rc-blog-page .featured-story-img { width: 100%; height: 100%; min-height: 340px; overflow: hidden; background: var(--warm); order: 2; position: relative; }
.rc-blog-page .featured-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-blog-page .featured-story-body { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; order: 1; }
.rc-blog-page .featured-story-tags { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.rc-blog-page .featured-story-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); background: var(--warm-2); padding: 5px 12px; border-radius: 999px; }
.rc-blog-page .featured-story-title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; color: var(--ink) !important; line-height: 1.25; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rc-blog-page .featured-story-excerpt { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 24px; }
.rc-blog-page .featured-story-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted-2); }
.rc-blog-page .featured-story-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--warm-2); }
.rc-blog-page .featured-story-meta-name { font-weight: 600; color: var(--ink-soft); display: block; }

.rc-blog-page .rail { margin-bottom: 72px; }
.rc-blog-page .rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.rc-blog-page .rail-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink-soft) !important; margin-bottom: 6px; }
.rc-blog-page .rail-desc { font-size: 14px; color: var(--muted); }
.rc-blog-page .rail-viewall { font-size: 13px; font-weight: 700; color: var(--teal); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rc-blog-page .rail-viewall svg { transition: transform .3s var(--ease); }
.rc-blog-page .rail-viewall:hover svg { transform: translateX(3px); }

.rc-blog-page .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rc-blog-page .blog-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.rc-blog-page .blog-card:hover { border-color: var(--teal); box-shadow: 0 16px 40px rgba(1,18,36,.1); transform: translateY(-4px); }
.rc-blog-page .blog-card-img-wrap { width: 100%; height: 200px; overflow: hidden; background: var(--warm); position: relative; }
.rc-blog-page .blog-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.rc-blog-page .blog-card:hover .blog-card-img-wrap img { transform: scale(1.05); }
.rc-blog-page .blog-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.rc-blog-page .blog-card-category { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.rc-blog-page .blog-card-title { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink) !important; margin-bottom: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rc-blog-page .blog-card-excerpt { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.rc-blog-page .blog-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted-2); border-top: 1px solid var(--line); padding-top: 16px; }
.rc-blog-page .blog-card-read { color: var(--teal); font-weight: 700; }

.rc-blog-page .blog-empty-notice { text-align: center; padding: 60px 20px; color: var(--muted-2); font-size: 14px; }

.rc-blog-page .all-posts { padding-top: 24px; border-top: 1px solid var(--line); }
.rc-blog-page .all-posts .rail-head { margin-bottom: 36px; }
.rc-blog-page .all-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 48px; }
.rc-blog-page .all-post-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.rc-blog-page .all-post-card:hover { border-color: var(--teal); box-shadow: 0 16px 40px rgba(1,18,36,.1); transform: translateY(-4px); }
.rc-blog-page .all-post-img { width: 100%; height: 170px; overflow: hidden; background: var(--warm); position: relative; }
.rc-blog-page .all-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-blog-page .all-post-body { padding: 20px 22px; }
.rc-blog-page .all-post-meta-top { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.rc-blog-page .all-post-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink) !important; margin-bottom: 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-blog-page .all-post-excerpt { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.rc-blog-page .all-post-author { font-size: 12px; color: var(--muted-2); font-weight: 600; }

.rc-blog-page .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; }
.rc-blog-page .pagination a, .rc-blog-page .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.rc-blog-page .pagination a:hover { border-color: var(--teal); }
.rc-blog-page .pagination .current { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; }
.rc-blog-page .pagination .next { display: inline-flex; align-items: center; gap: 6px; width: auto; }

@media (max-width: 960px) {
  .rc-blog-page .blog-grid, .rc-blog-page .all-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .rc-blog-page .featured-story { grid-template-columns: 1fr; }
  .rc-blog-page .featured-story-img { min-height: 220px; order: 1; }
  .rc-blog-page .featured-story-body { order: 2; padding: 32px 28px; }
}
@media (max-width: 640px) {
  .rc-blog-page { --gutter: 24px; }
  .rc-blog-page .page-hero > .container { padding: 24px var(--gutter) 64px; }
  .rc-blog-page .hero-search { flex-direction: column; }
  .rc-blog-page .blog-grid, .rc-blog-page .all-posts-grid { grid-template-columns: 1fr; gap: 24px; }
  .rc-blog-page .rail-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rc-blog-page .rail { margin-bottom: 56px; }
  .rc-blog-page .cat-nav a { padding: 14px 14px; font-size: 13px; }
}

/* ===== ARTIGO INDIVIDUAL ===== */
.rc-blog-page .article-header { padding: calc(56px + var(--header-h)) 0 0; background: var(--bg); }
.rc-blog-page .article-header-inner { max-width: 800px; margin: 0 auto; }
.rc-blog-page .article-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.rc-blog-page .article-tag { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--warm-2); padding: 6px 16px; border-radius: 999px; }
.rc-blog-page .article-back-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warm-2); color: var(--ink-soft); flex-shrink: 0; transition: background-color .2s var(--ease), color .2s var(--ease); }
.rc-blog-page .article-back-link:hover { background: var(--teal); color: var(--paper); }
.rc-blog-page .article-meta-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-2); font-weight: 600; margin-bottom: 20px; flex-wrap: wrap; }
.rc-blog-page .article-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.rc-blog-page .article-title { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-soft) !important; margin-bottom: 28px; }
.rc-blog-page .article-actions { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.rc-blog-page .article-actions-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.rc-blog-page .article-share-row { display: flex; gap: 10px; }
.rc-blog-page .share-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--warm); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: all .3s var(--ease); text-decoration: none; }
.rc-blog-page .share-btn:hover { background: var(--ink-soft); color: #fff; }

.rc-blog-page .article-hero-img { max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden; position: relative; }
.rc-blog-page .article-hero-img img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }
/* Cartoes inteiros clicaveis sem aninhar <a> dentro de <a> (invalido em
   HTML e quebra a renderizacao): o link real fica só no titulo, e um
   pseudo-elemento o estica por cima do cartao todo. O credito da foto
   (que tambem e um link) fica com z-index maior, por cima, sempre clicavel. */
.rc-blog-page .rc-stretched-link { color: inherit; text-decoration: none; }
.rc-blog-page .rc-stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.rc-blog-page .rc-unsplash-credit { position: absolute; right: 8px; bottom: 8px; z-index: 2; margin: 0; font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.9); background: rgba(1,18,36,.5); padding: 2px 8px; border-radius: 999px; pointer-events: auto; }
.rc-blog-page .rc-unsplash-credit a { color: #fff; text-decoration: underline; }
.rc-blog-page .article-hero-img .rc-unsplash-credit { right: 10px; bottom: 8px; font-size: 11px; padding: 3px 9px; }

.rc-blog-page .article-wrap { padding: 48px 0 64px; background: var(--bg); }
.rc-blog-page .article-wrap-no-image { padding-top: 8px; }
.rc-blog-page .article-body { max-width: 760px; margin: 0 auto; }
.rc-blog-page .article-body p { font-size: 17px; line-height: 1.85; color: var(--ink); margin-bottom: 24px; }
.rc-blog-page .article-body p.article-lede { font-size: 19px; color: var(--muted); margin-bottom: 32px; }
.rc-blog-page .article-body h2, .rc-blog-page .article-body h3 { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 26px); font-weight: 600; color: var(--blue) !important; margin: 44px 0 18px; letter-spacing: -0.015em; }
.rc-blog-page .article-body h4 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink-soft) !important; margin: 32px 0 14px; }
.rc-blog-page .article-body ul, .rc-blog-page .article-body ol { margin: 0 0 28px 20px; }
.rc-blog-page .article-body li { font-size: 16px; line-height: 1.8; color: var(--ink); margin-bottom: 10px; }
.rc-blog-page .article-body blockquote { border-left: 3px solid var(--teal); padding: 4px 0 4px 24px; margin: 36px 0; font-size: 18px; font-style: italic; color: var(--ink-soft); }
.rc-blog-page .article-body a { color: var(--teal); text-decoration: underline; }
.rc-blog-page .article-body strong { color: var(--ink); }
.rc-blog-page .article-body img { max-width: 100%; width: 100%; max-height: 480px; height: auto; object-fit: cover; border-radius: 12px; margin: 8px 0 28px; display: block; }
.rc-blog-page .article-body figure.rc-inline-image { margin: 8px 0 28px; }
.rc-blog-page .article-body figure.rc-inline-image img { margin: 0 0 8px; }
.rc-blog-page .article-body figure.rc-inline-image figcaption { font-size: 12px; color: var(--muted-2); text-align: center; }
.rc-blog-page .article-body figure.rc-inline-image figcaption a { color: var(--muted-2); text-decoration: underline; }

.rc-blog-page .article-inline-cta { max-width: 760px; margin: 44px auto; padding: 32px 36px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rc-blog-page .article-inline-cta-text h4 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.rc-blog-page .article-inline-cta-text p { font-size: 14px; color: var(--muted); margin: 0; }

.rc-blog-page .author-box { max-width: 760px; margin: 56px auto 0; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; display: flex; gap: 20px; }
.rc-blog-page .author-box-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--warm); }
.rc-blog-page .author-box-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.rc-blog-page .author-box-name { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.rc-blog-page .author-box-bio { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.rc-blog-page .author-box-link { font-size: 13px; font-weight: 700; color: var(--teal); }

.rc-blog-page .related-section { padding: 72px 0 96px; background: var(--paper); }
.rc-blog-page .related-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.rc-blog-page .related-head .eyebrow { justify-content: center; margin-bottom: 14px; }
.rc-blog-page .related-head .eyebrow::before { display: none; }
.rc-blog-page .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rc-blog-page .related-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #F2F6FA; transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.rc-blog-page .related-card:hover { border-color: var(--teal); box-shadow: 0 16px 40px rgba(1,18,36,.1); transform: translateY(-4px); }
.rc-blog-page .related-card-img { width: 100%; height: 170px; overflow: hidden; background: var(--warm); position: relative; }
.rc-blog-page .related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.rc-blog-page .related-card:hover .related-card-img img { transform: scale(1.05); }
.rc-blog-page .related-card-body { padding: 22px; }
.rc-blog-page .related-card-meta-top { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.rc-blog-page .related-card-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink) !important; margin-bottom: 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-blog-page .related-card-excerpt { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.rc-blog-page .related-card-author { font-size: 12px; color: var(--muted-2); font-weight: 600; }

@media (max-width: 860px) {
  .rc-blog-page .related-grid { grid-template-columns: 1fr; }
  .rc-blog-page .article-hero-img { border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
}
@media (max-width: 640px) {
  .rc-blog-page { --gutter: 24px; }
  .rc-blog-page .article-header { padding: calc(40px + var(--header-h)) 0 0; }
  .rc-blog-page .article-title { margin-bottom: 20px; }
  .rc-blog-page .article-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rc-blog-page .article-body p { font-size: 16px; }
  .rc-blog-page .article-inline-cta { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
  .rc-blog-page .author-box { flex-direction: column; text-align: center; align-items: center; }
}

/* ===== RC LEAD CAPTURE MODAL (WhatsApp) ===== */
.rc-wa-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;}
.rc-wa-modal.open{display:flex;}
.rc-wa-backdrop{position:absolute;inset:0;background:rgba(1,18,36,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.rc-wa-box{position:relative;z-index:1;background:#fff;border-radius:20px;padding:40px 36px 32px;max-width:480px;width:calc(100% - 32px);box-shadow:0 24px 80px rgba(1,18,36,.3);text-align:center;animation:rc-pop .35s cubic-bezier(.22,1,.36,1);}
@keyframes rc-pop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
.rc-wa-icon{width:56px;height:56px;background:#25d36620;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.rc-wa-title{font-family:'Raleway',system-ui,sans-serif;font-size:22px;font-weight:700;color:#011224 !important;margin-bottom:8px;}
.rc-wa-sub{font-size:14px;color:#4A6480;line-height:1.55;margin-bottom:24px;}
.rc-wa-field{margin-bottom:6px;text-align:left;}
#rc-wa-modal .rc-wa-field input,#rc-wa-modal .rc-wa-field select{width:100% !important;padding:12px 14px !important;border:1.5px solid #D0DDE9 !important;border-radius:10px !important;font:14px/1.5 'Raleway',system-ui,sans-serif !important;color:#011224 !important;background:#F4F8FC !important;outline:none;transition:border-color .2s;box-sizing:border-box;appearance:none;-webkit-appearance:none;}
#rc-wa-modal .rc-wa-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23014478' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-color:#F4F8FC !important;padding-right:36px !important;color:#011224 !important;}
#rc-wa-modal .rc-wa-field input:focus,#rc-wa-modal .rc-wa-field select:focus{border-color:#02A9A7 !important;background:#fff !important;}
#rc-wa-modal .rc-wa-field input.rc-err,#rc-wa-modal .rc-wa-field select.rc-err{border-color:#ef4444 !important;}
.rc-wa-err{display:block;font-size:11px;color:#ef4444;margin-top:2px;min-height:8px;}
#rc-wa-modal .rc-wa-btn{width:100%;padding:15px;background:#25D366 !important;background-color:#25D366 !important;color:#fff !important;border:none !important;border-color:transparent !important;box-shadow:none !important;border-radius:999px;font:700 15px/1 'Raleway',system-ui,sans-serif;cursor:pointer;margin-top:6px;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
#rc-wa-modal .rc-wa-btn:hover{opacity:.88;background:#25D366 !important;background-color:#25D366 !important;color:#fff !important;border-color:transparent !important;box-shadow:none !important;}
.rc-wa-note{font-size:11px;color:#7A9AB8;margin-top:12px;line-height:1.5;}