/**
 * Smart Fit - Footer da nova marca (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens da marca).
 *
 * FONTE DA VERDADE: o footer de https://www.smartfit.com.br/. As medidas abaixo
 * foram lidas na folha de estilo do institucional (Tailwind) em 31/08/2026 e
 * convertidas para px. Onde o institucional usa utilitarios, a conversao e:
 *   gap-1 = 4px   gap-2 = 8px    gap-4 = 16px   gap-6 = 24px
 *   gap-8 = 32px  gap-10 = 40px  gap-12 = 48px  gap-16 = 64px
 *   text-1 = 12px  text-2 = 14px  text-base = 16px  leading-normal = 1.5
 *
 * Escrito mobile-first. O institucional troca de layout em 1025px (variantes
 * `mobile:` = max-width 1024px e `desktop:` = min-width 1025px), e nao em 768px:
 * por isso o unico @media daqui e (min-width: 1025px). Em tablet, portanto, vale
 * o layout empilhado com o acordeao - igual ao institucional.
 *
 * MOBILE (<= 1024px):
 *   recuo interno ....................... 40px topo / 80px base (pt-10 pb-20)
 *   espaco entre blocos ................. 32px
 *   ordem ............................... redes (centralizadas) > logo > regua >
 *                                         "Expandir mapa do site" > regua >
 *                                         aviso legal > endereco > CNPJ
 *   reguas .............................. 1px branco 10%
 *   rotulo do acordeao .................. 14px / 500 / branco
 *   grupos do mapa do site .............. centralizados, sem regua no titulo,
 *                                         48px... (gap-10) 40px entre grupos
 *   aviso legal ......................... 12px / 500 / branco 70%
 *   razao social ........................ 14px / 700 / branco
 *   endereco e CNPJ ..................... 14px / 500 / branco 50%
 *
 * DESKTOP (>= 1025px):
 *   recuo interno ....................... 40px topo / 80px base
 *   espaco entre logo, linha de meta e grade ... 64px (gap-16)
 *   linha de meta ....................... aviso legal a esquerda,
 *                                         redes sociais a direita
 *   redes sociais ....................... 6 icones de 20px, gap 24px
 *   grade ............................... 281px | 1fr, vao de 64px
 *   coluna institucional ................ 281px (CNPJ ancorado na base)
 *   navegacao ........................... 3 colunas, gap 32px, linhas com 48px
 *   titulo de coluna .................... 12px / 700 / uppercase + regua de
 *                                         1px branco 15% a 16px do texto
 *   titulo -> 1o item ................... 16px    entre itens: 16px
 *   item de navegacao ................... 16px / 500 / branco 50%
 *                                         hover: branco + sublinhado
 *
 * DESVIO CONSCIENTE: o recuo lateral segue o container do tema (--sf-container-max
 * 1280px + gutter) e nao o container-smft do institucional (max 1360px, gutter
 * 40px). A largura util de conteudo e a mesma (1280px); manter o container do
 * tema e o que deixa o footer alinhado com o header e as secoes do blog.
 */

/* ============================================================== BASE (mobile) */

.sf-footer {
  /* Amplitude do arco: 138.61px em um frame de 1440 (9.63vw). */
  --sf-footer-curve-height: clamp(28px, 9.63vw, 139px);

  position: relative;
  background-color: var(--sf-black, #000);
  color: var(--sf-on-dark-strong, #fff);
  font-family: var(--sf-font-text, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.5;
  padding-top: calc(var(--sf-footer-curve-height) + 40px);
  padding-bottom: 80px;
}

/**
 * Curva ("sorriso") no topo do footer.
 *
 * No Figma a curva e um vetor preto (desktop id 50:44, 1596x323) posicionado
 * acima do retangulo do footer: nas bordas o preto sobe e no centro encosta na
 * borda do footer. A silhueta e identica a recortar essa mesma curva do topo do
 * proprio footer, e recortar evita cobrir conteudo da secao anterior (a home
 * tem .bg-gray e #whats logo acima). Por isso usamos mask.
 *
 * O path e o trecho visivel da aresta superior do vetor do Figma dentro do
 * frame de 1440, normalizado para viewBox 0 0 1440 139 - nao e aproximacao por
 * elipse, e a curva original.
 *
 * Camada 1 = faixa do topo com o arco recortado.
 * Camada 2 = resto do footer, opaco.
 * Sem suporte a mask o footer fica com o topo reto (degradacao aceitavel).
 */
@supports (mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) or (-webkit-mask-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) {
  .sf-footer {
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 139' preserveAspectRatio='none'%3E%3Cpath d='M-9.04 0C154.23 61.94 402.11 138.61 730.06 138.61C1057.95 138.61 1305.83 61.94 1469.04 0L1469.04 139L-9.04 139Z' fill='%23fff'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--sf-footer-curve-height), 100% calc(100% - var(--sf-footer-curve-height));
    -webkit-mask-position: top center, bottom center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 139' preserveAspectRatio='none'%3E%3Cpath d='M-9.04 0C154.23 61.94 402.11 138.61 730.06 138.61C1057.95 138.61 1305.83 61.94 1469.04 0L1469.04 139L-9.04 139Z' fill='%23fff'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
    mask-size: 100% var(--sf-footer-curve-height), 100% calc(100% - var(--sf-footer-curve-height));
    mask-position: top center, bottom center;
    mask-repeat: no-repeat, no-repeat;
  }
}

/**
 * Respiro antes do footer.
 *
 * Vai na ultima secao de conteudo da pagina, nao no footer, porque o topo do
 * footer e uma curva recortada por mask: uma margem no proprio footer empurraria
 * o arco junto e a curva descolaria do conteudo. Como padding da secao anterior,
 * o vao aparece dentro da area branca de onde a curva nasce.
 *
 * Os valores sao maiores do que parecem porque o arco sobe ate 139px nas bordas:
 * o conteudo precisa de folga para nao parecer engolido pelos cantos preto cheio.
 *
 * Usado na home, na secao #recentes, desde que a chamada de WhatsApp que ficava
 * entre a listagem e o footer foi removida.
 */
.sf-antes-do-footer {
  padding-bottom: 72px;
}

@media (min-width: 768px) {
  .sf-antes-do-footer {
    padding-bottom: 120px;
  }
}

/**
 * Container proprio: o .container do Bootstrap nao bate com o grid do desenho.
 * No mobile o recuo e de 24px; no desktop, de 80px (conteudo de 1280).
 */
.sf-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: calc(var(--sf-container-max, 1280px) + var(--sf-container-gutter, 80px) * 2);
  margin-inline: auto;
  padding-inline: 24px;
}

/**
 * Aviso legal e redes sociais formam uma linha unica no desktop. No mobile eles
 * moram em pontos diferentes da pilha, entao o agrupador sai do fluxo com
 * display:contents e os dois voltam a ser itens diretos de .sf-footer__inner -
 * e assim continuam obedecendo os `order` abaixo.
 */
.sf-footer__meta {
  display: contents;
}

/* Ordem do mobile: redes > logo > mapa do site > aviso > institucional. */
.sf-footer__social {
  order: 1;
}

.sf-footer__logo {
  order: 2;
}

.sf-footer__sitemap {
  order: 3;
}

.sf-footer__disclaimer {
  order: 4;
}

.sf-footer__company {
  order: 5;
}

/* Logotipo -------------------------------------------------------------- */
.sf-footer__logo {
  display: block;
}

.sf-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Redes sociais --------------------------------------------------------- */
.sf-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--sf-on-dark-strong, #fff);
  transition: opacity var(--sf-transition, 0.2s ease);
}

.sf-footer__social svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* No institucional o hover das redes e opacidade, nao troca de cor. */
.sf-footer__social a:hover,
.sf-footer__social a:focus-visible {
  opacity: 0.7;
}

/* Mapa do site (acordeao no mobile) ------------------------------------- */
.sf-footer__sitemap {
  border-top: 1px solid var(--sf-divider-on-dark-soft, rgba(255, 255, 255, 0.1));
  border-bottom: 1px solid var(--sf-divider-on-dark-soft, rgba(255, 255, 255, 0.1));
  padding-block: 32px;
}

.sf-footer__sitemap-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 8px;
  cursor: pointer;
  list-style: none;
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.5;
  color: var(--sf-on-dark-strong, #fff);
}

/* Remove o triangulo nativo do <summary>. */
.sf-footer__sitemap-toggle::-webkit-details-marker {
  display: none;
}

.sf-footer__sitemap-toggle::marker {
  content: '';
}

.sf-footer__chevron {
  flex: 0 0 auto;
  transition: transform var(--sf-transition, 0.2s ease);
}

.sf-footer__sitemap[open] .sf-footer__chevron {
  transform: rotate(180deg);
}

.sf-footer__sitemap[open] .sf-footer__sections {
  margin-top: 32px;
}

/* Colunas de navegacao -------------------------------------------------- */
.sf-footer__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* Vale so se algum filtro colocar mais de um grupo na mesma celula. */
.sf-footer__group + .sf-footer__group {
  margin-top: 40px;
}

/* No mobile os grupos ficam centralizados e o titulo nao tem regua. */
.sf-footer__cell {
  text-align: center;
}

.sf-footer__title {
  margin: 0 0 16px;
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.5;
  letter-spacing: var(--sf-ls-overline, 0);
  text-transform: uppercase;
  color: var(--sf-on-dark-strong, #fff);
}

/**
 * Titulo de coluna que tem destino proprio (hoje so "Produtos e Servicos").
 *
 * Herda tudo do h2 e nao ganha sublinhado em repouso: o titulo precisa continuar
 * lendo como titulo de coluna, e nao como o primeiro item da lista. O sublinhado
 * aparece na interacao, que e o que avisa que ali da para clicar.
 */
.sf-footer__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--sf-transition, 0.2s ease);
}

.sf-footer__title-link:hover,
.sf-footer__title-link:focus-visible {
  color: var(--sf-yellow, #ffc409);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sf-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-footer__list li + li {
  margin-top: 16px;
}

.sf-footer__list a,
.sf-footer__list .sf-footer__pending {
  display: inline-block;
  font-size: var(--sf-fs-body, 1rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.5;
  color: var(--sf-on-dark-muted, rgba(255, 255, 255, 0.5));
  text-decoration: none;
  transition: color var(--sf-transition, 0.2s ease);
}

/* Hover do institucional: branco cheio + sublinhado (nao amarelo). */
.sf-footer__list a:hover,
.sf-footer__list a:focus-visible {
  color: var(--sf-on-dark-strong, #fff);
  text-decoration: underline;
}

/* Aviso legal ----------------------------------------------------------- */
.sf-footer__disclaimer {
  margin: 0;
  font-size: var(--sf-fs-caption, 0.75rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

/* O link do aviso e branco cheio e sempre sublinhado. */
.sf-footer__disclaimer a {
  color: var(--sf-on-dark-strong, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--sf-transition, 0.2s ease);
}

.sf-footer__disclaimer a:hover,
.sf-footer__disclaimer a:focus-visible {
  opacity: 0.7;
}

/* Bloco institucional --------------------------------------------------- */
.sf-footer__company {
  display: flex;
  flex-direction: column;
  /* Aviso legal -> razao social -> CNPJ tem 24px entre si no institucional. */
  gap: 24px;
  /**
   * O vao da pilha e de 32px, mas do aviso legal para a razao social sao 24px:
   * os 8px de diferenca saem aqui em vez de fragmentar o gap do container.
   */
  margin-top: -8px;
  text-align: center;
}

.sf-footer__company-name,
.sf-footer__company-address,
.sf-footer__cnpj {
  margin: 0;
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.5;
}

/* Razao social em negrito e branco cheio. */
.sf-footer__company-name {
  font-weight: var(--sf-fw-bold, 700);
  color: var(--sf-on-dark-strong, #fff);
}

/* Endereco logo abaixo da razao social, com 4px de respiro (gap-1). */
.sf-footer__company-address {
  margin-top: 4px;
  color: var(--sf-on-dark-muted, rgba(255, 255, 255, 0.5));
}

.sf-footer__cnpj {
  color: var(--sf-on-dark-muted, rgba(255, 255, 255, 0.5));
}

/* Foco visivel ---------------------------------------------------------- */
.sf-footer a:focus-visible,
.sf-footer summary:focus-visible {
  outline: 2px solid var(--sf-yellow, #FFC409);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ========================================================= DESKTOP (>= 1025) */

@media (min-width: 1025px) {
  .sf-footer {
    font-size: var(--sf-fs-body, 1rem);
  }

  /**
   * Grade do desktop: institucional (281px) | navegacao (resto), vao de 64px.
   * Logo e a linha de meta ocupam a largura inteira. O row-gap de 64px cuida
   * dos tres espacos verticais (logo -> meta -> grade).
   */
  .sf-footer__inner {
    display: grid;
    grid-template-columns: 281px minmax(0, 1fr);
    column-gap: 64px;
    row-gap: 64px;
    /* 5.56vw = 80px em 1440, o recuo do institucional e das outras secoes. */
    padding-inline: clamp(1.5rem, 5.56vw, var(--sf-container-gutter, 80px));
  }

  .sf-footer__logo {
    order: 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Linha unica: aviso legal a esquerda, redes sociais a direita. */
  .sf-footer__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sf-footer__disclaimer {
    order: 0;
    text-align: left;
  }

  .sf-footer__social {
    order: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .sf-footer__company {
    order: 0;
    grid-column: 1;
    grid-row: 3;
    /* CNPJ ancorado na base da coluna. */
    justify-content: space-between;
    gap: 32px;
    margin-top: 0;
    text-align: left;
  }

  .sf-footer__sitemap {
    order: 0;
    grid-column: 2;
    grid-row: 3;
    border: 0;
    padding-block: 0;
  }

  /* O acordeao existe apenas no mobile. */
  .sf-footer__sitemap-toggle {
    display: none;
  }

  .sf-footer__sitemap[open] .sf-footer__sections {
    margin-top: 0;
  }

  /* Navegacao: 3 colunas com vao de 32px e linhas separadas por 48px. */
  .sf-footer__sections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
  }

  .sf-footer__cell {
    text-align: left;
  }

  /* No desktop o titulo ganha a regua, que ocupa a coluna inteira. */
  .sf-footer__title {
    padding-bottom: 16px;
    /* Branco 15%: valor do institucional, sem token equivalente no brand.css. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .sf-footer__group + .sf-footer__group {
    margin-top: 48px;
  }
}