/* ==========================================================================
   SOBRE  (/sobre)  —  frame /sobre do Figma (398:163)
   ==========================================================================
   A única página do site SEM hero de foto. No lugar dele, o Figma abre com a
   MARCA EM ESCALA: o "MS" gigante em azul, ocupando a largura do conteúdo,
   com o H1 em caixas pretas por cima. É assinatura institucional, não venda —
   e é o que distingue esta página das outras 57 sem precisar de um sistema
   novo de componentes.

   Blocos, na ordem do Figma:
     .sobre-abertura   o MS gigante e o H1 em caixas
     .sobre-quem       texto à esquerda, cartão de números à direita
     .sobre-confia     "Quem confia": logos dos segurados
     .sobre-frentes    três cartões azuis numerados
     .sobre-ciclo      antes / durante / depois, com foto e etiqueta
     .sobre-perfis     três cartões de faixa azul
     .sobre-onde       faixa azul com endereço, mapa e contato
   ========================================================================== */

/* ---------- 1. Abertura ---------- */

.sobre-abertura { padding-block: var(--sp-6) clamp(var(--sp-10), 5vw, var(--sp-16)); }

.sobre-migalhas { margin-bottom: clamp(var(--sp-8), 5vw, var(--sp-14)); }

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

/* A marca e o título ocupam a mesma área: o H1 flutua sobre o MS. O
   `grid-area: 1/1` nos dois é o que empilha sem tirar nenhum do fluxo, então
   a altura da seção continua sendo a altura real do desenho. */
.sobre-marca {
  display: grid;
  align-items: center;
  justify-items: start;
}
.sobre-marca__ms,
.sobre-marca__titulo { grid-area: 1 / 1; }

/* A marca ocupa a COLUNA INTEIRA, como no Figma, onde ela mede 977px numa
   coluna de ~1002. Travar em 977px aqui deixava-a em 72% da nossa coluna de
   1360 e a abertura perdia a escala que é o ponto do desenho. */
.sobre-marca__ms {
  width: 100%;
  height: auto;
  color: var(--c-blue);
}
.sobre-marca__ms svg { display: block; width: 100%; height: auto; }

/* Duas caixas pretas, uma por linha, com um fio de respiro entre elas — é
   assim no Figma, onde as duas medem 66px de altura e ficam 5px separadas.
   Cada linha é um <span> próprio: deixar a quebra por conta da largura dava
   três linhas coladas, sem o intervalo.

   `display: table` é o que faz a caixa abraçar o texto e ainda assim ocupar
   linha inteira — com inline-block as duas caixas se emendariam. */
.sobre-marca__titulo {
  margin: 0;
  font-size: clamp(var(--fs-24), 3.2vw, 44px);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-white);
}
.sobre-marca__titulo span {
  display: table;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.2em 0.5em;
  background: var(--c-navy);
}
.sobre-marca__titulo span + span { margin-top: 5px; }

/* ---------- 2. Quem somos + números ---------- */

/* Branco até "Antes, durante e depois": no Figma a faixa cinza começa só
   no ciclo, e vai dali até antes das seguradoras parceiras. */
.sobre-quem { background: var(--c-white); }

.sobre-quem__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}

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

/* O primeiro parágrafo é a tese da página e vem em negrito, como no Figma. */
.sobre-quem__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-navy);
}
.sobre-quem__texto {
  margin-top: var(--sp-5);
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- O cartão de números ---------- */

.sobre-numeros {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-5);
  min-height: 520px;
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
}

/* O posicionamento vai no <img>, e não no <picture>: o site define
   `picture { display: contents }`, então a tag não gera caixa nenhuma e
   qualquer regra de posição nela é ignorada. Sem isso, a foto entrava como
   item do flex e empurrava o cartão para o dobro da altura. */
.sobre-numeros__foto img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Véu escuro: sem ele os valores em branco somem no céu claro da foto. */
.sobre-numeros::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(2 12 28 / 0.25) 0%, rgb(2 12 28 / 0.72) 100%);
}

.sobre-numeros__titulo {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

/* Cada valor num bloco de vidro, como no desenho. */
.sobre-numero {
  padding: var(--sp-4) var(--sp-5);
  background: rgb(2 12 28 / 0.55);
  backdrop-filter: blur(6px);
  border-radius: var(--r-input);
  border-left: 3px solid var(--c-blue);
}
.sobre-numero__valor {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--c-blue);
}
.sobre-numero__rotulo {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: rgb(255 255 255 / 0.88);
}

.sobre-quem__fonte {
  margin-top: var(--sp-4);
  font-size: var(--fs-12);
  color: var(--c-gray);
}

/* ---------- 3. Quem confia ---------- */

.sobre-confia { background: var(--c-white); padding-top: 0; }

.sobre-confia__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  align-items: center;
}

.sobre-confia__texto {
  max-width: 42ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

/* Quatro por vez, em duas fileiras — a grade do Figma. O --carousel-col é
   lido pelo carrossel global (ver components.css). */
/* `min-width: 0` não é enfeite: como item de grade, o carrossel nasce com
   min-width:auto e cresce até caber a trilha inteira — a faixa passava de
   1100px dentro de uma coluna de 790 e mostrava 3 logos em vez de 4, com o
   cálculo de porcentagem resolvendo contra a largura errada. */
.sobre-confia__carrossel {
  --conf-vao: var(--sp-6);
  --conf-por-vez: 4;
  --carousel-col: calc((100% - (var(--conf-por-vez) - 1) * var(--conf-vao)) / var(--conf-por-vez));

  min-width: 0;
}
/* `width: 100%` torna a largura da trilha DEFINIDA. Sem isso, a porcentagem
   de --carousel-col não tem contra o que resolver, as colunas caem para
   max-content e a trilha cresce até somar todas elas — era o que fazia a
   faixa mostrar 3 logos numa coluna dimensionada para 4. Na home não
   acontece porque lá o carrossel vive num bloco, e não numa célula de grade. */
.sobre-confia__trilha {
  width: 100%;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: var(--sp-5) var(--conf-vao);
}

.segurado {
  display: grid;
  place-items: center;
  padding: var(--sp-2);
}
.segurado img {
  width: 100%;
  max-width: 160px;
  height: auto;
  mix-blend-mode: multiply;   /* some o fundo branco do arquivo sobre o cinza */
}

/* ---------- 4. O que fazemos ---------- */

.sobre-frentes__cabeca,
.sobre-ciclo__cabeca,
.sobre-perfis__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-10));
  align-items: start;
}

.sobre-intro {
  max-width: 56ch;
  font-size: var(--fs-16);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-body);
}

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

/* Cartão azul claro com o número grande no canto, sobre uma diagonal mais
   saturada — é o recurso que dá relevo sem sombra nenhuma. */
.sobre-frente {
  position: relative;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  overflow: hidden;
  background: rgb(0 182 255 / 0.12);
  border-radius: var(--r-input);
}
.sobre-frente::after {
  content: '';
  position: absolute;
  right: -30%;
  bottom: -60%;
  width: 70%;
  height: 160%;
  background: rgb(0 182 255 / 0.16);
  transform: rotate(24deg);
}
.sobre-frente__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.sobre-frente__texto {
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--text-body);
}
.sobre-frente__num {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-4);
  z-index: 1;
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-blue);
}

/* ---------- 5. Antes, durante e depois ---------- */

.sobre-ciclo { background: var(--c-gray-100); }

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

.sobre-etapa {
  position: relative;
  padding: var(--sp-4);
  background: var(--c-white);
  border-radius: var(--r-card);
}

/* Pelo mesmo motivo do cartão de números: `picture { display: contents }` é
   global, então quem recebe forma, recorte e proporção é o <img>. */
.sobre-etapa__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 302 / 293;
  object-fit: cover;
  background: var(--c-gray-100);
  border-radius: var(--r-card);
}

/* A etiqueta encosta na borda ESQUERDA do cartão e invade a foto — no Figma
   ela começa no x do cartão, não no da foto. */
.sobre-etapa__quando {
  position: absolute;
  left: 0;
  top: var(--sp-8);
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-blue);
}

.sobre-etapa__corpo { padding: var(--sp-5) var(--sp-2) var(--sp-2); }
.sobre-etapa__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.sobre-etapa__texto {
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- 6. Seguradoras parceiras, nesta página ---------- */

/* O Figma põe a faixa dentro de um cartão de borda fina. O bloco em si vem de
   tools/lib/seguradoras.mjs e é o mesmo da home. */
.sobre .seguradoras {
  padding: clamp(var(--sp-6), 3vw, var(--sp-10)) clamp(var(--sp-5), 3vw, var(--sp-8));
  border: 1px solid var(--c-gray-150);
  border-radius: var(--r-card);
}
.seguradoras__intro {
  max-width: 56ch;
  font-size: var(--fs-16);
}

/* ---------- 7. Quem procura ---------- */

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

.sobre-perfil { border-radius: var(--r-card); overflow: hidden; }
.sobre-perfil__titulo {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  background: var(--c-blue);
}
.sobre-perfil__texto {
  padding: var(--sp-5);
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--text-body);
  background: var(--c-gray-100);
}

/* ---------- 8. Onde estamos ---------- */

.sobre-onde {
  background: var(--c-blue);
  padding-block: clamp(var(--sp-12), 7vw, var(--sp-20));
}

.sobre-onde__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
  align-items: start;
}

.sobre-onde__titulo {
  max-width: 7ch;
  font-size: clamp(var(--fs-28), 2.6vw, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-navy);
}

/* Azul-acinzentado translúcido: é o rótulo do Figma, que fica um degrau
   abaixo do texto sem virar branco nem preto. */
.sobre-onde__rotulo {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(2 12 28 / 0.45);
}

.sobre-onde__endereco {
  margin-top: var(--sp-3);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 1.5;
  color: var(--c-navy);
}

.sobre-onde__sede { margin-top: clamp(var(--sp-6), 4vw, var(--sp-10)); }

.sobre-onde__contatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
}

.sobre-onde__fone {
  display: block;
  margin-top: var(--sp-3);
  font-size: clamp(var(--fs-24), 2.4vw, 32px);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
a.sobre-onde__fone:hover { color: var(--c-navy); text-decoration: underline; }

.sobre-onde__whats {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  color: var(--c-navy);
  background: var(--c-green);
  border-radius: var(--r-btn);
}
.sobre-onde__whats:hover { text-decoration: none; filter: brightness(0.94); }
.sobre-onde__whats svg { width: 22px; height: 22px; fill: currentColor; }

.sobre-onde__texto {
  margin-top: var(--sp-3);
  font-size: var(--fs-20);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--c-navy);
}
.sobre-onde__texto strong { font-weight: var(--fw-semibold); }

/* ---------- O mapa ----------
   Só carrega quando a pessoa clica. O OpenStreetMap é gratuito e não pede
   chave, mas continua sendo um terceiro: deixar o iframe no HTML faria toda
   visita à /sobre abrir conexão com outro domínio antes de qualquer escolha
   sobre cookies. O cartão abaixo é o estado fechado. */
.sobre-mapa {
  position: relative;
  aspect-ratio: 634 / 330;
  overflow: hidden;
  background: var(--c-gray-200);
  border-radius: var(--r-lg);
}
.sobre-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

.sobre-mapa__abrir {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  width: 100%;
  height: 100%;
  padding: var(--sp-6);
  text-align: center;
  cursor: pointer;
  background: var(--c-gray-200);
  border: 0;
}
.sobre-mapa__abrir:hover { background: var(--c-gray-300); }

.sobre-mapa__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--c-navy);
  border-radius: 50%;
}
.sobre-mapa__ico svg { width: 20px; height: 20px; fill: var(--c-blue); }

.sobre-mapa__chamada {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}
.sobre-mapa__nota {
  max-width: 38ch;
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--c-ink);
}

.sobre-mapa__link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-navy);
}

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

@media (max-width: 1080px) {
  .sobre-quem__grade,
  .sobre-confia__grade,
  .sobre-onde__grade { grid-template-columns: minmax(0, 1fr); }
  .sobre-frentes__cabeca,
  .sobre-ciclo__cabeca,
  .sobre-perfis__cabeca { grid-template-columns: minmax(0, 1fr); }
  .sobre-onde__titulo { max-width: none; }
  .sobre-confia__carrossel { --conf-por-vez: 3; }
}

@media (max-width: 860px) {
  .sobre-frentes__grade,
  .sobre-ciclo__grade,
  .sobre-perfis__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre-onde__contatos { grid-template-columns: minmax(0, 1fr); }
  .sobre-numeros { min-height: 420px; }
}

@media (max-width: 680px) {
  .sobre-frentes__grade,
  .sobre-ciclo__grade,
  .sobre-perfis__grade { grid-template-columns: minmax(0, 1fr); }
  .sobre-confia__carrossel { --conf-por-vez: 2; }
  .sobre-marca__titulo { max-width: none; }
}