/*
 * Estilos das secoes novas das paginas de servico.
 *
 * Feito para conviver com o Avada, nao para brigar com ele: as cores saem da
 * propria paleta do site (azul #002461, azul claro #00ccff, cinza #ededed) e a
 * largura vem do container do tema, a .fusion-row. Aqui ficam so os blocos que
 * o site nao tinha: a grade de cards, a faixa de numeros, o infografico de
 * etapas e a faixa azul de chamada.
 */

:root {
  --lisa-azul: #002461;
  --lisa-azul-claro: #00ccff;
  --lisa-cinza: #ededed;
  --lisa-texto: #594842;
}

/* ---------- grade de cards ---------- */
.lisa-cards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lisa-cards--2 { grid-template-columns: repeat(2, 1fr); }

/*
 * Quando o numero de cards nao fecha a linha (5 cards em 3 colunas, no
 * Crossdocking), a grade deixava os que sobram encostados a esquerda, com um
 * buraco do lado. Com flex e centralizacao, a ultima linha fica no meio. A
 * largura de cada card continua a de 1/3 (ou 1/2), igual a das linhas cheias.
 */
.lisa-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.lisa-cards > .lisa-card {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 48px) / 3);
}

.lisa-cards--2 > .lisa-card { flex-basis: calc((100% - 24px) / 2); }

.lisa-card {
  background: #fff;
  border-top: 4px solid var(--lisa-azul);
  box-shadow: 2px 2px 6px 0 rgba(36, 36, 36, 0.18);
  padding: 28px 24px;
}

.lisa-card h3 {
  color: var(--lisa-azul);
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.lisa-card p {
  color: var(--lisa-texto);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* cards grandes, os tres de destaque */
.lisa-cards--destaque .lisa-card {
  border-top: 0;
  border-left: 4px solid var(--lisa-azul);
  padding: 34px 28px;
}

.lisa-cards--destaque .lisa-card h3 { font-size: 20px; }

.lisa-card__icone {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 12px;
}

/* ---------- faixa de numeros ---------- */
.lisa-numeros {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.lisa-numeros__valor {
  color: var(--lisa-azul);
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}

.lisa-numeros__rotulo {
  color: var(--lisa-texto);
  display: block;
  font-size: 15px;
  margin-top: 6px;
}

/* ---------- etapas, o infografico ---------- */
.lisa-etapas {
  counter-reset: etapa;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* a linha que liga as etapas, atras dos circulos */
.lisa-etapas::before {
  background: rgba(0, 204, 255, 0.35);
  content: "";
  height: 3px;
  left: 10%;
  position: absolute;
  right: 10%;
  top: 29px;
}

.lisa-etapa {
  position: relative;
  text-align: center;
}

.lisa-etapa__numero {
  align-items: center;
  background: var(--lisa-azul);
  border: 3px solid var(--lisa-azul-claro);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 22px;
  font-weight: 700;
  height: 60px;
  justify-content: center;
  margin: 0 auto 14px;
  position: relative;
  width: 60px;
  z-index: 1;
}

.lisa-etapa h3 {
  color: var(--lisa-azul);
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 6px;
}

.lisa-etapa p {
  color: var(--lisa-texto);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- galeria ---------- */
/*
 * O numero de colunas vem da propria secao, por --lisa-colunas. Uma grade fixa
 * de 3 colunas deixava um buraco do tamanho de uma foto nas paginas que so tem
 * duas, como Crossdocking e Fulfillment. As telas menores continuam mandando,
 * porque as media queries vem depois e sobrescrevem.
 */
.lisa-galeria {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--lisa-colunas, 3), 1fr);
}

.lisa-galeria img {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* ---------- faixa azul de chamada ---------- */
.lisa-faixa {
  background: var(--lisa-azul);
  color: #fff;
  padding: 56px 24px;
  text-align: center;
}

.lisa-faixa h2 {
  color: #fff;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 14px;
}

.lisa-faixa p {
  color: #fff;
  font-size: 17px;
  margin: 0 auto 26px;
  max-width: 720px;
}

/* ---------- ajustes de ritmo ---------- */
.lisa-secao { padding: 56px 0; }
.lisa-secao--cinza { background: var(--lisa-cinza); }

.lisa-secao h2 {
  color: var(--lisa-azul);
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 14px;
  text-align: center;
}

.lisa-secao__apoio {
  color: var(--lisa-texto);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 34px;
  max-width: 820px;
  text-align: center;
}

/* ---------- miniatura dos servicos na listagem ---------- */
/*
 * As tres fotos de capa vieram com proporcoes diferentes (1.51, 1.78 e 1.34),
 * entao cada card ficava com uma altura, e o do Crossdocking, o mais
 * panoramico, ficava visivelmente mais baixo que os outros dois. A proporcao
 * fixa de 4:3 e a mesma que o WordPress usava nas miniaturas antigas, e o
 * object-fit corta sem distorcer.
 */
.lisa-miniatura {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* ---------- infografico de como funciona ---------- */
.lisa-infografico { margin-top: 10px; }
.lisa-infografico img { display: block; }

/* ---------- faixa de titulo do servico ---------- */
/*
 * A faixa passou a ter foto no fundo. O nome do servico sai no azul escuro do
 * tema, que sobre a foto nao se le. O site atual tem o mesmo problema, com o
 * agravante de que la o fundo era azul escuro chapado, ou seja, azul escuro
 * sobre azul escuro. Aqui o fundo ganha um veu da propria cor da marca e o
 * titulo vai para o branco.
 */
.lisa-capa { position: relative; }

.lisa-capa::before {
  background: rgba(0, 36, 97, 0.62);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.lisa-capa > * { position: relative; z-index: 1; }

/*
 * O seletor precisa carregar o "#wrapper" porque e assim que o tema pinta o
 * titulo: ".fusion-body #wrapper .fusion-title ... { color: #002461 }". Um ID
 * vence qualquer quantidade de classes, entao sem o #wrapper aqui a regra
 * perdia e o titulo continuava azul escuro, invisivel sobre a foto.
 *
 * E o mesmo motivo de o site atual mostrar esse titulo em azul escuro: o tema
 * sobrescreve o branco que o proprio bloco declara em --awb-text-color.
 */
.fusion-body #wrapper .lisa-capa .fusion-title .fusion-title-heading,
.fusion-body #wrapper .lisa-capa .fusion-title h1 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ---------- largura das secoes ---------- */
/*
 * O tema prende tudo em 1200px, por "#main .fusion-row { max-width: ... }".
 * Como ali tem um ID, um seletor so de classes perde, por mais classes que
 * tenha. Por isso o #main aparece aqui tambem.
 *
 * Nas secoes novas os 1200px deixavam muito ar nas laterais em tela grande,
 * ainda mais ao lado dos infograficos, que sao imagens largas. A linha vai
 * ate 1680px e a respiracao lateral cresce junto com a tela, pelo clamp, em
 * vez de ser um valor fixo.
 */
#main .lisa-secao .fusion-row,
.lisa-secao .fusion-row {
  max-width: 1680px;
  padding-left: clamp(16px, 4vw, 56px);
  padding-right: clamp(16px, 4vw, 56px);
  width: 100%;
}

/*
 * A faixa larga fica FORA do container do tema, direto na secao, entao ja
 * nasce com a largura da tela. Nao precisa de 100vw nem de margem negativa,
 * que e o truque que costuma criar rolagem lateral por causa da barra de
 * rolagem.
 */
.lisa-largo {
  margin-top: 28px;
  width: 100%;
}

.lisa-largo .lisa-galeria,
.lisa-largo .lisa-infografico { margin: 0; }

.lisa-largo .lisa-galeria { gap: 4px; }

/*
 * Largura automatica, e nao 100%: com width fixo a margem negativa da regra
 * abaixo so deslocava a faixa para a esquerda, e sobrava um vao branco de
 * 100px na direita. Com auto, a margem negativa alarga a faixa dos dois lados.
 */
.lisa-faixa .fusion-row { max-width: none; width: 100%; }
.lisa-faixa { max-width: none; width: auto; }

/*
 * Botao da faixa azul: o botao padrao do tema e azul escuro, e sobre o fundo
 * azul escuro sumia. Vai para o branco com texto azul, o mesmo desenho do
 * botao da faixa PREPARE-SE.
 */
#wrapper .lisa-faixa .fusion-button {
  background: #ffffff;
  border: 2px solid #ffffff;
}

#wrapper .lisa-faixa .fusion-button .fusion-button-text { color: var(--lisa-azul); }

#wrapper .lisa-faixa .fusion-button:hover,
#wrapper .lisa-faixa .fusion-button:focus-visible { background: #ededed; border-color: #ededed; }

/* ---------- texto de apoio centralizado ---------- */
/*
 * O tema zera a margem lateral dos paragrafos com um seletor que carrega o
 * #main, entao o "margin: 0 auto" do apoio perdia e o paragrafo grudava na
 * esquerda, desalinhado do titulo e do botao, que sao centralizados.
 */
#main .lisa-secao .lisa-secao__apoio {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- secao que abre com infografico ---------- */
/*
 * O titulo ja esta desenhado dentro da arte. O h2 fica no HTML, para leitor de
 * tela e buscador, mas sai da tela, e a secao perde o respiro de cima, que so
 * existia para esse titulo.
 */
.lisa-secao--infografico { padding-top: 0; }
.lisa-secao--infografico > .lisa-largo { margin-top: 0; }

.lisa-secao--infografico > .fusion-row h2 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- a secao ocupa a largura da tela ---------- */
/*
 * O #main do tema tem 50px de respiro de cada lado, e as secoes de largura
 * total do proprio Avada saem desse respiro com uma margem negativa guardada
 * em --hundredp_padding-hundred_percent_negative_margin. As secoes novas usam
 * a MESMA variavel, em vez de um -50px chutado: assim elas acompanham o tema
 * em cada tamanho de tela, sem numero magico e sem risco de rolagem lateral.
 */
.width-100 .lisa-secao,
.width-100 .lisa-faixa {
  margin-left: var(--hundredp_padding-hundred_percent_negative_margin);
  margin-right: var(--hundredp_padding-hundred_percent_negative_margin);
}

/* ---------- secoes da home de ponta a ponta ---------- */
/*
 * A home nao usa o modelo de largura total, entao cada secao fica presa na
 * caixa de 1200px do tema. A linha do tempo e a faixa PREPARE-SE saem dela.
 *
 * O #wrapper vira referencia de largura (container-type) e a secao estica ate
 * 100cqw, que e a largura do #wrapper SEM a barra de rolagem. Com 100vw a
 * barra entraria na conta e criaria rolagem lateral. Navegador sem suporte a
 * cqw ignora a regra e mostra a secao na caixa, como era antes.
 *
 * A linha do tempo e uma imagem de 2400px, entao a linha interna tambem
 * libera a largura (--total). Na faixa PREPARE-SE so o fundo estica; o texto
 * e o botao continuam centralizados na caixa.
 */
.home #wrapper { container-type: inline-size; }

.home #main .lisa-sangra {
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
  max-width: none;
}

/* O builder grava max-width e margem inline nessa linha, dai o !important. */
.home #main .lisa-sangra--total > .fusion-row {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.home #main .lisa-sangra--total .fusion-layout-column,
.home #main .lisa-sangra--total .fusion-column-wrapper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.home #main .lisa-sangra--total img { width: 100%; height: auto; }

/* ---------- rolagem que encaixa a secao ---------- */
/*
 * Cada secao vira um ponto de parada da rolagem, para nao sobrar meia secao na
 * tela. E "proximity", nao "mandatory": o encaixe acontece quando a pessoa
 * para perto de uma borda, e nao a cada pixel. Com secoes mais altas que a
 * tela, o mandatory prende a rolagem e da a sensacao de que a pagina travou.
 *
 * O scroll-margin-top desconta o cabecalho fixo, senao o topo da secao para
 * escondido atras dele.
 *
 * Fica so no desktop: no celular as secoes ja ocupam a tela quase inteira, e
 * encaixe em tela sensivel ao toque atrapalha mais do que ajuda. E sai do
 * caminho de quem pediu menos movimento no sistema.
 */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
  }

  .lisa-capa,
  .lisa-secao,
  .lisa-faixa,
  #main > .fusion-fullwidth {
    scroll-margin-top: 94px;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .lisa-cards,
  .lisa-galeria { grid-template-columns: repeat(2, 1fr); }
  .lisa-cards > .lisa-card { flex-basis: calc((100% - 24px) / 2); }
  .lisa-etapas { grid-template-columns: repeat(2, 1fr); }
  .lisa-etapas::before { display: none; }
}

@media (max-width: 640px) {
  .lisa-secao .lisa-infografico,
  .lisa-secao .lisa-galeria { margin-left: 0; margin-right: 0; }
  .lisa-cards,
  .lisa-cards--2,
  .lisa-galeria,
  .lisa-numeros,
  .lisa-etapas { grid-template-columns: 1fr; }
  .lisa-cards > .lisa-card,
  .lisa-cards--2 > .lisa-card { flex-basis: 100%; }
  .lisa-secao { padding: 40px 0; }
  .lisa-secao--infografico { padding-top: 0; }
  .lisa-secao h2 { font-size: 24px; }
  .lisa-faixa h2 { font-size: 26px; }
}

/* ---------- banner fixo do celular de ponta a ponta ---------- */
/*
 * O slider do celular virou imagem fixa (velocidade). O slider se esticava ate
 * as bordas por JavaScript; a imagem usa a mesma referencia de largura das
 * outras secoes da home (100cqw do #wrapper), sem rolagem lateral.
 */
.home #main .lisa-banner-celular {
  display: block;
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
}