/* ==========================================================================
   MUNDO SEGURO — Página "RCTR-C, RC-DC e RC-V" (seguros obrigatórios)
   Carregado além de tokens/base/components/sections — reaproveita tudo que
   é comum (header, footer, botões, CTA) e só acrescenta o que é exclusivo
   desta página: hero interno, bloco de definição, tabela comparativa,
   cards de resumo e o acordeão de FAQ.
   ========================================================================== */

/* ==========================================================================
   1. HERO INTERNO
   ==========================================================================
   Mais baixo que o da home (a home é o único lugar com carrossel) e com
   uma faixa de credibilidade abaixo dos CTAs, no lugar dos selos redondos. */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-hero__media {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

.page-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(2 12 28 / 0.90) 0%,
    rgb(2 12 28 / 0.78) 32%,
    rgb(2 12 28 / 0.30) 62%,
    rgb(2 12 28 / 0.05) 100%
  );
}

.page-hero__content {
  max-width: 480px;
  padding: clamp(var(--sp-10), 6vw, var(--sp-16)) clamp(var(--sp-6), 4vw, var(--sp-12));
}

.page-hero__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-white);
}

.page-hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.9);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.page-hero__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-14);
  color: rgb(255 255 255 / 0.7);
}

/* ==========================================================================
   2. DEFINIÇÃO OBJETIVA
   ==========================================================================
   Cartão escuro, full-bleed dentro do container, com foto à esquerda e
   texto à direita — a primeira coisa que Google/IA leem: uma definição
   direta, sem enrolação (ver item 14 do planejamento). */

.definicao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 309px;              /* altura do banner no Figma */
  padding: clamp(16px, 2.4vw, 34px);
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
}

.definicao__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Escurecimento suave só à esquerda: no Figma a foto continua legível — quem
   dá contraste ao texto é o box de vidro, não um véu sobre o banner inteiro. */
.definicao::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(2 12 28 / 0.45) 0%,
    rgb(2 12 28 / 0.15) 45%,
    rgb(2 12 28 / 0) 100%
  );
}

/* ---------- Box de vidro fosco ----------
   Figma: nó "Rectangle 117", 602x236 num banner de 1296x309 (46,4% da
   largura), preenchimento preto a 33% + efeito GLASS. O extrator só lia
   `fills[].color` e ignorava tanto `fills[].opacity` quanto `effects`, então
   o layout.txt saiu como "fill:#000000" — preto sólido — e foi assim que a
   primeira versão foi construída. Ver nota no README. */
.definicao__glass {
  width: min(602px, 50%);
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 4.8vw, 64px);
  border-radius: 9px;                        /* r:9 no Figma */
  background: rgb(0 0 0 / 0.33);             /* fill preto @ 33% */
  border: 1px solid rgb(255 255 255 / 0.14); /* brilho da borda do vidro */
}

/* O desfoque é o que faz o vidro; sem ele o box precisa de mais corpo para
   o texto continuar legível sobre a foto. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .definicao__glass {
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    backdrop-filter: blur(20px) saturate(115%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .definicao__glass { background: rgb(2 12 28 / 0.82); }
}

.definicao__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-32);
  color: var(--c-white);
}

.definicao__text {
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: rgb(255 255 255 / 0.92);
}

@media (max-width: 860px) {
  .definicao {
    min-height: 0;
    justify-content: stretch;
  }
  .definicao__glass { width: 100%; }
  /* sem coluna lateral livre, a foto some atrás do vidro: escurece por baixo
     para o banner não virar uma tarja opaca de ponta a ponta */
  .definicao::before {
    background: linear-gradient(
      to top, rgb(2 12 28 / 0.55) 0%, rgb(2 12 28 / 0.25) 100%
    );
  }
}

/* ==========================================================================
   3. TABELA COMPARATIVA
   ==========================================================================
   Tabela nativa em todas as telas — é o que os motores de busca e leitores
   de tela entendem melhor como "comparação", e é a estrutura que sustenta
   o FAQPage/tabela nos resultados de IA (item 14 do planejamento). Abaixo
   de 860px ela rola na horizontal, com a coluna de rótulos fixa à esquerda
   como referência — mais robusto do que reconstruir o mesmo dado em outra
   marcação (uma segunda fonte de verdade que poderia divergir do HTML). */

.comparativo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grade contínua, e não células soltas: o desenho novo separa as colunas com
   um filete e as linhas com outro, sem preenchimento em nenhuma célula. */
.comparativo table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.comparativo caption.sr-only { position: absolute; }

.comparativo th,
.comparativo td {
  padding: 26px 52px;
  text-align: left;
  vertical-align: middle;
}

/* filete vertical entre as colunas (não nas bordas externas) */
.comparativo th + th,
.comparativo td + td,
.comparativo th + td { border-left: 1px solid var(--c-gray-150); }

/* ---------- cabeçalho ---------- */

/* Régua azul de 5px sob a linha inteira, inclusive sob a coluna de rótulos —
   é o que marca o começo da tabela no lugar do antigo bloco azul. */
.comparativo thead th {
  padding-block: 0 var(--sp-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  text-align: center;
  border-bottom: 5px solid var(--c-blue);
}
.comparativo thead th:first-child { border-bottom-color: var(--c-blue); }

/* ---------- corpo ---------- */

.comparativo tbody tr + tr th,
.comparativo tbody tr + tr td { border-top: 1px solid var(--c-gray-150); }

/* Coluna de rótulos: texto, sem bloco cinza */
.comparativo tbody th {
  width: 181px;
  padding-inline: 26px;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-navy);
  text-transform: uppercase;
}

.comparativo tbody td {
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--text-muted);
}

/* "É obrigatório?": o destaque agora é só a cor do rótulo e o peso da
   resposta — antes era um bloco azul cheio. */
.comparativo tr[data-highlight] th { color: var(--c-blue); }
.comparativo tr[data-highlight] td { font-weight: var(--fw-semibold); }

/* ---------- botões ---------- */

.comparativo tfoot td {
  padding: var(--sp-6) 10px 0;
  border: none;
}
.comparativo tfoot th { border: none; }
.comparativo tfoot .btn { width: 100%; }

/* ---------- telas menores ---------- */

/* A 1ª coluna fica fixa durante o scroll horizontal, para não se perder de
   vista o que está sendo comparado. Sem o bloco cinza de antes, ela precisa
   de fundo próprio: senão o texto das outras colunas passa por baixo. */
@media (max-width: 860px) {
  .comparativo thead th:first-child,
  .comparativo tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--c-white);
    box-shadow: 2px 0 4px rgb(0 0 0 / 0.06);
  }
  .comparativo thead th:first-child { z-index: 3; }

  .comparativo th,
  .comparativo td { padding: var(--sp-5) var(--sp-6); }
  .comparativo tbody th { width: 150px; font-size: var(--fs-14); padding-inline: var(--sp-5); }
  .comparativo tbody td { font-size: var(--fs-14); min-width: 210px; }
  .comparativo tfoot td { padding-inline: var(--sp-2); }
}

/* ==========================================================================
   4. CARDS DE RESUMO (RCTR-C · RC-DC · RC-V)
   ========================================================================== */

.resumo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-6);
}

.card-resumo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 543px;
  padding: var(--sp-8) var(--sp-6);
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
}

.card-resumo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.card-resumo:hover .card-resumo__bg { transform: scale(1.05); }

.card-resumo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(2 12 28 / 0.92) 0%, rgb(2 12 28 / 0.55) 55%, rgb(2 12 28 / 0.15) 100%);
}

.card-resumo__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-24);
  color: var(--c-white);
}

.card-resumo__text {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: rgb(255 255 255 / 0.85);
}

.card-resumo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.card-resumo__cta {
  min-height: 49px;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   AVISO REGULATÓRIO
   ==========================================================================
   Bloco exigido pelo item 5.4 do planejamento (Revisão 2). O "cuidado
   editorial" do documento pede data, fonte oficial e revisão visíveis —
   conteúdo jurídico desatualizado gera risco, não autoridade. */

.aviso-regulatorio {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  background: rgb(0 182 255 / 0.06);
  border-left: 3px solid var(--c-blue);
  border-radius: var(--r-input);
}

.aviso-regulatorio__tag {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-blue-dark);
}

.aviso-regulatorio__texto {
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.aviso-regulatorio__texto strong { font-weight: var(--fw-semibold); color: var(--text-strong); }

.aviso-regulatorio__fonte {
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
}
.aviso-regulatorio__fonte a { color: var(--c-blue-dark); }

@media (max-width: 600px) {
  .aviso-regulatorio { padding: var(--sp-5); }
}

/* ==========================================================================
   8. FATORES DO PRECO - marcador redondo azul
   O bloco .rc-fatores vem de rctr-c.css, que as paginas de carga tambem
   carregam. A bolinha fica aqui para valer so nas tres de obrigatorios.
   ========================================================================== */

.rc-fatores__coluna li {
  position: relative;
  padding-left: var(--sp-4);
}

.rc-fatores__coluna li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-blue);
}