/* ==========================================================================
   /seguros/rctr-c — blocos próprios da página
   Figma: frame "/rctr-c" (277:104), medidas em material/figma/layout-277_104.txt
   ==========================================================================
   MOLDE DAS PÁGINAS DE PRODUTO. RC-DC e RC-V usam esta mesma folha: o que
   muda entre elas é conteúdo, não desenho. Por isso as classes falam do
   PAPEL do bloco (hero, resposta rápida, faixa, etapas), e não do RCTR-C.

   O que já é global e NÃO se repete aqui: cobre/não cobre, passos com seta,
   checklist e autoria (components.css); comparativo (seguros-obrigatorios.css);
   FAQ e botões (components.css). */

.rc { background: var(--c-white); }

/* Intro curta sob o título da seção */
.rc-intro {
  max-width: 460px;
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--text-body);
}

/* Links azuis de fim de bloco: um tamanho só na página inteira */
.rc .link-arrow { font-size: var(--fs-16); }
.rc-link { margin-top: var(--sp-6); }
.rc-link--dir { text-align: right; }

.rc-subtitulo {
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-16));
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* ==========================================================================
   1. HERO — foto de largura cheia com cartão de vidro por cima
   ==========================================================================
   Figma: faixa de 489px, cartão 1038x317 em vidro escuro. O título fica à
   esquerda e o texto com os botões à direita. */

.rc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 34vw, 489px);
  padding-block: var(--sp-10);
  overflow: hidden;
  isolation: isolate;
}

.rc-hero picture { display: contents; }

.rc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.rc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgb(6 22 46 / 0.94) 0%, rgb(6 22 46 / 0.80) 45%, rgb(6 22 46 / 0.25) 100%);
}

.rc-hero > .container { position: relative; z-index: 3; }

/* vidro fosco, como o efeito GLASS do Figma */
.rc-hero__vidro {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: rgb(0 0 0 / 0.20);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-card);
  backdrop-filter: blur(12px);
}

.rc-hero__marca {
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-blue);
}

.rc-hero__titulo {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-gray-100);
}

.rc-hero__lead {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--c-gray-100);
}
.rc-hero__lead strong { font-weight: var(--fw-semibold); }

.rc-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.rc-hero__nota {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  color: rgb(243 243 243 / 0.75);
}

/* ---------- trilha de navegação (global em espírito, usada aqui primeiro) ---------- */

.migalhas { margin-bottom: var(--sp-5); }

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: rgb(255 255 255 / 0.75);
}

.migalhas li + li::before {
  content: '›';
  margin-right: var(--sp-2);
  color: rgb(255 255 255 / 0.5);
}

.migalhas a { color: rgb(255 255 255 / 0.75); }
.migalhas a:hover { color: var(--c-white); }
.migalhas [aria-current] { color: var(--c-white); font-weight: var(--fw-semibold); }

/* ==========================================================================
   2. RESPOSTA RÁPIDA — quatro cartões curtos
   ==========================================================================
   É o formato que busca e IA extraem como resposta direta. Figma: quatro
   cartões brancos de 245x259, com uma régua entre pergunta e resposta. */

.rc-rapidas { padding-block: clamp(var(--sp-10), 5vw, var(--sp-16)); }

.rc-rapidas__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}

.rc-rapida {
  padding: var(--sp-6);
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-card);
}

.rc-rapida__q {
  padding-bottom: var(--sp-4);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  border-bottom: 1px solid var(--c-gray-150);
}

.rc-rapida__a {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-body);
}

/* ==========================================================================
   3. COBERTURA — o que o bloco global não cobre
   ========================================================================== */

.rc-cobertura { background: var(--c-gray-100); }

.rc-exemplo {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  background: #f0fbff;
  border-radius: var(--r-input);
}

/* A ressalva opcional embaixo do exemplo (d.cobertura.notaSim). Mesmo
   desenho, em cinza: ela comenta a coluna inteira, e dois blocos azuis
   seguidos fariam parecer que são dois exemplos. */
.rc-ressalva {
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}
.rc-ressalva strong { color: var(--text-body); }

/* ==========================================================================
   4. AVERBAÇÃO — faixa azul de aviso
   ========================================================================== */

.rc-averbacao { background: var(--c-gray-100); padding-top: 0; }

.rc-faixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  margin-top: clamp(var(--sp-10), 5vw, var(--sp-12));
  padding: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--c-blue);
  border-radius: var(--r-input);
}

.rc-faixa__texto {
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--c-navy);
}

/* sobre o azul, o link precisa do contraste do navy */
.rc-faixa__link .link-arrow { color: var(--c-navy); font-weight: var(--fw-semibold); }
.rc-faixa__link .link-arrow:hover { color: var(--c-white); }

/* ==========================================================================
   5. QUANTO CUSTA
   ========================================================================== */

.rc-preco__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 615px);
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  align-items: start;
}

.rc-fatores {
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}

.rc-fatores__rotulo {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rc-fatores__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-8);
}

.rc-fatores__coluna { display: grid; gap: var(--sp-2); }

.rc-fatores__coluna li {
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--text-body);
}

/* ==========================================================================
   6. COMO CONTRATAR — quatro etapas numeradas
   ========================================================================== */

/* No Figma esta seção é branca e o cinza volta só no comparativo. */
.rc-contratar .checklist__lista { border: 1px solid var(--c-gray-150); }

.rc-etapas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.rc-etapa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.rc-etapa__num {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-blue);
}

/* As etapas dos obrigatórios são só número + frase. As modalidades usam o
   mesmo bloco com um título por etapa, porque lá são quatro passos de uma
   operação e não quatro frases de um processo de compra. O título é aditivo:
   quem não o usa continua igual. */
.rc-etapa__titulo {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-navy);
}
.rc-etapa__titulo + .rc-etapa__texto { margin-top: var(--sp-2); }

.rc-etapa__texto {
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--text-body);
}

/* ==========================================================================
   COMPARATIVO — reproduz o frame /rctr-c (277:104), faixa y 3466–4220
   ==========================================================================
   Foto atravessando a faixa e, flutuando sobre ela, um cartão branco de
   1057px com a base azul de 9px. O cartão é o que dá o contorno: sem ele a
   tabela se espalhava pela seção inteira e parecia maior do que é — são três
   linhas de resumo, com o link para a comparação completa logo abaixo. */

.rc-comparativo {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-14));
  background: var(--c-navy-frio);
}

.rc-comparativo__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.rc-comparativo__cartao {
  padding: clamp(var(--sp-6), 3vw, var(--sp-10)) clamp(var(--sp-5), 3vw, var(--sp-10));
  background: var(--c-white);
  border-bottom: 9px solid var(--c-blue);
  border-radius: var(--r-xl);
}

/* No Figma o título é cinza-escuro, não o azul-marinho dos outros — o cartão
   branco já destaca o bloco, e o navy aqui pesaria. */
.rc-comparativo__titulo {
  max-width: none;
  margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-10));
  color: var(--c-ink);
}
.rc-comparativo__x { color: var(--c-blue); }

/* Observacao da linha "Quem contrata?": o asterisco das tres celulas aponta
   para ela. Fica dentro do cartao, abaixo da tabela. */
.rc-comparativo__nota {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}

/* A coluna da própria página sai destacada: quem está no RC-DC quer achar o
   RC-DC na tabela sem ter de contar colunas. Só a cor do cabeçalho — dentro
   de um cartão branco, fundo claro não apareceria, e a tabela existe para
   comparar os três, não para vender o da vez. */
/* O destaque era só a cor do texto, no tom escuro que saiu de uso (07/10/2026).
   Virou um fundo azul bem diluído: marca a coluna sem depender de distinguir
   dois tons de texto, e sem o problema de contraste que o azul da marca teria
   como cor de letra. */
.comparativo thead th.comparativo__atual {
  background: rgb(0 182 255 / 0.12);
  border-radius: var(--r-input) var(--r-input) 0 0;
}

/* ---------- a versão enxuta da tabela ----------
   Mesma marcação da comparação completa (9 linhas e botões, na
   /seguros-obrigatorios-transportadora) com as medidas do frame: filete de
   1px sob o cabeçalho em vez da régua de 5px, respiro interno menor e as
   divisórias verticais entre as colunas, como no desenho. */
.comparativo--enxuto table { min-width: 560px; }

.comparativo--enxuto th,
.comparativo--enxuto td { padding: var(--sp-5) var(--sp-6); }

/* Filete vertical de altura cheia entre as colunas, do cabeçalho à última
   linha — é ele que separa os três seguros no desenho. */
.comparativo--enxuto th + th,
.comparativo--enxuto td + td,
.comparativo--enxuto th + td { border-left: 1px solid var(--c-gray-150); }

.comparativo--enxuto thead th {
  padding-block: 0 var(--sp-4);
  font-size: var(--fs-16);
  border-bottom: 1px solid var(--c-blue);
}

/* Fecha a tabela embaixo, como o filete do frame sob a última linha. */
.comparativo--enxuto tbody tr:last-child th,
.comparativo--enxuto tbody tr:last-child td { border-bottom: 1px solid var(--c-gray-150); }

.comparativo--enxuto tbody th {
  width: 210px;
  padding-inline: var(--sp-4) var(--sp-6);
  font-size: var(--fs-14);
  letter-spacing: 0.02em;
}

.comparativo--enxuto tbody td {
  font-size: var(--fs-16);
  line-height: 1.45;
  vertical-align: top;
}

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */

@media (max-width: 1080px) {
  .rc-rapidas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-preco__grade { grid-template-columns: minmax(0, 1fr); }
  .rc-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-intro { max-width: 620px; }
}

@media (max-width: 900px) {
  .rc-hero__vidro { grid-template-columns: minmax(0, 1fr); }
  .rc-hero::before {
    background: linear-gradient(180deg, rgb(6 22 46 / 0.82) 0%, rgb(6 22 46 / 0.94) 100%);
  }
  .rc-faixa { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .rc-rapidas__grade,
  .rc-etapas { grid-template-columns: minmax(0, 1fr); }
  .rc-link--dir { text-align: left; }
  .rc-hero__acoes .btn { width: 100%; }
}

/* ==========================================================================
   TABELAS DE DUAS COLUNAS (RC-V: situações e limites mínimos)
   Nasceram em 09/11/2026, com as duas tabelas que o cliente pediu na página
   do RC-V. Usam o desenho da comparação resumida (.comparativo--enxuto), sem
   o min-width de 560px dela: com duas colunas a tabela cabe no celular, e
   rolar para o lado uma tabela de duas colunas seria só atrito.
   ========================================================================== */

.rc-situacoes,
.rc-limites {
  margin-top: var(--sp-12);
  max-width: 720px;
}

.rc-bloco__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.rc-tabela { margin-top: var(--sp-6); }
.rc-tabela table { min-width: 0; }

/* O rótulo de linha da comparação é sigla curta em caixa alta ("O QUE
   COBRE"); aqui ele é uma frase inteira ("Caminhão vazio retornando após
   entrega"), e em caixa alta ela vira bloco ilegível. Volta ao texto normal, e
   o peso passa para a resposta, que é o que o leitor procura. */
.rc-tabela th,
.rc-tabela td { padding: var(--sp-4) var(--sp-5); }
.rc-tabela tbody th {
  width: auto;
  font-weight: var(--fw-regular);
  text-transform: none;
  color: var(--text-body);
  line-height: var(--lh-base);
}
.rc-tabela tbody td {
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  white-space: nowrap;
}

.rc-limites__nota,
.rc-limites__importante {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}

.rc-limites__importante strong { color: var(--text-body); }