/* ==========================================================================
   MUNDO SEGURO — Página "/para" (índice dos 7 perfis de cliente)
   Frame 145:43 do Figma. Reaproveita cargas.css (grade de duas colunas,
   coluna esquerda pegajosa) e seguros-obrigatorios.css (FAQ).
   ========================================================================== */

/* ==========================================================================
   1. HERO   (Figma: faixa de 348px; título 50px branco + linha azul)
   ========================================================================== */






/* ==========================================================================
   2. LISTA DE PERFIS
   ==========================================================================
   Mesma estrutura de /cargas: intro à esquerda (492px, pegajosa) e fichas à
   direita (700px). O que muda é o conteúdo da coluna esquerda, que aqui ganha
   o atalho para /cargas. */

.para-lista {
  background: var(--c-gray-100);
  padding-block: var(--sp-16) var(--sp-20);
}

.para-lista__grid {
  display: grid;
  grid-template-columns: minmax(320px, 492px) minmax(0, 700px);
  gap: clamp(var(--sp-8), 4vw, 70px);
  align-items: start;
  justify-content: center;
}

/* A coluna inteira gruda, não só a intro: o atalho precisa aparecer logo
   abaixo dela quando for revelado. */
.para-coluna {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
  display: grid;
  gap: var(--sp-6);
}

.para-intro {
  padding: var(--sp-10) clamp(var(--sp-6), 3vw, 47px);
  background: var(--c-white);
  border-radius: 14px;
}

.para-intro__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--c-navy-frio);
}

.para-intro__text {
  margin-top: var(--sp-6);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--c-navy-frio);
}

/* ---------- atalho para /cargas ---------- */

.para-atalho {
  padding: var(--sp-8) clamp(var(--sp-6), 3vw, 47px);
  background: var(--c-blue);
  border-radius: 6px;
}

.para-atalho__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-navy);
}

.para-atalho__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--c-navy-frio);
}

.para-atalho__btn {
  margin-top: var(--sp-5);
  background: var(--c-white);
  border-radius: var(--r-input);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
}
.para-atalho__btn:hover { background: var(--c-gray-100); }

/* ---------- fichas de perfil ---------- */

.para-perfis { display: grid; gap: 19px; }

/* Figma: 700x167, ícone à esquerda num quadrado de 311px. Sem o
   deslocamento de 9px que os cards de /cargas têm — aqui o ícone é vetor
   sobre o próprio cartão, não foto sangrando para fora. */
/* A coluna do ícone acompanha o tamanho dele: com o ícone reduzido à metade,
   manter os 311px do Figma deixaria 246px de vazio e empurraria o texto para
   longe do título. */
.perfil-card {
  position: relative;
  display: grid;
  grid-template-columns: 156px 1fr;
  align-items: center;
  min-height: 167px;
  background: var(--c-white);
  border-radius: 6px;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.perfil-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.perfil-card__icone {
  display: grid;
  place-items: center;
  align-self: center;
  height: 100%;
  padding: var(--sp-5);
}
/* Metade do tamanho do Figma (134px): o ícone é apoio à leitura do título,
   não o elemento principal da ficha. */
.perfil-card__icone svg {
  width: clamp(48px, 4.5vw, 67px);
  height: auto;
}

.perfil-card__body { padding: var(--sp-6) clamp(var(--sp-6), 3vw, 44px) var(--sp-6) 0; }

.perfil-card__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}

.perfil-card__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-navy-frio);
}

.perfil-card__arrow {
  position: absolute;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  color: var(--c-gray);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.perfil-card__arrow svg { width: 9px; height: 9px; }
.perfil-card:hover .perfil-card__arrow {
  color: var(--c-blue);
  transform: translate(2px, -2px);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1100px) {
  .para-lista__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  /* sem coluna lateral não há o que acompanhar */
  .para-coluna { position: static; }
}

@media (max-width: 720px) {

  .perfil-card {
    grid-template-columns: 96px 1fr;
    min-height: 0;
    padding: var(--sp-4) 0;
  }
  .perfil-card__icone { padding: var(--sp-3); }
  .perfil-card__icone svg { width: 36px; }
  .perfil-card__body { padding: var(--sp-4) var(--sp-10) var(--sp-4) 0; }
  .perfil-card__arrow { bottom: var(--sp-3); right: var(--sp-3); }
}