/* ==========================================================================
   MUNDO SEGURO — Páginas de perfil (/para/<quem>)
   ==========================================================================
   CSS próprio, sem reaproveitar carga.css: as páginas de carga já estão
   aprovadas e o redesenho destas não pode mexer naquelas. O que é global
   (FAQ, autoria, CTAs, botões) continua vindo de components.css.

   Blocos, na ordem da página:
     .perfil-migalhas     trilha, sobre branco
     .perfil-hero         texto sobre a foto
     .perfil-rapidas      4 cartões montando sobre a base do hero
     .perfil-aplica       o que se aplica à operação
     .perfil-conferencia  em dia × o que falta  ← o coração
     .perfil-seguros      a ponte para os produtos
     .perfil-documentos   checklist + foto
     .perfil-etapas       como contratar
     .perfil-outros       os sete ladrilhos
   ========================================================================== */

/* ---------- 0. Trilha ---------- */

.perfil-migalhas {
  padding-block: var(--sp-2);
  background: var(--c-white);
}

.perfil-migalhas .migalhas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: var(--text-body);
}
.perfil-migalhas li + li::before { content: '›'; margin-right: var(--sp-2); color: var(--c-gray-300); }
.perfil-migalhas a { color: var(--text-body); }
.perfil-migalhas a:hover { color: var(--c-blue-text); }
.perfil-migalhas [aria-current] { font-weight: var(--fw-semibold); color: var(--c-navy); }

/* ---------- 1. Hero ---------- */

.perfil-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 37vw, 530px);
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-14)) clamp(var(--sp-16), 8vw, 116px);
  background: var(--c-navy-frio);
}

/* A foto entra inteira e o `cover` mostra uma faixa dela. Qual faixa depende
   de onde está o assunto, e isso muda de foto para foto: --foco-hero vem do
   arquivo do perfil (foto.foco) quando o centro não serve. */
.perfil-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco-hero, 50% 50%);
}

.perfil-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, rgb(6 22 46 / 0) 0%, var(--c-navy-frio) 74%);
}

/* Larga o bastante para os dois botões lado a lado; o lead tem medida
   própria, mais estreita, para não virar linha longa demais. */
.perfil-hero__texto { max-width: 530px; }

.perfil-hero__marca {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.perfil-hero__titulo {
  margin-top: var(--sp-2);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--c-gray-100);
}

.perfil-hero__lead {
  margin-top: var(--sp-4);
  max-width: 400px;
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--c-gray-100);
}

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

.perfil-hero__nota {
  margin-top: var(--sp-5);
  font-size: var(--fs-14);
  color: var(--c-gray-200);
}

/* ---------- 2. Resposta rápida ----------
   Os cartões sobem sobre o hero: é o que costura as duas faixas. A margem
   negativa é a mesma folga que o hero reservou embaixo — mexeu numa, mexa
   na outra. */

.perfil-rapidas {
  position: relative;
  z-index: 1;
  margin-top: clamp(-88px, -6vw, -56px);
  padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-20));
  background: linear-gradient(to bottom, transparent 56px, var(--c-gray-100) 56px);
}

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

.perfil-rapida {
  padding: var(--sp-6);
  background: var(--c-white);
  border-radius: var(--r-btn);
}

.perfil-rapida__q {
  padding-bottom: var(--sp-4);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-navy);
  border-bottom: 1px solid var(--c-gray-150);
}
.perfil-rapida:nth-child(even) .perfil-rapida__q { color: var(--c-blue); }

.perfil-rapida__a {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- comum às seções ----------
   O título global tem medida de 480px, estreita para os títulos destas
   páginas, que no Figma cabem numa linha só (655px). A folga fica aqui
   dentro do .perfil: mexer no global reflui o site inteiro. */

.perfil .section-title { max-width: 660px; }

.perfil-intro {
  max-width: 520px;
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- 3. O que se aplica a você ---------- */

.perfil-aplica { background: var(--c-gray-100); }

.perfil-aplica__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-8), 4vw, var(--sp-14)) clamp(var(--sp-10), 5vw, 76px);
  margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.perfil-item__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

.perfil-item__texto {
  margin-top: var(--sp-2);
  max-width: 320px;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-body);
}

/* ---------- 4. Em dia × o que falta ----------
   Duas colunas em cartão branco, como o cobre/não cobre das páginas de
   produto — o leitor já conhece esse par no site.

   Fundo cinza: no Figma a faixa clara é uma só, das respostas rápidas até
   aqui. Os cartões brancos só se destacam por causa dela. */

.perfil-conferencia { background: var(--c-gray-100); }

.perfil-conferencia__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
  align-items: start;
}

.perfil-coluna {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-card);
}

.perfil-coluna__titulo {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
}
/* --c-sim e --c-nao vêm de tokens.css: o mesmo par do "cobre / não cobre". */
.perfil-coluna__titulo--sim { color: var(--c-sim); }
.perfil-coluna__titulo--nao { color: var(--c-nao); }

.perfil-coluna__lista {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.perfil-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}
.perfil-check + .perfil-check { margin-top: var(--sp-2); }

/* .perfil-check__marca é desenhada em components.css, junto com a marca das
   páginas de seguro: as duas listas são a mesma coisa para o leitor. */

/* Alinhada à coluna da direita, não de ponta a ponta: o comentário é sobre
   aquela coluna, e a largura o diz antes do texto. Metade menos meio vão. */
.perfil-faixa {
  margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
  margin-left: auto;
  max-width: calc(50% - clamp(var(--sp-5), 3vw, var(--sp-8)) / 2);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--c-blue);
  border-radius: var(--r-input);
}
.perfil-faixa__texto {
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-navy);
}

/* ---------- 5. Os seguros que se aplicam ----------
   Sobre branco: é onde a faixa cinza termina e a página volta a respirar
   antes da checklist, que traz o seu próprio cartão cinza. */

.perfil-seguros__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.perfil-seguro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  background: var(--c-white);
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-input);
  transition: border-color var(--dur) var(--ease);
}
.perfil-seguro:hover { text-decoration: none; border-color: var(--c-blue); }

.perfil-seguro__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

.perfil-seguro__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.perfil-seguro__texto {
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--text-muted);
}

.perfil-seguro__barra {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  background: var(--c-blue);
  transition: background var(--dur) var(--ease);
}
.perfil-seguro:hover .perfil-seguro__barra { background: var(--c-blue-dark); }

.perfil-seguro__seta { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* ---------- 6. O que ter em mãos ---------- */

.perfil-documentos__cartao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 486px);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  align-items: stretch;
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  background: var(--c-gray-100);
  border-radius: var(--r-input);
}

.perfil-documentos__nota {
  margin-top: var(--sp-4);
  max-width: 400px;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text-body);
}

.perfil-documentos__lista {
  margin: clamp(var(--sp-6), 3vw, var(--sp-8)) 0 0;
  padding: 0;
  list-style: none;
}

.perfil-doc {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
}

/* .perfil-doc__marca é desenhada em components.css, junto com os outros dois
   checklists do site. */

/* A foto acompanha a altura da coluna de texto, seja ela qual for. */
.perfil-documentos__foto {
  position: relative;
  min-height: 220px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.perfil-documentos__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.perfil-documentos__acao { margin-top: clamp(var(--sp-5), 3vw, var(--sp-8)); }

/* ---------- 7. Como contratar ---------- */

.perfil-etapas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  margin: clamp(var(--sp-8), 4vw, var(--sp-10)) 0 0;
  padding: 0;
  list-style: none;
}

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

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

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

/* ---------- 8. Outros perfis ---------- */

.perfil-outros__grade {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
}

.perfil-outros__texto p {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text-body);
}

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

.perfil-ladrilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 146px;
  padding: var(--sp-4);
  text-align: center;
  color: var(--c-gray-300);
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-card);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

a.perfil-ladrilho:hover {
  text-decoration: none;
  color: var(--c-blue);
  border-color: var(--c-blue);
  transform: translateY(-2px);
}

.perfil-ladrilho__ico { display: block; }
.perfil-ladrilho__ico svg {
  width: 44px; height: 44px;
  color: inherit;
}

.perfil-ladrilho__nome {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text-muted);
}

.perfil-ladrilho--atual {
  color: var(--c-blue);
  border-color: var(--c-navy);
}
.perfil-ladrilho--atual .perfil-ladrilho__nome {
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* Ainda sem página própria: levam ao card daquele perfil na /para. */
.perfil-ladrilho--breve {
  box-shadow: none;
  background: transparent;
  border-color: var(--c-gray-150);
}
.perfil-ladrilho--breve .perfil-ladrilho__nome { color: var(--c-gray-300); }
.perfil-ladrilho--breve:hover { background: var(--c-white); box-shadow: var(--shadow-card); }
.perfil-ladrilho--breve:hover .perfil-ladrilho__nome { color: var(--text-muted); }

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

@media (max-width: 1080px) {
  .perfil-rapidas__grade,
  .perfil-seguros__grade,
  .perfil-aplica__grade,
  .perfil-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-outros__grade { grid-template-columns: minmax(0, 1fr); }
  .perfil-outros__ladrilhos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .perfil-hero::before {
    background: linear-gradient(to bottom, rgb(6 22 46 / 0.72) 0%, var(--c-navy-frio) 82%);
  }
  .perfil-hero__texto,
  .perfil-hero__lead { max-width: none; }

  .perfil-conferencia__grade { grid-template-columns: minmax(0, 1fr); }
  /* Sem duas colunas não há coluna da direita para acompanhar. */
  .perfil-faixa { max-width: none; }
  .perfil-documentos__cartao { grid-template-columns: minmax(0, 1fr); }
  /* A foto vai para o fim: quem rolou até aqui veio pela lista. */
  .perfil-documentos__foto { order: 1; }
}

@media (max-width: 680px) {
  .perfil-rapidas {
    margin-top: 0;
    padding-top: clamp(var(--sp-10), 6vw, var(--sp-14));
    background: var(--c-gray-100);
  }
  .perfil-rapidas__grade,
  .perfil-aplica__grade,
  .perfil-seguros__grade,
  .perfil-etapas { grid-template-columns: minmax(0, 1fr); }
  .perfil-outros__ladrilhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-hero__acoes .btn { width: 100%; }
}