/* R05: repaginação completa do bcortes.com.br. Vale em todas as páginas com <body class="... r5">.
   Usa as variáveis e os componentes de estilo.css; só muda a aparência (scripts e formulários ficam iguais). */
.r5 {
  --r5-escuro: #07212B;
  --r5-petroleo: #0F3B4C;
  --r5-malha: rgba(255, 255, 255, .045);
  --r5-borda-escura: rgba(255, 255, 255, .1);
  --r5-texto-claro: rgba(234, 241, 242, .82);
  overflow-x: clip;
}

/* Malha técnica de prancha nas faixas escuras */
.r5 .site-top, .r5 main > .trilha, .r5 .pg-hero, .r5 main > section.hero, .r5 .site-foot, .r5 .cta-faixa, .r5 .card.escuro, .r5 .tr-chamada {
  background-color: var(--r5-escuro);
  background-image: linear-gradient(var(--r5-malha) 1px, transparent 1px), linear-gradient(90deg, var(--r5-malha) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Cabeçalho escuro de ponta a ponta */
.r5 .site-top { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 14px max(20px, calc(50vw - 580px)); border-bottom: 1px solid var(--r5-borda-escura); box-shadow: 0 10px 30px rgba(7, 33, 43, .18); }
.r5 .site-top .lg-t, .r5 .site-top .lg-b { fill: #FFFFFF; }
.r5 .site-top .logo:hover .lg-b { fill: var(--dourado); }
.r5 .site-nav a { color: var(--r5-texto-claro); border-radius: 8px; }
.r5 .site-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.r5 .site-nav a[aria-current="page"], .r5 .site-nav a.secao-atual { color: #FFFFFF; background: transparent; box-shadow: inset 0 -2px 0 var(--dourado); border-radius: 0; }
.r5 .site-nav a.btn-sm { background: var(--terra-btn); color: #FFFFFF; border-radius: 8px; box-shadow: none; }
.r5 .site-nav a.btn-sm:hover { background: var(--terra-btn-h); color: #FFFFFF; }
.r5 .menu-cel summary { background: rgba(255, 255, 255, .06); border-color: var(--r5-borda-escura); }
.r5 .menu-cel .hamb, .r5 .menu-cel .hamb::before, .r5 .menu-cel .hamb::after { background: #FFFFFF; }
.r5 .menu-cel[open] .hamb { background: transparent; }
.r5 .menu-cel nav { background: var(--r5-escuro); border-color: var(--r5-borda-escura); }
.r5 .menu-cel nav b { color: var(--dourado); }
.r5 .menu-cel nav a { color: var(--r5-texto-claro); }
.r5 .menu-cel nav a:hover, .r5 .menu-cel nav a[aria-current="page"], .r5 .menu-cel nav a.secao-atual { background: rgba(255, 255, 255, .08); color: #FFFFFF; }

/* Trilha + topo interno numa faixa escura só, de ponta a ponta */
.r5 main > .trilha { margin: 0 calc(50% - 50vw); padding: 18px max(20px, calc(50vw - 580px)) 0; }
.r5 main > .trilha, .r5 main > .trilha a { color: rgba(234, 241, 242, .66); }
.r5 main > .trilha a:hover { color: #FFFFFF; }
.r5 main > .trilha [aria-current] { color: var(--dourado); }
.r5 .pg-hero, .r5 main > section.hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(28px, 5vw, 64px) max(20px, calc(50vw - 580px)) clamp(36px, 6vw, 80px); }
/* texto claro só no bloco de texto do topo: cartões claros ao lado (resumo, memória de cálculo) mantêm o texto escuro */
.r5 .pg-hero-txt, .r5 main > section.hero .hero-text { color: #EAF1F2; }
.r5 main > .trilha + .pg-hero, .r5 main > .trilha + section.hero { padding-top: clamp(16px, 3vw, 36px); }
.r5 .pg-hero .eyebrow, .r5 main > section.hero .eyebrow { color: var(--dourado); }
.r5 .pg-hero h1, .r5 main > section.hero h1 { color: #FFFFFF; font-size: clamp(2.5rem, 5.8vw, 4.6rem); line-height: .98; }
.r5 .pg-hero h1 em, .r5 main > section.hero h1 em { color: var(--terra-claro); }
.r5 .pg-hero .lede, .r5 main > section.hero .lede, .r5 main > section.hero .hero-text p { color: var(--r5-texto-claro); }
.r5 .pg-hero .btn.alt, .r5 main > section.hero .btn.alt { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.r5 .pg-hero .btn.alt:hover, .r5 main > section.hero .btn.alt:hover { background: rgba(255, 255, 255, .08); }
.r5 .fatos-servico { border-top: 1px solid var(--r5-borda-escura); }
.r5 .fatos-servico div { border-color: var(--r5-borda-escura); }
.r5 .fatos-servico dt { color: var(--dourado); }
.r5 .fatos-servico dd { color: var(--r5-texto-claro); }
.r5 .pg-foto { position: relative; margin: 0; overflow: visible; border-radius: 0; background: transparent; }
.r5 .pg-foto img, .r5 .pg-foto video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: 14px 14px 0 rgba(224, 168, 75, .9); }
.r5 .pg-foto img.parado { display: none; }
@media (prefers-reduced-motion: reduce) { .r5 .pg-foto video { display: none; } .r5 .pg-foto img.parado { display: block; } }
.r5 .pg-foto .foto-legenda { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(7, 33, 43, .82); color: #FFFFFF; font-size: .74rem; }

/* Títulos de seção mais fortes */
.r5 .block { margin-top: clamp(64px, 9vw, 112px); }
.r5 h2.sec { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.02; }
.r5 .sec-head .eyebrow::before, .r5 .eyebrow::before { width: 28px; background: var(--dourado); transform: none; height: 2px; }

/* Cartões e botões mais técnicos */
.r5 .card { border-radius: 12px; border-top: 3px solid var(--terra); transition: transform .2s ease, box-shadow .2s ease; }
.r5 a.card:hover, .r5 .card:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.r5 .card.escuro { border-top-color: var(--dourado); }
.r5 .card .k, .r5 .k { letter-spacing: .12em; }
.r5 .btn { border-radius: 10px; font-weight: 700; letter-spacing: .01em; }
.r5 .tile { border-radius: 16px; }
.r5 .trabalho, .r5 .criacao { border-radius: 14px; }
.r5 .faq details { border-radius: 12px; }
.r5 .artigos-lista a { border-radius: 12px; border-left: 3px solid var(--terra); }

/* Faixas de chamada e treinamento */
.r5 .cta-faixa, .r5 .tr-chamada { border-radius: 18px; }

/* Rodapé escuro de ponta a ponta */
.r5 .site-foot { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(40px, 6vw, 72px) max(20px, calc(50vw - 580px)) 32px; border-radius: 0; border-top: 3px solid var(--terra); }
.r5 .site-foot .foot-cols b { color: var(--dourado); }

@media (forced-colors: active) {
  .r5 .site-top, .r5 .pg-hero, .r5 main > section.hero, .r5 .site-foot { border: 1px solid CanvasText; }
}

/* Vídeos nos topos das páginas de serviço: quadro horizontal, para o modelo 3D e as cenas não serem cortados */
.r5 .pg-foto--video video, .r5 .pg-foto--video img { aspect-ratio: 16 / 10; }

/* Correções da primeira montagem da R05 */
.r5 .site-top { border-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* o fundo antigo vinha de border-image por cima */
.r5 .pg-foto--video { aspect-ratio: auto; align-self: center; }                              /* sem a moldura retrato da foto antiga */
.r5 .memo-card { color: var(--ink); }                                                          /* cartão claro dentro do topo escuro do INSS */
.r5 .memo-card .sub { color: var(--muted); }
.r5 .pg-hero { border-radius: 0; }   /* o treinamento tinha cantos arredondados próprios dentro da faixa */