/* =========================================================================
   SOLUFLEX — base
   Tokens, tipografia, botões, títulos de seção, formas e utilitários.
   CSS de seção (hero, sobre, catálogo...) vive em outro arquivo.
   Sistema visual traduzido do template Billdins: destaque -> laranja da
   marca, escuro -> azul da marca.
   ========================================================================= */

/* No HTML, prefira <link rel="preconnect"> + <link rel="stylesheet"> das duas
   fontes: o @import abaixo é só o fallback autossuficiente do arquivo. */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* Cor — o triplet RGB acompanha cada cor porque véus e bordas usam
     rgba(var(--x-rgb), alfa) sem precisar de uma segunda variável por opacidade. */
  --laranja: #E37306;
  --laranja-rgb: 227, 115, 6;
  --laranja-esc: #B85B03;
  --laranja-esc-rgb: 184, 91, 3;

  --azul: #0A314B;
  --azul-rgb: 10, 49, 75;
  --azul-esc: #06202F;
  --azul-esc-rgb: 6, 32, 47;

  /* Cinza de texto puxado do azul da marca, não neutro: cinza neutro ao lado
     do laranja deixa o laranja ácido e a página sem temperatura. */
  --cinza: #55697B;
  --cinza-rgb: 85, 105, 123;

  --branco: #FFFFFF;
  --branco-rgb: 255, 255, 255;

  /* Fundo alternado: azul dessaturado quase branco, mesma razão do cinza. */
  --claro: #F2F5F7;
  --claro-rgb: 242, 245, 247;

  --linha: #DCE3E9;
  --linha-rgb: 220, 227, 233;

  --zap: #25D366;
  --zap-rgb: 37, 211, 102;
  --zap-esc: #1DA851;

  /* Tipografia */
  --fonte: 'Public Sans', system-ui, -apple-system, sans-serif;
  --fonte-display: 'Exo', 'Public Sans', system-ui, sans-serif;

  /* Forma */
  --raio: 5px;
  --raio-g: 10px;
  --sombra: 0 0 35px rgba(0, 0, 0, .06);
  --sombra-g: 0 0 60px rgba(4, 23, 26, .07);

  /* Métrica */
  --largura: 1350px;
  --largura-larga: 1590px;
  --gutter: 15px;
  --gap: 30px;

  /* Durações do template. Usar sempre estas, não inventar número novo. */
  --t-micro: 200ms;    /* ícone, seta, cor de link */
  --t-ui: 500ms;       /* hover de botão, card, imagem */
  --t-conteudo: 800ms; /* revelação de conteúdo dentro de um card */
  --t-entrada: 700ms;  /* entrada de bloco na rolagem */
  --t-ken: 6000ms;     /* Ken Burns, sempre linear */

  /* Curva da entrada, a mesma do site do Darlei: sai rápido e assenta devagar.
     Com ease e 1500ms o bloco chegava arrastando e a página parecia lenta. */
  --curva-entrada: cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================================
   2. RESET E TIPOGRAFIA BASE
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/26px var(--fonte);
  color: var(--cinza);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.travado { overflow: hidden; }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--laranja-esc);   /* 5,25:1 sobre branco; o da marca dá 3,12:1 */
  text-decoration: none;
  transition: color var(--t-ui) ease;
}

a:hover { color: var(--laranja-esc); }

/* Respiro é sempre do componente: sem margem herdada, sem colapso surpresa. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--azul);
  font-family: var(--fonte-display);
  text-transform: none;
}

h1 { font-size: 64px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 48px; line-height: 58px; font-weight: 700; }
h3 { font-size: 25px; line-height: 35px; font-weight: 700; } /* card grande */
h4 { font-size: 22px; line-height: 28px; font-weight: 600; } /* card de serviço */
h5 { font-size: 20px; line-height: 28px; font-weight: 600; } /* card pequeno */
h6 { font-size: 18px; line-height: 25px; font-weight: 600; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

::selection {
  background: var(--laranja);
  color: var(--branco);
}

/* =========================================================================
   3. LAYOUT
   ========================================================================= */

/* Os três selecionados juntos de propósito: os modificadores TÊM QUE FUNCIONAR
   SOZINHOS. Enquanto `--largo` e `--estreito` só carregavam o max-width, quem
   escrevesse `class="container--estreito"` sem o `container` do lado ficava sem
   recuo e sem centralização, e o texto encostava na beira da tela. Aconteceu
   calado na política de privacidade e na página de obrigado. */
.container,
.container--largo,
.container--estreito {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container { max-width: var(--largura); }
.container--largo { max-width: var(--largura-larga); }
.container--estreito { max-width: 860px; }

.secao { padding: 120px 0; }

/* Para grids cujos cards já carregam margin-bottom: 30px — 90 + 30 fecha os
   mesmos 120px ópticos do padrão sem sobrar respiro no último item. */
.secao--cards { padding: 120px 0 90px; }

.grid {
  display: grid;
  gap: var(--gap);
}

.rel { position: relative; z-index: 1; }

/* =========================================================================
   4. OLHO (eyebrow com alvo)
   Marcação: <div class="olho"><span class="olho__linha"></span>Texto</div>
   Centralizado: acrescente .olho--centro e um segundo .olho__linha no fim.
   ========================================================================= */

.olho {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  /* Laranja escuro e não o da marca: #E37306 sobre branco dá 3,12:1 e este
     texto tem 18px, abaixo do limite de "texto grande". Em fundo escuro a
     regra .olho--branco troca por branco, e aí não há problema. */
  color: var(--laranja-esc);
  font-family: var(--fonte-display);
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  text-transform: uppercase;
}

.olho--centro { justify-content: center; }

.olho__linha {
  position: relative;
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 2px;
  margin-right: 15px;
  background: var(--laranja);
}

/* Ponto sólido de 5px na ponta da linha... */
.olho__linha::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--laranja);
  transform: translateY(-50%);
}

/* ...dentro de um anel de 10px: o "alvo" que abre toda seção. */
.olho__linha::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--laranja);
  border-radius: 50%;
  transform: translateY(-50%);
}

.olho--centro .olho__linha:last-child {
  margin-right: 0;
  margin-left: 15px;
}

.olho--centro .olho__linha:last-child::before { right: auto; left: 0; }
.olho--centro .olho__linha:last-child::after { right: auto; left: -2px; }

.olho--branco { color: var(--branco); }
.olho--branco .olho__linha,
.olho--branco .olho__linha::before { background: var(--branco); }
.olho--branco .olho__linha::after { border-color: var(--branco); }

/* =========================================================================
   5. TÍTULO DE SEÇÃO
   ========================================================================= */

/* -5px cancela o meio-leading do olho (25px de line-height sobre 18px de
   corpo), alinhando o topo visual do bloco com o topo da coluna vizinha. */
.sec-titulo {
  position: relative;
  display: block;
  margin-top: -5px;
  padding-bottom: 47px;
  z-index: 1;
}

.sec-titulo__texto {
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 48px;
  line-height: 58px;
  font-weight: 700;
  text-transform: none;
}

.sec-titulo--centro { text-align: center; }
.sec-titulo--centro .olho { justify-content: center; }
.sec-titulo--compacto { padding-bottom: 30px; }

.sec-titulo--branco .sec-titulo__texto,
.sec-titulo__texto.sec-titulo--branco { color: var(--branco); }

.sec-titulo--branco .sec-titulo__apoio,
.sec-titulo--branco > p { color: rgba(var(--branco-rgb), .8); }

/* =========================================================================
   6. BOTÕES
   ========================================================================= */

.btn {
  --btn-fundo: var(--laranja);
  --btn-cor: var(--branco);
  --btn-preenche: var(--azul);
  --btn-cor-hover: var(--branco);

  position: relative;
  display: inline-block;
  padding: 0 35px;
  border: 0;
  border-radius: var(--raio);
  background: var(--btn-fundo);
  color: var(--btn-cor);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 55px;
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--t-ui) ease;
  z-index: 1;
}

/* Um único ::before substitui os quatro spans do template: dentro do contexto
   de empilhamento do botão, z-index -1 pinta acima do fundo e abaixo do texto. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-preenche);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-ui) ease;
  z-index: -1;
}

.btn:hover {
  color: var(--btn-cor-hover);
}

.btn:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn i,
.btn svg {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  vertical-align: middle;
  transition: transform var(--t-micro) ease;
}

.btn svg { width: 1em; height: 1em; }
.btn:hover i,
.btn:hover svg { transform: translateX(4px); }

.btn--branco {
  --btn-fundo: var(--branco);
  --btn-cor: var(--azul);
  --btn-preenche: var(--laranja);
}

/* O contorno de 1px sai do line-height para a altura fechar os mesmos 55px. */
.btn--linha {
  --btn-fundo: transparent;
  --btn-cor: var(--azul);
  --btn-preenche: var(--laranja);
  border: 1px solid rgba(var(--azul-rgb), .25);
  line-height: 53px;
  transition: color var(--t-ui) ease, border-color var(--t-ui) ease;
}

.btn--linha:hover { border-color: var(--laranja); }

/* Autossuficiente de propósito: usado sozinho, sem precisar vir junto de .btn--linha.
   Modificador que só funciona em par falha calado e vira botão laranja em cima de
   fundo laranja, que foi exatamente o que aconteceu no hero. */
.btn--linha-branco {
  --btn-fundo: transparent;
  --btn-cor: var(--branco);
  --btn-preenche: var(--branco);
  --btn-cor-hover: var(--azul);
  border: 1px solid rgba(var(--branco-rgb), .45);
  line-height: 53px;
  transition: color var(--t-ui) ease, border-color var(--t-ui) ease;
}

.btn--linha-branco:hover { border-color: var(--branco); }

.btn--zap {
  --btn-fundo: var(--zap);
  --btn-preenche: var(--zap-esc);
}

/* Flex e não block: em inline-block o rótulo comprido quebra e a SETA cai
   sozinha na segunda linha, que foi o que aconteceu no botão do simulador. */
.btn--bloco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Botão pequeno, para caixa estreita (o aviso de cookie). Os 55px do botão padrão
   ocupam metade da altura de uma caixinha dessas. */
.btn--peq {
  padding: 0 22px;
  font-size: 13px;
  line-height: 42px;
}

/* Botão de duas linhas do hero: rótulo em cima, frase de apoio embaixo. O
   line-height fixo de 55px da base não serve aqui, por isso o inline-flex com
   padding próprio. */
.btn--alto {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  line-height: 1.25;
  text-align: left;
}

.btn--alto > svg:first-child {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
}

.btn--alto span { display: block; }

.btn--alto em {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  opacity: .85;
}

/* Botão de texto: sem caixa, vira laranja no hover. */
.btn-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* O reset é para quando a classe está num <button>: sem ele vem a moldura
     cinza nativa do navegador e o botão de texto deixa de ser de texto. */
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font-family: var(--fonte);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color var(--t-ui) ease;
}

.btn-texto:hover { color: var(--laranja); }

.btn-texto i,
.btn-texto svg { transition: transform var(--t-micro) ease; }
.btn-texto:hover i,
.btn-texto:hover svg { transform: translateX(4px); }

/* =========================================================================
   7. FORMAS DECORATIVAS
   ========================================================================= */

/* Canto superior direito chanfrado. */
.corte-diagonal {
  clip-path: polygon(84% 0, 100% 14%, 100% 100%, 0 100%, 0 0);
}

/* Cunha: bloco com a lateral direita cortada em diagonal. */
.cunha {
  clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
}

.cunha--dupla { position: relative; z-index: 1; }

/* Camada de trás deslocada 30px, mesma cor em alfa .67: dá profundidade sem
   segundo elemento no HTML. */
.cunha--dupla::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  right: -30px;
  background: rgba(var(--laranja-rgb), .67);
  clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
  z-index: -1;
}

.cunha--dupla-azul::before { background: rgba(var(--azul-rgb), .67); }

/* Topo em rampa, para card que encosta numa imagem. */
.rampa {
  clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 100%);
}

/* Duas barras gigantes atravessando a seção na diagonal. */
.faixa-diagonal {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.faixa-diagonal::before,
.faixa-diagonal::after {
  content: "";
  position: absolute;
  top: -60%;
  height: 220%;
  transform: rotate(40deg);
  pointer-events: none;
  z-index: -1;
}

.faixa-diagonal::before {
  left: 6%;
  width: 260px;
  background: var(--branco);
  mix-blend-mode: soft-light;
}

.faixa-diagonal::after {
  left: 27%;
  width: 90px;
  background: var(--laranja);
}

/* Orelha triangular no canto: o ícone parece um pedaço de fita dobrado. */
.aba-dobrada { position: relative; overflow: hidden; }

.aba-dobrada::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 26px solid var(--laranja);
  border-left: 26px solid transparent;
}

.aba-dobrada--azul::after { border-bottom-color: var(--azul); }
.aba-dobrada--branco::after { border-bottom-color: var(--branco); }
.aba-dobrada--topo::after { top: 0; bottom: auto; transform: scaleY(-1); }

/* Diagonal em coluna estreita vira lixo: no mobile a caixa volta a ser reta. */
@media (max-width: 991px) {
  .corte-diagonal,
  .cunha,
  .cunha--dupla::before,
  .rampa { clip-path: none; }

  .cunha--dupla::before { display: none; }

  .faixa-diagonal::before,
  .faixa-diagonal::after { display: none; }
}

/* =========================================================================
   8. BLUEPRINT (grade técnica de fundo)
   ========================================================================= */

.blueprint {
  --blueprint-cor: rgba(var(--azul-rgb), .07);
  --blueprint-passo: 40px;
  background-image:
    repeating-linear-gradient(0deg, var(--blueprint-cor) 0 1px, transparent 1px var(--blueprint-passo)),
    repeating-linear-gradient(90deg, var(--blueprint-cor) 0 1px, transparent 1px var(--blueprint-passo));
}

.blueprint--claro { background-color: var(--claro); }

.blueprint--escuro {
  --blueprint-cor: rgba(var(--branco-rgb), .06);
  background-color: var(--azul);
}

.blueprint--fino { --blueprint-passo: 20px; }

/* =========================================================================
   9. BOTÃO DE PLAY COM ANÉIS
   Marcação: <a class="play"><i></i><span class="anel"></span> x3 </a>
   ========================================================================= */

.play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--laranja);
  font-size: 20px;
  transition: background var(--t-ui) ease, color var(--t-ui) ease;
}

.play::before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px solid rgba(var(--branco-rgb), .35);
  border-radius: 50%;
}

.play:hover {
  background: var(--laranja);
  color: var(--branco);
}

.anel {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--branco-rgb), .5);
  border-radius: 50%;
  animation: play-anel 2900ms linear infinite;
  pointer-events: none;
}

.anel:nth-child(2) { animation-delay: 1000ms; }
.anel:nth-child(3) { animation-delay: 2000ms; }

@keyframes play-anel {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* =========================================================================
   10. NÚMERO VAZADO
   ========================================================================= */

/* -webkit-text-fill-color em vez de color: transparent — com a cor transparente
   o currentColor do contorno também sumiria. */
.num-vazado {
  color: var(--azul);
  font-family: var(--fonte-display);
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
  transition: color var(--t-ui) ease, -webkit-text-fill-color var(--t-ui) ease;
}

.num-vazado.ativo {
  color: var(--laranja);
  -webkit-text-fill-color: var(--laranja);
}

.num-vazado--branco { color: var(--branco); }

/* =========================================================================
   12. CARDS E RAIO
   ========================================================================= */

.card {
  position: relative;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: box-shadow var(--t-ui) ease, transform var(--t-ui) ease;
}

.bloco {
  position: relative;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
}

/* Raio não uniforme: um canto reto é a assinatura do sistema. */
.raio-l { border-radius: 0 var(--raio-g) var(--raio-g) var(--raio-g); }
.raio-r { border-radius: var(--raio-g) 0 var(--raio-g) var(--raio-g); }
.raio-b { border-radius: var(--raio-g) var(--raio-g) var(--raio-g) 0; }
.raio-0 { border-radius: 0; }

/* =========================================================================
   13. UTILITÁRIOS DE COR E TEXTO
   ========================================================================= */

.fundo-claro   { background: var(--claro); }
.fundo-azul    { background: var(--azul); color: rgba(var(--branco-rgb), .8); }
.fundo-laranja { background: var(--laranja); color: rgba(var(--branco-rgb), .9); }

.fundo-azul h1, .fundo-azul h2, .fundo-azul h3,
.fundo-azul h4, .fundo-azul h5, .fundo-azul h6,
.fundo-laranja h1, .fundo-laranja h2, .fundo-laranja h3,
.fundo-laranja h4, .fundo-laranja h5, .fundo-laranja h6 { color: var(--branco); }

/* Véu sobre imagem — a razão dos triplets RGB nos tokens. */
.veu { position: relative; z-index: 1; }

.veu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--azul-rgb), .8);
  z-index: -1;
}

.veu--suave::before  { background: rgba(var(--azul-rgb), .55); }
.veu--laranja::before { background: rgba(var(--laranja-rgb), .8); }

.centro   { text-align: center; }
.laranja  { color: var(--laranja); }
.azul     { color: var(--azul); }
.branco   { color: var(--branco); }
.capa     { background-size: cover; background-position: center; }
.corta    { overflow: hidden; }

/* =========================================================================
   14. ANIMAÇÃO
   ========================================================================= */

/* Revelação por ANIMATION, não por transition. Card tem transition própria pro
   hover (transform, box-shadow), e uma segunda declaração de `transition` no
   mesmo elemento apaga a primeira: os cards apareciam de estalo e o escalonamento
   d1..d6 ia junto. Animation não disputa com transition nenhuma.
   Sem fill-mode forwards de propósito: o preenchimento venceria o transform do
   hover depois de a animação acabar, e o card não levantaria mais. */
.d1 { transition-delay:  90ms; animation-delay:  90ms; }
.d2 { transition-delay: 180ms; animation-delay: 180ms; }
.d3 { transition-delay: 270ms; animation-delay: 270ms; }
.d4 { transition-delay: 360ms; animation-delay: 360ms; }
.d5 { transition-delay: 450ms; animation-delay: 450ms; }
.d6 { transition-delay: 540ms; animation-delay: 540ms; }

/* O estado escondido só existe com JS ligado e movimento permitido: sem isso o
   conteúdo nasce visível, nunca some por causa de script que não rodou. */
@media (prefers-reduced-motion: no-preference) {
  .js .entra,
  .js .entra--esq,
  .js .entra--dir,
  .js .entra--baixo { opacity: 0; }

  /* Longhand, nunca o atalho `animation`: o atalho zera o animation-delay, e
     como esta regra é mais específica que .d1, ela levava o escalonamento junto. */
  .js .entra.vem,
  .js .entra--esq.vem,
  .js .entra--dir.vem,
  .js .entra--baixo.vem {
    opacity: 1;
    animation-name: revela-baixo;
    animation-duration: var(--t-entrada);
    animation-timing-function: var(--curva-entrada);
    animation-fill-mode: backwards;
  }

  .js .entra--esq.vem { animation-name: revela-esq; }
  .js .entra--dir.vem { animation-name: revela-dir; }
}

/* backwards: no tempo do atraso o elemento fica no quadro inicial, que é o que
   dá o escalonamento. Depois da animação nada fica preso. */
@keyframes revela-baixo { from { opacity: 0; transform: translateY(20px); } }
@keyframes revela-esq   { from { opacity: 0; transform: translateX(-28px); } }
@keyframes revela-dir   { from { opacity: 0; transform: translateX(28px); } }

@keyframes flutua-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

@keyframes flutua-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}

@keyframes gira {
  to { transform: rotate(360deg); }
}

@keyframes ken {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

.flutua-y { animation: flutua-y 3s ease-in-out infinite; }
.flutua-x { animation: flutua-x 3s ease-in-out infinite; }
.gira     { animation: gira 12s linear infinite; }
.ken      { animation: ken var(--t-ken) linear infinite alternate; }

/* =========================================================================
   15. ACESSIBILIDADE
   ========================================================================= */

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

.pula {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
}

.pula:focus {
  left: 15px;
  top: 15px;
  padding: 10px 20px;
  border-radius: var(--raio);
  background: var(--laranja);
  color: var(--branco);
  font-weight: 600;
}

/* Único lugar do arquivo com !important: precisa vencer qualquer animação
   declarada nas seções, escritas depois deste arquivo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .entra,
  .entra--esq,
  .entra--dir,
  .entra--baixo {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   16. RESPONSIVO
   ========================================================================= */

@media (max-width: 1199px) {
  h1 { font-size: 52px; }
}

@media (max-width: 991px) {
  .secao { padding: 90px 0; }
  .secao--cards { padding: 90px 0 60px; }

  h1 { font-size: 44px; }
  h2,
  .sec-titulo__texto { font-size: 38px; line-height: 48px; }

  .sec-titulo { padding-bottom: 36px; }
  .play { width: 70px; height: 70px; font-size: 16px; }
}

@media (max-width: 767px) {
  .secao { padding: 70px 0; }
  .secao--cards { padding: 70px 0 40px; }

  h1 { font-size: 36px; line-height: 1.25; }
  h2,
  .sec-titulo__texto { font-size: 30px; line-height: 42px; }
  h3 { font-size: 22px; line-height: 30px; }

  .olho { font-size: 16px; }

  /* A quebra manual do título é desenhada para a largura do desktop; no mobile
     ela cria uma linha órfã. */
  .sec-titulo__texto br { display: none; }

  /* O .btn--alto precisa reafirmar o padding vertical: esta regra vem depois
     dele no arquivo e com a mesma especificidade, então `padding: 0 26px`
     zerava o respiro de cima e de baixo e achatava o botão de duas linhas. */
  .btn { padding: 0 26px; }
  .btn--alto { padding: 14px 26px; }
  /* Mesma armadilha do --alto: a regra genérica acima vem depois no arquivo. */
  .btn--peq { padding: 0 22px; }

}

/* ALVO DE TOQUE. No celular o dedo pede 44px, e .btn-texto tinha 26 de altura:
   o link funcionava e errar nele era fácil. O padding vertical não muda o
   desenho (o texto continua no mesmo lugar), só aumenta a área que aceita o
   toque, e o margin negativo devolve o espaço ao layout.
   991 e não 767: a barra de menu já virou hambúrguer aos 991, ou seja, dali
   para baixo quem navega é dedo. Com o corte em 767, o tablet de 768 ficava com
   seis "Pedir orçamento" de 26px na página de categoria, medidos. */
@media (max-width: 991px) {
  .btn-texto {
    padding-block: 9px;
    margin-block: -9px;
  }
}

/* =========================================================================
   17. TELEFONE
   Número de telefone é o que o visitante procura com o olho na página inteira.
   Uma classe só, aplicada em todo lugar onde ele aparece (barra do topo, rodapé,
   contato, orçamento, gaveta do celular), pra não haver um negrito por seção.
   ========================================================================= */

.fone {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}