/* Rodapé (nó 59:100) — referencia/figma-dados/rodape.md
   Fundo fundo-claro, com a linha vertical da grade. */

.rodape {
  position: relative;
  overflow: hidden;
  background: var(--fundo-claro);
}

.rodape__interno {
  display: flex;
  align-items: flex-start;
  min-height: 202px;
  padding: 27.7px var(--margem-dir) 24px calc(var(--conteudo-x) - 13px);   /* logo em x 131 */
}

/* Ponta de baixo do losango gigante das seções 4 e 6 (63:168) */
.rodape-losango {
  position: absolute;
  /* Referência do losango: a ponta de baixo do "V" fica a 270px do topo do rodapé
     (ponta = centro + 1261.4px; o JS alinha os pedaços do contato e das soluções a este) */
  top: calc(270px - 1261.4px - 877.5px);
  left: var(--losango-x);
  width: 1813.059px;
  height: 1755.001px;
  border: var(--linha-grade) solid var(--fundo-cinza);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* ---------- Logo + copyright (59:164) ---------- */
.logo-copytright {
  position: relative;
  flex: none;
  width: 310px;   /* navegação em x 441 */
  padding-top: 27.3px;   /* logo em y 55 */
}

/* Logo do header ampliado 1.3× (30.398px) */
.logo-nome--rodape {
  display: block;
  width: 213.2px;
  height: 36.1px;
  font-size: 30.398px;
}

.logo-nome--rodape .logo-nome__texto {
  top: 1.3px;
}

.logo-nome--rodape .logo-nome__texto + .logo-nome__simbolo + .logo-nome__texto {
  left: 118.44px;
}

.logo-nome--rodape .logo-nome__simbolo {
  top: 4.51px;
  left: 89.35px;
  width: 26.642px;
  height: 27.073px;
}

.logo-copytright__texto {
  margin: 7.5px 0 0 3px;   /* texto em (133, 98.6) */
  color: #000;
  font-family: var(--fonte-mono);
  font-weight: 300;
  font-size: var(--fs-etiqueta);
  letter-spacing: 1.2px;
  line-height: normal;
  white-space: nowrap;
}

/* Cidade (plano de SEO 1.5): sede em BH, atendimento remoto */
.logo-copytright__cidade {
  max-width: 300px;
  margin: 8px 0 0 3px;
  color: var(--cinza-texto);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Link da política de privacidade, abaixo do copyright */
.logo-copytright__privacidade {
  display: inline-block;
  margin: 10px 0 0 3px;
  color: var(--cinza-texto);
  font-size: 0.8125rem;
  text-decoration: underline 1px var(--logo-claro);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .logo-copytright__privacidade:hover {
    color: var(--navy-kalina);
    text-decoration-color: var(--dourado-kalina);
  }
}

/* ---------- Colunas de links (navegacao) ---------- */
.navegacao {
  position: relative;
  flex: none;
}

.navegacao + .navegacao {
  margin-left: 39px;   /* "Fale com a gente" em x 623 */
}

.navegacao__titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-weight: 300;
  font-size: var(--fs-etiqueta);
  letter-spacing: 1.2px;
  line-height: normal;
  text-transform: uppercase;
}

.navegacao__titulo::after {
  content: "";
  width: 60px;
  height: 1px;
  background: var(--dourado-kalina);
}

.navegacao__lista {
  margin-top: 7.7px;   /* links em y 51 */
  padding-left: 2px;
  color: var(--texto-claro);
  font-size: 0.875rem;   /* 14 */
  line-height: 30px;
}

.navegacao__lista a {
  display: inline-block;
}

/* ---------- Gatinhas (vieram da antiga seção "Sobre", 54:141) ---------- */
.rodape__gatinhas {
  position: relative;
  z-index: 1;
  flex: none;
  margin: 4px 0 0 auto;
  text-align: center;
}

/* A diagonal do rodapé passa por trás da legenda */
.rodape__gatinhas .katara-belina__legenda {
  display: inline-block;
  padding: 0 6px;
  background: var(--fundo-claro);
}

/* ---------- Polaroides (54:141): composição fixa de 133 × 86, medidas do Figma ---------- */
.katara-belina {
  margin: 19px 0 0;
}

.katara-belina__fotos {
  position: relative;
  width: 133px;
  height: 86px;
  margin-inline: auto;
}

.katara-belina__fotos > * {
  position: absolute;
}

.katara-belina__losango {
  top: 22.78px;
  left: 45.28px;
  width: 52.074px;
  height: 52.074px;
  border: 0.75px solid var(--fundo-cinza);
  transform: rotate(45deg);
}

.polaroide {
  width: 53.903px;
  height: 65.829px;
  background: var(--branco);
  box-shadow: 0 0 9px 0 rgb(0 0 0 / 0.1);
}

.polaroide--belina {
  top: 6.44px;
  left: 70.68px;
  transform: rotate(16.96deg);
}

.polaroide--katara {
  top: 10.36px;
  left: 7.6px;
  transform: rotate(-15deg);
}

.polaroide__foto {
  width: 47.9px;
  height: 48.2px;
  max-width: none;
  background: #000;
  object-fit: cover;
}

.polaroide__foto--belina {
  top: 10.49px;
  left: 74.92px;
  transform: rotate(16.99deg);
}

.polaroide__foto--katara {
  top: 14.38px;
  left: 9.15px;
  transform: rotate(-15.02deg);
}

.polaroide__nome {
  color: #000;
  font-family: "Salsa", cursive;
  font-size: 7.5px;
  line-height: normal;
  white-space: nowrap;
}

.polaroide__nome--belina {
  top: 62.15px;
  left: 89.36px;
  transform: translate(-50%, -50%) rotate(17.16deg);
}

.polaroide__nome--katara {
  top: 66.87px;
  left: 40.64px;
  transform: translate(-50%, -50%) rotate(-15deg);
}

/* A Katara fica por cima da Belina, como no Figma */
.polaroide--katara,
.polaroide__foto--katara,
.polaroide__nome--katara {
  z-index: 1;
}

.alfinete {
  z-index: 2;
  width: 3.195px;
  height: 6.096px;
  max-width: none;
}

.alfinete--belina {
  top: 4.06px;
  left: 106.48px;
  transform: rotate(-15deg);
}

.alfinete--katara {
  top: 7.89px;
  left: 25.92px;
  transform: rotate(25.84deg);
}

.katara-belina__legenda {
  margin-top: 2.4px;
  color: var(--texto-claro);
  font-style: italic;
  font-size: 0.75rem;   /* 12 */
  line-height: 20px;
}

.katara-belina__legenda strong {
  font-weight: 600;
}

/* Desktop: as gatinhas ficam dentro do "V" do losango, com a legenda em cima (onde o V é mais largo).
   O rodapé mantém a altura do Figma: a ponta do V fica cortada, abaixo dele */
@media (min-width: 1180px) {
  .rodape__gatinhas {
    position: absolute;
    top: 20px;
    left: calc(var(--losango-x) + 906.53px - 20.5px);   /* x da ponta do V */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 340px;
    margin: 0;
    transform: translateX(-50%);
  }

  .rodape__gatinhas .katara-belina__legenda {
    order: -1;
    margin: 0 0 10px;
  }
}

/* ---------- Celular e tablet ---------- */
/* Some junto com o pedaço do contato (cards empilhados) */
@media (max-width: 1179px) {
  .rodape-losango {
    display: none;
  }
}

/* ---------- Faixa "Soluções" (links para as páginas de cada solução; plano de SEO, 2026-10-03) ----------
   Fica abaixo das colunas do Figma, para não mexer no arranjo do rodapé nem na posição das gatinhas */
.rodape-solucoes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding: 16px var(--margem-dir) 22px calc(var(--conteudo-x) - 10px);   /* alinhada ao copyright */
  border-top: 1px solid var(--fundo-cinza);
  background: var(--fundo-claro);   /* a diagonal do losango (home) passa por trás */
}

.rodape-solucoes .navegacao__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 0;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 26px;
}

.rodape-solucoes [aria-current] {
  color: var(--navy-kalina);
}

@media (max-width: 767px) {
  /* Celular: rodapé só com logo + copyright (Julio, 2026-09-25) */
  .rodape-solucoes {
    display: none;
  }

  .rodape__interno {
    flex-wrap: wrap;
    gap: 32px 40px;
    padding: 40px var(--margem-dir) 40px var(--conteudo-x);
  }

  .logo-copytright {
    width: 100%;
    padding-top: 0;
  }

  .logo-copytright__texto {
    white-space: normal;
  }

  .navegacao + .navegacao {
    margin-left: 0;
  }
}