/* Loja Online (Compre Óculos) — 22/09/2026
   Só o que a página nova precisa; o resto vem de style.css/base.css.

   Sobre espaçamento: o .section-smt do template só tem padding-top (70px) — o
   "fundo" de cada faixa vinha do margin-bottom:50px do .section-title, ou seja,
   por acidente. Aqui cada faixa (.lo-secao) tem respiro próprio em cima e
   embaixo, e o ritmo dentro do bloco é declarado nas variáveis abaixo. */

:root {
  --lo-faixa: 96px;   /* respiro de cada faixa, em cima e embaixo */
  --lo-grupo: 24px;   /* dentro de um grupo: título -> texto, parágrafo a parágrafo */
  --lo-solto: 48px;   /* antes do botão, que é o próximo passo e não o mesmo grupo */
  --lo-medida: 62ch;  /* largura de leitura (o col do Bootstrap dava ~110 caracteres) */
}

/* ------------------------------------------------- banner institucional */
.lo-banner {
  background-color: #000000;
}

.lo-banner a {
  display: block;
}

.lo-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------- faixas */
.lo-secao {
  padding-top: var(--lo-faixa);
  padding-bottom: var(--lo-faixa);
}

.lo-secao .section-title {
  margin-bottom: 0;
}

.lo-secao .section-title h4.subheading {
  margin-bottom: 12px;
}

.lo-secao .section-title h2 {
  margin-bottom: 0;
  text-wrap: balance;
}

.lo-secao .section-title p {
  max-width: var(--lo-medida);
  margin-top: var(--lo-grupo);
  margin-bottom: 0;
}

/* ------------------------------------------------- apresentação */
.lo-abre .section-title {
  margin-bottom: 40px;
}

.lo-abre .lo-texto {
  max-width: var(--lo-medida);
  margin: 0 auto;
}

.lo-abre .lo-texto p {
  margin-bottom: 0;
}

.lo-abre .lo-texto p + p {
  margin-top: var(--lo-grupo);
}

/* ------------------------------------------------- Conveniência (título à
   esquerda, texto à direita: quebra a repetição de blocos centralizados)

   Conveniência e "Por que escolher" são apoio: o título delas fica um degrau
   abaixo do "Agora a SR também está online!", que é a voz principal da página.
   O responsive.css muda o .section-title h2 em 1199, 1024 e 767 px — a escada
   abaixo acompanha os mesmos pontos, senão o apoio fica MAIOR que o principal. */
.lo-split .section-title h2,
.lo-fecho .section-title h2 {
  font-size: 30px;
  line-height: 40px;
}

.lo-split .section-title h2 strong,
.lo-fecho .section-title h2 strong {
  letter-spacing: -1px;
}

.lo-split .lo-corpo p {
  max-width: var(--lo-medida);
  margin-bottom: 0;
  font-size: 17px;
  line-height: 30px;
}

/* lado a lado, a primeira linha do texto alinha com a primeira linha do TÍTULO
   e não com o "Conveniência" (14/24 px + 12 px de respiro = 36 px acima do h2);
   senão o olho lê rótulo -> texto -> título, fora de ordem */
@media (min-width: 992px) {
  .lo-split .lo-corpo {
    padding-top: 34px;
  }
}

/* ------------------------------------------------- fecho com o CTA */
.lo-fecho .section-title p {
  margin-left: auto;
  margin-right: auto;
}

/* o .btn do template nasce com float:left e margin-left:15px (pensado para
   coluna alinhada à esquerda); aqui as seções são centralizadas */
.lo-cta {
  margin-top: var(--lo-solto);
  text-align: center;
}

.lo-cta .btn {
  float: none;
  margin-left: 0;
  margin-bottom: 0;
}

/* ------------------------------------------------- telas menores */
@media (max-width: 1199px) {
  .lo-split .section-title h2,
  .lo-fecho .section-title h2 {
    font-size: 27px;
    line-height: 37px;
  }

  /* o botão do rodapé é mais largo que a col-lg-3 entre 992 e 1199 px e vaza
     para fora da tela (o .btn do template é float:left, então o text-lg-right
     não segura). Defeito do template — vale para as outras páginas também. */
  .footer-top .row > .col-lg-9 {
    flex: 0 0 58%;
    max-width: 58%;
  }

  .footer-top .row > .col-lg-3 {
    flex: 0 0 42%;
    max-width: 42%;
  }

  .footer-top .col-lg-3 .btn {
    float: right;
  }
}

@media (max-width: 1024px) {
  .lo-split .section-title h2,
  .lo-fecho .section-title h2 {
    font-size: 24px;
    line-height: 34px;
  }
}

@media (max-width: 991px) {
  :root {
    --lo-faixa: 64px;
    --lo-solto: 40px;
  }

  .lo-split .lo-corpo {
    margin-top: var(--lo-grupo);
  }

  .footer-top .row > .col-lg-9,
  .footer-top .row > .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-top .col-lg-3 .btn {
    float: none;
  }
}

@media (max-width: 767px) {
  .lo-split .section-title h2,
  .lo-fecho .section-title h2 {
    font-size: 22px;
    line-height: 32px;
  }
}

@media (max-width: 575px) {
  :root {
    --lo-faixa: 48px;
    --lo-solto: 32px;
  }

  .lo-abre .section-title {
    margin-bottom: 28px;
  }

  .lo-split .lo-corpo p {
    font-size: 16px;
    line-height: 28px;
  }
}