/* ==========================================================================
   Master Office — folha de estilo do site
   --------------------------------------------------------------------------
   Recriacao do site original (Squarespace 7.1). Os numeros nao foram
   escolhidos a olho: as escalas de tipografia e a grade sao as mesmas
   formulas que o Squarespace resolve em tempo de execucao, medidas no site no
   ar com o navegador (ver _original/medidas.json).
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  /* --- cores (medidas no original, tema por tema) --- */
  --destaque: #e52500;         /* accent  — botoes, links, faixa de chamada */
  --destaque-escuro: #c11f00;  /* so' para o repouso do mouse              */
  --claro: #f4f3f0;            /* light   — fundo das faixas de respiro    */
  --escuro: #606060;           /* dark    — faixa do blog, texto de apoio  */
  --preto: #000000;
  --branco: #ffffff;
  --linha: rgba(0, 0, 0, .12);
  --whatsapp: #0dc152;

  /* --- tipografia ---
     A fonte do original e' a aktiv-grotesk, da Adobe Fonts, licenciada
     dentro da assinatura do Squarespace e nao transportavel. Figtree e' a
     livre mais proxima: mesma cor de mancha e largura de linha praticamente
     igual, o que mantem as quebras de texto no mesmo lugar. Para voltar
     atras, basta trocar esta linha. */
  --fonte: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --peso-titulo: 500;
  --peso-texto: 400;
  --altura-titulo: 1.3em;
  --altura-texto: 1.45em;

  /* Os tamanhos do original crescem com a largura da tela ate' o limite da
     pagina e param. Sao estes os valores; a formula que os aplica esta' logo
     abaixo, em --escala. */
  --t-h1: 2.5;
  --t-h2: 2.3;
  --t-h3: 2;
  --t-h4: 1.2;
  --t-texto: 1.1;
  --t-grande: 1.3;    /* paragrafo marcado como "grande" no editor */
  --t-pequeno: 1;     /* ... e como "pequeno"                      */
  --t-base: 16px;

  /* --- medidas da pagina --- */
  --largura-maxima: 1800px;
  --goteira: 2vw;         /* respiro lateral no computador */
  --goteira-mobile: 6vw;  /* ... e no celular              */
  --vao-grade: 11px;      /* espaco entre celulas da grade */
  --raio: .4rem;
  --altura-cabecalho: 65px;

  --transicao: .2s ease;
}

/* A regra de crescimento do texto, igual a' do original:
   - no celular em pe', cresce com a ALTURA da tela (limitada a 900px);
   - do tablet para cima, cresce com a largura, mas nunca passa do que
     teria na pagina cheia de 1800px.
   Usar so' um `clamp()` nao daria o mesmo resultado: o ponto de virada
   depende de --largura-maxima, nao da janela. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --escala: calc(.012 * min(100vh, 900px));
    --piso: 0px;
  }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  :root {
    --escala: 1.2vw;
    --piso: 1px;
  }
}

/* tamanho(v) = min(v-1 escalado, max(v-1 na pagina cheia, v rem)) */
:root {
  --tamanho-h1: min(
      calc((var(--t-h1) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-h1) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-h1) * 1rem)));
  --tamanho-h2: min(
      calc((var(--t-h2) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-h2) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-h2) * 1rem)));
  --tamanho-h3: min(
      calc((var(--t-h3) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-h3) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-h3) * 1rem)));
  --tamanho-h4: min(
      calc((var(--t-h4) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-h4) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-h4) * 1rem)));
  --tamanho-texto: min(
      calc((var(--t-texto) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-texto) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-texto) * 1rem)));
}

/* no celular em pe' a formula acima nao tem o `min`: e' so' a escala */
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --tamanho-h1: calc((var(--t-h1) - 1) * var(--escala) + 1rem);
    --tamanho-h2: calc((var(--t-h2) - 1) * var(--escala) + 1rem);
    --tamanho-h3: calc((var(--t-h3) - 1) * var(--escala) + 1rem);
    --tamanho-h4: calc((var(--t-h4) - 1) * var(--escala) + 1rem);
    --tamanho-texto: calc((var(--t-texto) - 1) * var(--escala) + 1rem);
  }
}


/* ---------------------------------------------------------------- 2. base */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--t-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-texto);
  line-height: var(--altura-texto);
  color: var(--preto);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, iframe { max-width: 100%; }
img { height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--peso-titulo);
  line-height: var(--altura-titulo);
  margin: 0;
  overflow-wrap: break-word;
}
h1 { font-size: var(--tamanho-h1); }
h2 { font-size: var(--tamanho-h2); }
h3 { font-size: var(--tamanho-h3); }
h4, h5, h6 { font-size: var(--tamanho-h4); }

p { margin: 0; }

ul, ol { margin: 0; padding-left: 1.4em; }
li + li { margin-top: .35em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 0; }

:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--destaque); color: #fff;
  padding: .8em 1.4em; border-radius: 0 0 var(--raio) 0;
  font-weight: 500;
}
.pular-para-conteudo:focus { left: 0; }

.so-leitor-de-tela {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------- 3. temas das faixas */

/* Cada faixa do original carrega um tema, e o tema decide fundo, cor do
   texto, cor do titulo e o desenho do botao. Sao os cinco que o site usa. */

.secao--white  { --fundo: var(--branco); --texto: var(--preto);
                 --titulo: var(--preto); --link: var(--destaque); }
.secao--light  { --fundo: var(--claro);  --texto: var(--preto);
                 --titulo: var(--preto); --link: var(--destaque); }
.secao--light-bold { --fundo: var(--claro); --texto: var(--preto);
                 --titulo: var(--destaque); --link: var(--destaque); }
.secao--dark   { --fundo: var(--escuro); --texto: var(--branco);
                 --titulo: var(--branco); --link: var(--branco); }
.secao--bright { --fundo: var(--destaque); --texto: var(--branco);
                 --titulo: var(--branco); --link: var(--branco); }

.secao--dark, .secao--bright { --linha: rgba(255, 255, 255, .28); }


/* ------------------------------------------------------- 4. faixa e grade */

.secao {
  position: relative;
  background: var(--fundo, var(--branco));
  color: var(--texto, var(--preto));
}
.secao h1, .secao h2, .secao h3, .secao h4 { color: var(--titulo, inherit); }

/* alturas minimas do original: as faixas respiram por vmax, nao por px, e' o
   que faz o espacamento acompanhar telas muito largas ou muito baixas */
.secao--altura-small  { min-height: 33vh; }
.secao--altura-medium { min-height: 66vh; }
.secao--altura-large  { min-height: 100vh; }

.secao__interno { position: relative; z-index: 1; padding: 3.3vmax 0; }
.secao--altura-medium > .secao__interno { padding: 6.6vmax 0; }
.secao--altura-large  > .secao__interno { padding: 10vmax 0; }
.secao--altura-custom > .secao__interno { padding: 0; }

/* fundo com foto e veu por cima */
.secao__fundo {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0;
}
.secao__fundo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--foco, 50% 50%);
}
.secao__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--preto); opacity: var(--veu, 0);
}

/* --- a grade fluida ---
   O original posiciona cada bloco numa grade de 8 colunas no celular e 24 no
   computador, com uma coluna de respiro de cada lado. As celulas tem altura
   minima proporcional a' largura da pagina, o que mantem a proporcao dos
   blocos em qualquer tela. E' a mesma grade aqui. */
.grade {
  --colunas: 8;
  --celula: calc((min(var(--largura-maxima), 100vw) - (var(--vao-grade) * (var(--colunas) - 1))) / var(--colunas));
  --respiro: calc(var(--goteira-mobile) - var(--vao-grade));
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--linhas, 1), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--respiro), 1fr)
    repeat(var(--colunas), minmax(0, var(--celula)))
    minmax(var(--respiro), 1fr);
  row-gap: var(--vao-grade);
  column-gap: var(--vao-grade);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .grade {
    --colunas: 24;
    --respiro: calc(var(--goteira) - var(--vao-grade));
    --largura-util: min(var(--largura-maxima), calc(100vw - var(--goteira) * 2));
    --celula: calc((var(--largura-maxima) - (var(--vao-grade) * (var(--colunas) - 1))) / var(--colunas));
    grid-template-rows:
      repeat(var(--linhas-desktop, var(--linhas, 1)),
             minmax(calc(var(--largura-util) * .0215), auto));
  }
}

.grade__bloco {
  grid-area: var(--area);
  z-index: var(--camada, auto);
  display: flex;
  flex-direction: column;
  justify-content: var(--justificar, flex-start);
  min-width: 0;
}
.grade__bloco > * { align-self: var(--alinhar, stretch); width: 100%; }

/* Em tela larga a linha da grade tem altura mínima proporcional à página, e
   sobra espaço embaixo do texto quando ele não enche a célula. Encostado no
   topo, esse resto vira um vão solto antes do bloco seguinte. Centralizado,
   ele se divide em dois respiros iguais e o texto fica no meio da faixa —
   que é como o original se parece quando o texto enche a célula. */
.grade__bloco:has(> .texto:only-child) { justify-content: center; }

@media (min-width: 768px) {
  .grade__bloco { grid-area: var(--area-desktop, var(--area)); }
}


/* Bloco que ficou sozinho na faixa depois que o formulario saiu: ocupa a
   largura inteira e vem centrado, em vez de encostado a' esquerda com um
   vazio do lado. */
.grade__bloco--centrado { text-align: center; }
.grade__bloco--centrado .texto { max-width: 46rem; margin-inline: auto; }
.grade__bloco--centrado .bloco-botao { justify-content: center; }

/* -------------------------------------------------------- 5. envoltorios */

.envoltorio {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--goteira-mobile);
}
@media (min-width: 768px) {
  .envoltorio { padding-inline: var(--goteira); }
}

.coluna-texto { max-width: 46rem; margin-inline: auto; }


/* --------------------------------------------------------- 6. cabecalho */

/* A altura do cabecalho foi medida no original, faixa por faixa. Ela muda
   duas vezes: o respiro passa de 6vw para 1vw quando o menu deixa de ser
   sanduiche (900px), e o logo cresce de 51px para 65px aos 768px. Sao quase
   80px de diferenca no tablet — o bastante para desalinhar a pagina inteira
   em relacao ao original. */
.cabecalho {
  position: relative;
  z-index: 100;
  background: var(--branco);
  padding: 1vw var(--goteira);
}
@media (max-width: 799px) {
  .cabecalho { padding: 6vw var(--goteira-mobile); }
}
@media (max-width: 767px) {
  .cabecalho { padding: 6vw var(--goteira-mobile); }
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--largura-maxima);
  margin-inline: auto;
}

.cabecalho__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.cabecalho__logo img {
  height: min(6vw, var(--altura-cabecalho));
  width: auto;
  max-height: var(--altura-cabecalho);
  object-fit: contain;
}
@media (max-width: 799px) {
  .cabecalho__logo img { height: var(--altura-cabecalho); }
}
@media (max-width: 767px) {
  .cabecalho__logo img { height: 51px; max-height: 51px; }
}

.cabecalho__navegacao {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__item { position: relative; }
.menu__link {
  display: inline-block;
  padding: .1em 0;
  font-size: var(--tamanho-texto);
  font-weight: 400;
  color: var(--preto);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.menu__link:hover,
.menu__link[aria-current="page"],
.menu__item--nesta-secao > .menu__link {
  text-decoration: underline;
  text-underline-offset: .3em;
}

.menu__link--pai { display: inline-flex; align-items: center; gap: .35em; }

/* no computador o original nao desenha seta nenhuma ao lado de "Soluções";
   ela so' aparece no menu do celular, onde serve para abrir a lista */
.menu__seta { display: none; }

.submenu {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  transform: translateX(-50%) translateY(-.4rem);
  min-width: 15rem;
  padding: .6rem 0;
  margin: 0;
  list-style: none;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), transform var(--transicao),
              visibility var(--transicao);
}
.menu__item:hover > .submenu,
.menu__item:focus-within > .submenu,
.submenu[data-aberto="1"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block;
  padding: .55rem 1.4rem;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.submenu a:hover { background: var(--claro); color: var(--destaque); }

.cabecalho__acoes { flex: 0 0 auto; margin-left: auto; }

.abrir-menu {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.abrir-menu span,
.abrir-menu span::before,
.abrir-menu span::after {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background: var(--preto);
  transition: transform var(--transicao), opacity var(--transicao);
}
.abrir-menu span { top: 21px; }
.abrir-menu span::before { content: ""; top: -7px; left: 0; }
.abrir-menu span::after  { content: ""; top: 7px;  left: 0; }
.abrir-menu[aria-expanded="true"] span { background: transparent; }
.abrir-menu[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }


/* ----------------------------------------------------------- 7. botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2rem;   /* --primaryButtonPadding do original */
  font-family: inherit;
  font-size: var(--tamanho-texto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao);
}

.botao--primario {
  background: var(--destaque);
  border-color: var(--destaque);
  color: var(--branco);
}
.botao--primario:hover {
  background: var(--destaque-escuro);
  border-color: var(--destaque-escuro);
}

/* dentro da faixa vermelha o botao inverte: fundo branco, texto vermelho */
.secao--bright .botao--primario {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--destaque);
}
.secao--bright .botao--primario:hover {
  background: transparent;
  color: var(--branco);
}

.botao--contorno {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.botao--contorno:hover { background: var(--destaque); border-color: var(--destaque); color: var(--branco); }

/* o botao do cabecalho e' menor e em caixa alta */
.botao--cabecalho {
  padding: 1rem 2rem;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.botao--small  { font-size: calc(var(--tamanho-texto) * .85); padding: 1rem 1.5rem; }
.botao--large  { font-size: calc(var(--tamanho-texto) * 1.15); padding: 1.4rem 2.4rem; }

.bloco-botao { display: flex; }
.bloco-botao[data-alinhamento="center"] { justify-content: center; }
.bloco-botao[data-alinhamento="right"]  { justify-content: flex-end; }
.bloco-botao[data-alinhamento="left"]   { justify-content: flex-start; }

/* Alguns botoes do original ocupam a celula inteira da grade e outros ficam
   do tamanho do texto. Nao e' capricho do layout: e' um ajuste gravado bloco
   a bloco, que o extrator le' e repassa. */
.bloco-botao--esticado { height: 100%; }
.bloco-botao--esticado .botao {
  width: 100%;
  height: 100%;
  /* esticado, a altura vem da celula da grade; manter o recuo vertical
     empurraria a linha e desalinharia tudo o que vem depois */
  padding-block: 0;
}


/* ------------------------------------------------------- 8. texto rico */

/* No original todo paragrafo tem 16px acima e abaixo — as margens vizinhas
   se fundem, entao o intervalo entre dois paragrafos e' 16px, nao 32. E o
   paragrafo vazio guarda uma linha inteira: e' com ele que quem escreveu
   separou os trechos do texto. */
.texto p, .texto ul, .texto ol { margin: 1rem 0; }
.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }
/* Quem escreveu no Squarespace separou ideias apertando Enter duas vezes, e
   cada linha em branco dessas abre 42px de vão — o texto parece partido ao
   meio. Aqui a linha vale um respiro menor: a separação continua visível, o
   buraco some. Foi decisão do cliente; o original segue com o vão inteiro. */
:root { --respiro-linha-vazia: .6em; }

.texto p.linha-vazia, .texto p:empty {
  min-height: var(--respiro-linha-vazia);
}

.texto a { color: var(--link, var(--destaque)); }
.texto a:hover { text-decoration-thickness: 2px; }
.texto h1, .texto h2, .texto h3, .texto h4 { margin-bottom: .5em; }
.texto h2 + p, .texto h3 + p, .texto h4 + p { margin-top: 0; }
.texto ul { padding-left: 1.2em; }
.texto figure { margin: 1.6em 0; }
.texto img { border-radius: var(--raio); }

/* bloco de texto com fundo proprio — os paineis da pagina /salas. A cor e' a
   clara do tema, e o bloco ocupa a celula inteira da grade. */
.texto--painel {
  background: var(--claro);
  height: 100%;
}
.secao--light .texto--painel, .secao--light-bold .texto--painel {
  background: var(--branco);
}
.grade__bloco > .texto--painel { flex: 1 1 auto; }

/* corpos de texto que o editor do original oferece, na mesma escala do
   resto: "grande" cresce com a tela, "pequeno" fica no corpo base */
.sqsrte-large {
  font-size: min(
      calc((var(--t-grande) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-grande) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-grande) * 1rem)));
}
.sqsrte-small { font-size: calc(var(--t-pequeno) * 1rem); }

@media screen and (max-width: 767px) and (orientation: portrait) {
  .sqsrte-large {
    font-size: calc((var(--t-grande) - 1) * var(--escala) + 1rem);
  }
}

.sqsrte-text-color--accent { color: var(--destaque); }
.sqsrte-text-color--white  { color: var(--branco); }
.sqsrte-text-color--black  { color: var(--preto); }

/* Retangulo de fundo do original: ocupa a celula inteira e fica atras do
   conteudo. E' o que desenha a caixa clara das colunas de plano e dos
   quadros de servico. */
.bloco-forma {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--claro);
}
.secao--light .bloco-forma { background: var(--branco); }
.grade__bloco > .bloco-forma { flex: 1 1 auto; }

.bloco-imagem { line-height: 0; }
.bloco-imagem img {
  width: 100%;
  height: auto;
  object-position: var(--foco, 50% 50%);
}

/* Foto de capa: preenche a celula da grade e corta o que sobra, mantendo o
   ponto de interesse no lugar.

   Ela e' tirada do fluxo de proposito. A altura das faixas do original vem
   das linhas da grade, nunca da foto; se a foto entrasse no calculo, cada
   uma esticaria a faixa pela propria proporcao e a pagina inteira ficaria
   mais alta que o original — no celular chegava a 40% a mais. */
.grade__bloco { position: relative; }
.bloco-imagem--esticada {
  position: absolute;
  inset: 0;
  height: 100%;
}
.bloco-imagem--esticada img { width: 100%; height: 100%; object-fit: cover; }
.bloco-imagem figcaption {
  line-height: var(--altura-texto);
  font-size: .9em;
  color: var(--escuro);
  padding-top: .6em;
}


/* ------------------------------------------- 9. lista de itens / carrossel */

.lista-secao__titulo {
  font-size: var(--tamanho-h2);
  font-weight: var(--peso-titulo);
  /* o titulo da lista e' um paragrafo: herda a entrelinha do texto, nao a
     dos titulos — sao 6px de diferenca que empurram a faixa inteira */
  line-height: var(--altura-texto);
  text-align: center;
}
.lista-secao__titulo p { margin: 0; }

.carrossel { position: relative; }

/* Com "espiar o proximo" ligado, o original reserva um vao a mais no fim da
   fila, e a ponta do cartao seguinte aparece. Sem isso, os tres cartoes
   preenchem a linha exata. */
.carrossel__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns:
    calc((100% - (var(--colunas-visiveis) - 1) * var(--vao-lista, 40px))
         / var(--colunas-visiveis));
  gap: var(--vao-lista, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__item { scroll-snap-align: start; min-width: 0; }

/* o recuo a' direita ja' encolhe a caixa de conteudo, e a largura da coluna
   e' calculada sobre ela — tirar o vao de novo na conta deixaria o cartao
   estreito demais */
.carrossel--espiar .carrossel__trilho {
  padding-right: var(--vao-lista, 40px);
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho { scroll-behavior: auto; }
}

.cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: var(--alinha-texto, left);
}
/* o recuo do cartao do original e' proporcional a' largura dele, nao fixo */
.cartao--caixa {
  background: var(--claro);
  padding: var(--recuo-cartao, 12% 10%);
  justify-content: center;
}
.secao--light .cartao--caixa { background: var(--branco); }

/* Os respiros e o tamanho da foto vem da propria lista. Numa lista a foto e'
   uma imagem larga em 3:2; noutra e' um icone quadrado de 15% da largura. */
.cartao__midia {
  width: var(--largura-midia, 100%);
  aspect-ratio: var(--proporcao-midia, 3 / 2);
  overflow: hidden;
  margin-bottom: var(--espaco-midia, 8%);
  align-self: var(--alinha-midia, flex-start);
}
.cartao__midia img { width: 100%; height: 100%; object-fit: cover; }

/* Cada lista tem a propria escala de texto — os depoimentos usam titulo
   maior e texto menor que as solucoes. A conta e' a mesma da tipografia
   geral, so' que com o valor que veio da lista. */
.cartao__titulo {
  font-size: min(
      calc((var(--t-cartao-titulo, 1.2) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-cartao-titulo, 1.2) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-cartao-titulo, 1.2) * 1rem)));
  font-weight: var(--peso-titulo);
  /* no original o titulo do cartao e' um h2 com o corpo trocado: fica com a
     entrelinha do h2, nao com a do proprio tamanho */
  line-height: calc(var(--altura-titulo) * (1 + (1 - var(--t-h2)) / 25));
  margin: 0 0 var(--espaco-titulo, 4%);
}
.cartao__descricao {
  font-size: min(
      calc((var(--t-cartao-texto, 1) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-cartao-texto, 1) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-cartao-texto, 1) * 1rem)));
  line-height: var(--altura-texto);
  color: var(--escuro);
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .cartao__titulo {
    font-size: calc((var(--t-cartao-titulo, 1.2) - 1) * var(--escala) + 1rem);
  }
  .cartao__descricao {
    font-size: calc((var(--t-cartao-texto, 1) - 1) * var(--escala) + 1rem);
  }
}
.cartao--caixa .cartao__descricao { color: inherit; }
.cartao__descricao p { margin: 0; }
.cartao__descricao p + p { margin-top: 1rem; }

/* o "Saiba mais" vem escrito dentro da descricao, num paragrafo so' dele */
.cartao__descricao a {
  color: var(--preto);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.cartao__descricao a:hover { color: var(--destaque); }
.secao--dark .cartao__descricao a { color: var(--branco); }

/* O botao do cartao: mesmo vermelho dos outros botoes do site, num corpo
   menor que a lista define. Fica encostado na base para que os cartoes de
   uma mesma linha alinhem os botoes, mesmo com textos de tamanhos diferentes. */
.cartao__acao {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  justify-content: var(--alinha-botao, flex-start);
}
.botao--cartao {
  padding: 16px 32px;
  font-size: min(
      calc((var(--t-cartao-botao, .9) - 1) * var(--escala) + 1rem),
      max(calc((var(--t-cartao-botao, .9) - 1) * .012 * var(--largura-maxima) + 1rem),
          calc(var(--t-cartao-botao, .9) * 1rem)));
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .botao--cartao {
    font-size: calc((var(--t-cartao-botao, .9) - 1) * var(--escala) + 1rem);
  }
}

.carrossel__controles {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2vmax;
}
.carrossel__seta {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: inherit;
  transition: opacity var(--transicao), color var(--transicao);
}
.carrossel__seta:hover { color: var(--destaque); }
.carrossel__seta[disabled] { opacity: .25; cursor: default; }
.carrossel__seta svg { width: 40px; height: 14px; }

/* grade simples, quando a lista nao e' carrossel: empilhada no celular e em
   colunas fixas do tablet para cima, como no original */
.lista-grade {
  display: grid;
  gap: var(--vao-linhas, 45px) var(--vao-colunas, 45px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .lista-grade {
    grid-template-columns: repeat(var(--colunas-lista, 3), 1fr);
  }
}


/* --------------------------------------------------------- 10. galeria */

/* A galeria do original e' um mosaico: cada foto entra com a altura que tem,
   sem corte. Duas colunas ate' o tablet e tres no computador — e o vao entre
   elas muda junto, como foi medido no site no ar (3px / 11px / 41px). */
.galeria {
  columns: 2;
  column-gap: 3px;
}
.galeria img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
  break-inside: avoid;
}

/* cada foto e' um botao: abre ampliada, como no original */
.galeria__foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  overflow: hidden;
}
.galeria__foto img { margin-bottom: 0; transition: transform .5s ease; }
.galeria__foto:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .galeria__foto img, .galeria__foto:hover img { transition: none; transform: none; }
}

/* --- a foto ampliada --- */
.ampliada {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(0, 0, 0, .92);
  border: 0;
}
.ampliada::backdrop { background: rgba(0, 0, 0, .92); }
.ampliada[hidden] { display: none; }

.ampliada__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
}
.ampliada__figura img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.ampliada__legenda {
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
  text-align: center;
}
.ampliada__contador {
  position: absolute;
  top: 1.4rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
  letter-spacing: .04em;
}

.ampliada__botao {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transicao);
}
.ampliada__botao:hover { background: rgba(255, 255, 255, .24); }
.ampliada__botao svg { width: 22px; height: 22px; }
.ampliada__fechar   { top: 1.2rem; right: 1.2rem; }
.ampliada__anterior { left: 1.2rem;  top: 50%; transform: translateY(-50%); }
.ampliada__proxima  { right: 1.2rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .ampliada__botao { width: 44px; height: 44px; }
  .ampliada__anterior { left: .5rem; }
  .ampliada__proxima  { right: .5rem; }
}

body[data-ampliada-aberta="1"] { overflow: hidden; }
/* a galeria e' a faixa inteira: o respiro das outras faixas nao vale aqui */
.secao--galeria > .secao__interno,
.secao--galeria.secao--altura-medium > .secao__interno { padding: 0; }
.secao--galeria { min-height: 0; }

@media (min-width: 768px) {
  .galeria { column-gap: 11px; }
  .galeria img { margin-bottom: 11px; }
}

@media (min-width: 1024px) {
  .galeria { columns: 3; column-gap: 41px; }
  .galeria img { margin-bottom: 41px; }
}


/* ------------------------------------------------------------ 11. blog */

/* os tres cartoes que aparecem dentro de uma faixa (home): empilhados no
   celular, lado a lado do tablet para cima — como no original */
.blog-grade {
  display: grid;
  gap: 2.6rem 2.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-grade { grid-template-columns: repeat(3, 1fr); }
}

/* a listagem do /blog: uma coluna no celular, tres do tablet para cima */
.blog-lista {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-lista { grid-template-columns: repeat(3, 1fr); gap: 70px 50px; }
}

.post-cartao { display: flex; flex-direction: column; }
.post-cartao__midia {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.blog-lista .post-cartao__midia { margin-bottom: 30px; }
.post-cartao__midia img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.post-cartao:hover .post-cartao__midia img { transform: scale(1.04); }
/* Os dois lugares que mostram cartao de publicacao usam corpos diferentes no
   original: 30px fixos na faixa da home, escala de h4 na listagem do blog. */
.post-cartao__titulo {
  font-size: var(--tamanho-h4);
  line-height: 1.2;
  margin: 0 0 .5rem;
}
.blog-grade .post-cartao__titulo { font-size: 30px; }
.post-cartao__titulo a { text-decoration: none; }
.post-cartao__titulo a:hover { text-decoration: underline; text-underline-offset: .2em; }
.post-cartao__resumo {
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: .7rem;
}
.post-cartao__resumo p { margin: 0; }
.post-cartao__data { font-size: .85rem; opacity: .7; margin-top: auto; }

/* na faixa escura da home os cartoes herdam o branco do tema */
.secao--dark .post-cartao__titulo,
.secao--dark .post-cartao__resumo,
.secao--dark .post-cartao__data { color: var(--branco); }

.post { padding-block: 3.3vmax 5vmax; }

/* A coluna de leitura do original ocupa 48% da largura da janela a partir do
   tablet, e a largura toda no celular. O teto de 900px e' acrescimo nosso:
   sem ele, em monitor muito largo a linha de texto fica comprida demais para
   o olho acompanhar. Ate' 1875px de janela o valor bate com o do original. */
.post__coluna { width: 100%; margin-inline: auto; }
@media (min-width: 768px) {
  .post__coluna { width: min(48vw, 900px); }
}

.post__cabecalho { margin-bottom: 2.4rem; }
.post__titulo { margin-bottom: .8rem; }
.post__meta { font-size: .95rem; color: var(--escuro); margin-bottom: .8rem; }
.post__resumo { font-size: 1.05rem; }
.post__resumo p { margin: 0; }
.post__corpo h2 { font-size: var(--tamanho-h3); margin: 1.6em 0 .5em; }
.post__corpo h3 { font-size: var(--tamanho-h4); margin: 1.4em 0 .4em; }
.post__corpo img { width: 100%; border-radius: var(--raio); }

.post__navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 3.5rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linha);
  font-size: .95rem;
}
.post__navegacao a { color: var(--destaque); text-decoration: none; max-width: 20rem; }
.post__navegacao a:hover { text-decoration: underline; }
.post__navegacao span { display: block; font-size: .8rem; color: var(--escuro); }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linha);
}
.paginacao__posicao {
  order: 2;
  width: 100%;
  text-align: center;
  font-size: .85rem;
  color: var(--escuro);
  margin: 0;
}
.paginacao a {
  font-size: .95rem;
  color: var(--destaque);
  text-decoration: none;
}
.paginacao a:hover { text-decoration: underline; }
.paginacao__antigas { margin-left: auto; }

.busca { max-width: 34rem; margin: 0 auto 3rem; }
.busca input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .95em 1.2em;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  color: inherit;
}
.busca input:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
.busca__resultado { font-size: .9rem; color: var(--escuro); margin-top: .8rem; }


/* -------------------------------------------------- 12. tabela de planos */

/* O original monta os planos em blocos de codigo, com uma folha propria do
   tema. As classes sao as mesmas para o conteudo continuar valendo. */

.ak-pricing-table {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
/* A caixa clara atras de cada plano nao e' desta tabela: e' um retangulo de
   fundo proprio (.bloco-forma), e as quatro ocupam as mesmas linhas da grade.
   E' de la' que vem a altura igual — a tabela so' acomoda o conteudo. */
.grade__bloco > .bloco-codigo,
.bloco-codigo .sqs-code-container,
.bloco-codigo .ak-pricing-table { height: 100%; }

.ak-pricing-table__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding-bottom: 40px;   /* respiro entre o botao e o fim da caixa */
}
/* No original a coluna e' transparente: quem da' a cor e' o fundo da faixa.
   A unica marca e' o fio embaixo do cabecalho. */
.ak-pricing-table__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.ak-pricing-table__title {
  font-size: 24px;
  line-height: 1.2em;
  font-weight: var(--peso-titulo);
  color: #222;
  margin: 0 0 20px;
  /* reserva duas linhas: sem isso o cabecalho de "Master Address Comercial"
     fica mais baixo que o de "Master Address Comercial Phone", e a faixa
     branca termina em alturas diferentes de uma coluna para a outra */
  min-height: 2.4em;
}
.ak-pricing-table__highlight {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 20px;
  align-self: flex-end;
  order: -1;
}
.ak-pricing-table__price {
  display: block;
  font-size: 14px;
  line-height: 1em;
  font-weight: 400;
  margin: 0 0 30px;
  text-align: center;
}
.ak-pricing-table__price span { display: inline; font-size: 2em; }

.ak-pricing-table__body {
  padding: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ak-pricing-table__spec {
  display: flex;
  gap: 10px;
  color: #666;
  font-size: 14px;
  line-height: 1.4em;
  padding: 5px 0;
}
.ak-pricing-table__spec .fa-check { color: var(--destaque); flex: 0 0 auto; }
.ak-pricing-table__spec:has(.fa-xmark) { display: none; }
.ak-pricing-table__spec span { color: var(--destaque); font-weight: 600;
                               text-transform: uppercase; }
.ak-pricing-table__btn {
  display: block;
  width: 210px;
  min-width: 50%;
  max-width: 100%;
  margin: auto auto 0;
  color: var(--destaque);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px;
  border: 2px solid var(--destaque);
  border-radius: 2px;
  transition: background-color var(--transicao), color var(--transicao);
}
.ak-pricing-table__btn:hover { background: var(--destaque); color: var(--branco); }

@media (max-width: 775px) {
  .ak-pricing-table { flex-direction: column; align-items: center; }
  .ak-pricing-table__column { margin: 20px 0; }
}


/* -------------------------------------------------------- 13. formulario */

.formulario {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr);
}
.formulario > * { grid-column: 1 / -1; }
/* Nome e Sobrenome dividem a linha em qualquer largura, como no original */
.campo--metade { grid-column: span 1; }

.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo > span { font-size: .95rem; font-weight: 500; }
.campo__marca {
  font-style: normal;
  font-weight: 400;
  color: var(--escuro);
  margin-left: .4em;
}
.campo__dica { font-size: .85rem; color: var(--escuro); margin-top: -.2rem; }
.formulario__acoes { display: flex; }
.formulario button[disabled] { opacity: .75; cursor: not-allowed; }
.campo input, .campo textarea, .campo select {
  font: inherit;
  font-size: 1rem;
  padding: .8em 1em;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--preto);
  width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo--obrigatorio > span::after { content: " *"; color: var(--destaque); }
.formulario__aviso {
  font-size: .9rem;
  color: var(--escuro);
  background: var(--claro);
  border-left: 3px solid var(--destaque);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--raio) var(--raio) 0;
}

/* a proporcao e' a medida no original: 1382 x 478 a 1440px de largura */
.mapa {
  width: 100%;
  aspect-ratio: 1382 / 478;
  min-height: 300px;
  border: 0;
  border-radius: var(--raio);
}


/* ------------------------------------------------------------ 14. rodape */

.rodape {
  background: var(--branco);
  color: var(--preto);
  padding-block: 3.3vmax 2rem;
  font-size: 1rem;
}
.rodape__colunas {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .rodape__colunas { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
}
.rodape h4, .rodape strong { font-size: 1rem; font-weight: 700; }
.rodape p { margin: 0; }
.rodape p + p { margin-top: .9em; }
.rodape ul { list-style: none; padding: 0; margin: .7em 0 0; }
.rodape li + li { margin-top: .3em; }
.rodape a { color: var(--destaque); }

.rodape__sociais { display: flex; gap: .6rem; margin-top: 1.4rem; }
.rodape__sociais a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--preto);
  border-radius: 50%;
  color: var(--preto);
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.rodape__sociais a:hover {
  background: var(--destaque); border-color: var(--destaque); color: var(--branco);
}
.rodape__sociais svg { width: 15px; height: 15px; fill: currentColor; }

.rodape__creditos {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linha);
  font-size: .9rem;
  color: var(--escuro);
}
.rodape__creditos p { margin: 0; }
.rodape__creditos a { color: var(--escuro); }
.rodape__creditos a:hover { color: var(--destaque); }


/* -------------------------------------------------- 15. botao flutuante */

.flutuante {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 500;
  display: flex;
  align-items: center;
  height: 60px;
  text-decoration: none;
  color: var(--branco);
}
.flutuante__circulo {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  transition: transform var(--transicao);
}
.flutuante:hover .flutuante__circulo { transform: scale(1.07); }
.flutuante svg { width: 32px; height: 32px; fill: currentColor; }

@media (max-width: 767px) {
  .flutuante { right: 18px; bottom: 18px; }
}


/* ------------------------------------------------- 16. menu no celular */

@media (max-width: 799px) {
  .abrir-menu { display: block; }
  .cabecalho__acoes { display: none; }

  .cabecalho__navegacao {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem var(--goteira-mobile) 3rem;
    background: var(--branco);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s ease, visibility .32s ease;
  }
  .cabecalho__navegacao[data-aberto="1"] {
    transform: translateX(0);
    visibility: visible;
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .menu__item { border-bottom: 1px solid var(--linha); }
  .menu__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    text-align: left;
  }
  .menu__link--pai { justify-content: space-between; }

  .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0 0 .8rem;
    display: none;
    background: none;
  }
  .menu__item:hover > .submenu, .menu__item:focus-within > .submenu { display: none; }
  .submenu[data-aberto="1"] { display: block; }
  .submenu a { padding: .6rem 0 .6rem 1rem; font-size: 1.05rem; }
  .submenu a:hover { background: none; }

  .menu__seta {
    display: block;
    width: .42em; height: .42em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-.1em, -.1em);
    transition: transform var(--transicao);
  }
  .menu__link--pai[aria-expanded="true"] .menu__seta {
    transform: rotate(-135deg) translate(-.15em, -.15em);
  }

  .cabecalho__botao-mobile { margin-top: 2rem; }
  .cabecalho__botao-mobile .botao { width: 100%; }

  body[data-menu-aberto="1"] { overflow: hidden; }
}

@media (min-width: 800px) {
  .cabecalho__botao-mobile { display: none; }
}


/* ------------------------------------------------------- 17. animacoes */

/* So' entram em cena depois que o JS confirma que esta' vivo: um erro de
   script nunca pode deixar a pagina em branco. */
.js .anima {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .anima.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .anima { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------- 18. ajustes finos */

@media (max-width: 767px) {
  .lista-secao__titulo { margin-bottom: 1.8rem; }
  .carrossel__trilho { grid-auto-columns: 82%; gap: 20px; }
  .ak-pricing-table__header, .ak-pricing-table__body { padding: 28px 24px; }
  .post__navegacao { flex-direction: column; }
}

@media print {
  .cabecalho, .rodape__sociais, .flutuante, .carrossel__controles { display: none; }
  body { color: #000; }
}