/* =====================================================================
   BoraBola — folha do site
   Uma regra por elemento. Sem !important: se algo precisar vencer,
   é porque a regra está no lugar errado.
   ===================================================================== */

:root {
  --fundo:   #FBFCFD;
  --sur:     #FFFFFF;
  --sur2:    #F5F8FB;
  --sur3:    #EDF2F7;

  --linha:   rgba(29,36,48,.07);
  --linha2:  rgba(29,36,48,.13);

  --tinta:   #131720;
  --tinta2:  #55606F;
  --tinta3:  #7A8595;

  --a1:      #4E9E6A;
  --a2:      #58A876;
  --a3:      #3F855A;
  --a-fundo: #EDF6F0;
  --a-linha: #CBE2D6;

  --azul:  #5B93B8;  --azul-f:  #446C8C;
  --roxo:  #8A83C4;  --roxo-f:  #625BA0;
  --ambar: #C08A3E;
  --rosa:  #B5647F;
  --ciano: #4E93A0;

  --erro:  #C0554F;

  --s1: 0 1px 2px rgba(29,36,48,.04);
  --s2: 0 1px 2px rgba(29,36,48,.03), 0 10px 20px -12px rgba(29,36,48,.12);
  --s3: 0 1px 2px rgba(29,36,48,.03), 0 10px 20px -12px rgba(29,36,48,.12),
        0 28px 54px -26px rgba(29,36,48,.20);

  --raio:   16px;
  --raio-g: 22px;
  --largura: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 16px/1.6 Poppins, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
p  { margin: 0; }
a  { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- estrutura ---------- */

.conteudo {
  width: min(100% - 40px, var(--largura));
  margin-inline: auto;
}
.conteudo.estreito { width: min(100% - 40px, 760px); }
.centro { text-align: center; }

.secao { padding: clamp(56px, 8vw, 96px) 0; background: var(--fundo); }
.secao.escura {
  background: linear-gradient(118deg, var(--sur2), var(--a-fundo));
  border-block: 1px solid var(--linha);
}

.cabeca { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.cabeca h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  background: linear-gradient(100deg, var(--tinta), var(--tinta2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.sub {
  font-size: clamp(14.5px, 1.4vw, 16.5px);
  color: var(--tinta2);
  max-width: 620px;
  margin-inline: auto;
  line-height: 1.65;
}

/* ---------- etiqueta ---------- */

.cravo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--a-fundo), #E4F0EA);
  border: 1px solid var(--a-linha);
  box-shadow: var(--s1);
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a3);
}
.cravo svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }
.pisca {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a1);
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- barra do topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251,252,253,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo .faixa {
  display: flex; align-items: center; gap: 26px;
  width: min(100% - 40px, var(--largura));
  margin-inline: auto;
  padding-block: 14px;
}
/* A logo tem 340x106 nativos: proporcao 3.2075.
   Altura e largura saem da mesma variavel para nunca distorcer.
   104px e o teto sem esticar o raster. */
.topo {
  --logo-alta: 104px;
  --logo-prop: 1.3591;
}
.topo .marca {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: 30px;
}
.topo .marca img {
  position: absolute;
  top: 0; left: 0;
  height: var(--logo-alta);
  width: calc(var(--logo-alta) * var(--logo-prop));
  max-width: none;
  filter: drop-shadow(0 12px 20px rgba(19,42,29,.20));
  transition: height .30s cubic-bezier(.2,.7,.2,1),
              width .30s cubic-bezier(.2,.7,.2,1),
              filter .30s ease;
}
.topo.preso .marca img {
  height: 30px;
  width: calc(30px * var(--logo-prop));
  filter: drop-shadow(0 0 0 rgba(19,42,29,0));
}
@media (max-width: 900px) { .topo { --logo-alta: 72px; } }
@media (max-width: 640px) { .topo { --logo-alta: 52px; } }
@media (prefers-reduced-motion: reduce) {
  .topo .marca img { transition: none; }
}
.topo .btn.pri { padding: 9px 18px; font-size: 13.5px; }
.menu { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.menu a { font-size: 14px; color: var(--tinta2); transition: color .18s; }
.menu a:hover { color: var(--tinta); }
.hamburguer { display: none; }

/* ---------- botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid var(--linha2);
  background: var(--sur);
  color: var(--tinta);
  font: 500 14px Poppins, sans-serif;
  cursor: pointer;
  box-shadow: var(--s1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--s2); }
.btn:active { transform: translateY(0); }

.btn.pri {
  background: linear-gradient(115deg, var(--a2), var(--a3));
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 18px -6px rgba(63,133,90,.5);
}
.btn.pri:hover { box-shadow: 0 12px 28px -8px rgba(63,133,90,.6); }

.btn.grande { padding: 14px 26px; font-size: 15px; }
.btn.vidro { background: rgba(255,255,255,.7); backdrop-filter: blur(8px); }

/* ---------- abertura ---------- */

.abertura {
  position: relative;
  padding: clamp(44px, 6vw, 78px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.abertura > .conteudo { position: relative; z-index: 3; }

.brilho {
  position: absolute; z-index: 1;
  border-radius: 50%; filter: blur(70px);
  pointer-events: none;
}
.brilho.b1 {
  width: 620px; height: 620px; top: -300px; right: -170px;
  background: radial-gradient(circle, rgba(78,158,106,.22), transparent 68%);
}
.brilho.b2 {
  width: 480px; height: 480px; bottom: -270px; left: -190px;
  background: radial-gradient(circle, rgba(91,147,184,.14), transparent 70%);
}
.bola-fundo {
  position: absolute; z-index: 1;
  right: -70px; bottom: -80px;
  width: min(420px, 46vw);
  opacity: .05;
  pointer-events: none;
}

.abre-grade {
  display: grid; grid-template-columns: 1.42fr .88fr;
  gap: 44px; align-items: center;
}
.abre-texto { min-width: 0; }

.abertura h1 { font-size: clamp(32px, 4.6vw, 52px); }
.abertura h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--a1) 0%, var(--azul) 56%, var(--roxo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chamada {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--tinta2);
  max-width: 500px;
  margin-top: 16px;
  line-height: 1.65;
}
.botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.numeros { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cx-num {
  padding: 15px 18px;
  border-radius: var(--raio);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 44%, #EEF1F5 100%);
  border: 1px solid var(--linha);
  box-shadow: var(--s2);
  transition: transform .22s, box-shadow .22s;
}
.cx-num:hover { transform: translateY(-2px); box-shadow: var(--s3); }
.cx-num b { display: block; font-size: 30px; font-weight: 600; line-height: 1; }
.cx-num span { display: block; font-size: 12px; color: var(--tinta3); margin-top: 5px; }
.cx-num:nth-child(1) b { color: var(--a3); }
.cx-num:nth-child(2) b { color: var(--azul-f); }
.cx-num:nth-child(3) b { color: var(--roxo-f); }

/* fundo rotativo */
.fundo-rodizio { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fundo-rodizio .quadro {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.fundo-rodizio .quadro.vendo { opacity: 1; }
.fundo-rodizio::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg,
    rgba(251,252,253,.97) 0%, rgba(251,252,253,.93) 40%,
    rgba(251,252,253,.62) 74%, rgba(251,252,253,.34) 100%);
}

/* ---------- cartões ---------- */

.cards {
  display: grid;
  /* Com o icone ao lado, o texto precisa de mais espaco: abaixo de 340px
     sobram duas palavras por linha. Sao tres por linha em tela grande, em
     vez de quatro. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

/* Em tela estreita o texto ao lado do icone fica com poucas letras por
   linha; ai o icone volta para cima. */
.card {
  --c:  var(--a1);
  --cs: 63,133,90;
  position: relative;
  overflow: hidden;
  padding: 22px 22px 24px;
  /* Icone a esquerda, texto a direita: a leitura corre na horizontal
     e o cartao fica mais baixo, cabendo melhor no celular. */
  display: flex; gap: 15px; align-items: flex-start;
  /* O pe quebra para a linha de baixo em vez de virar uma terceira coluna. */
  flex-wrap: wrap;
  border-radius: var(--raio-g);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 42%, #EEF1F5 100%);
  border: 1px solid var(--linha);
  box-shadow: var(--s3);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}

/* O texto ocupa a coluna da direita inteira, com o titulo em cima e a
   descricao embaixo. Sem o display:block explicito, o h3 e o p herdavam
   o flex do cartao e ficavam lado a lado. */
.card .txt {
  flex: 1; min-width: 0;
  display: block;
}
.card .txt h3 { display: block; }
.card .txt p  { display: block; }
.card::after {
  content: "";
  position: absolute; top: -70px; right: -70px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cs), .14), transparent 68%);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--cs), .34);
  box-shadow: 0 2px 4px rgba(29,36,48,.04),
              0 16px 30px -14px rgba(29,36,48,.16),
              0 40px 70px -30px rgba(var(--cs), .32);
}

/* Sem caixa atras: o icone e o desenho em si, grande e na cor do cartao.
   O fundo claro competia com o traco, que e o que se reconhece de longe. */
.card .ico {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  color: var(--c2, var(--c));
}
.card .ico svg { width: 50px; height: 50px; }

.card h3 {
  font-size: 17px; color: var(--tinta); margin-bottom: 6px;
  /* Com o icone ao lado o espaco e menor; sem isso "Escolinhas e centros
     esportivos" quebrava em cinco linhas de uma palavra. */
  text-wrap: balance;
}
.card p  { font-size: 13.5px; color: var(--tinta2); line-height: 1.62; }

.card.cor-verde { --c: #4E9E6A; --cs: 63,133,90; }
.card.cor-azul  { --c: #5B93B8; --cs: 68,108,140; }
.card.cor-ambar { --c: #C08A3E; --cs: 192,138,62; }
.card.cor-roxo  { --c: #8A83C4; --cs: 98,91,160; }
.card.cor-rosa  { --c: #B5647F; --cs: 181,100,127; }
.card.cor-ciano { --c: #4E93A0; --cs: 78,147,160; }

/* ---------- passos ---------- */

.passos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; list-style: none; margin: 0; padding: 0;
  counter-reset: passo;
}
.passos li {
  position: relative;
  padding: 24px 22px 26px;
  border-radius: var(--raio-g);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 44%, #EEF1F5 100%);
  border: 1px solid var(--linha);
  box-shadow: var(--s2);
  transition: transform .24s, box-shadow .24s;
}
.passos li:hover { transform: translateY(-4px); box-shadow: var(--s3); }

/* A seta que liga um passo ao outro. Some no ultimo e quando os cartoes
   empilham, porque ai a leitura ja e de cima para baixo. */
.passos li::after {
  content: "";
  position: absolute; top: 50%; right: -13px;
  width: 20px; height: 20px; margin-top: -10px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity: .55;
}
.passos li:last-child::after { display: none; }
@media (max-width: 1000px) { .passos li::after { display: none; } }

/* Numero e icone lado a lado, no topo do cartao. */
.passo-topo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.passos .n {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--a2), var(--a3));
  color: #FFFFFF;
  font: 600 20px Poppins, sans-serif;
  box-shadow: 0 5px 14px -6px rgba(63,133,90,.5);
}
.passo-icone {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  color: var(--tinta);
}
.passo-icone svg { width: 46px; height: 46px; }

.passos h3 { font-size: 17px; margin-bottom: 7px; }
.passos p  { font-size: 13.5px; color: var(--tinta2); line-height: 1.6; }

/* A fileira de marcas embaixo dos passos. */
.passo-marcas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 26px;
}
.passo-marcas span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--sur); border: 1px solid var(--linha);
  box-shadow: var(--s1);
  font: 500 14px Poppins, sans-serif; color: var(--tinta);
}
.passo-marcas svg { width: 24px; height: 24px; color: var(--a2); }

.passo-acoes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 24px;
}

/* ---------- revenda ---------- */

.destaques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-block: 30px;
}
.destaques .cx {
  padding: 22px 20px;
  border-radius: var(--raio-g);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 44%, #EEF1F5 100%);
  border: 1px solid var(--linha);
  box-shadow: var(--s2);
  text-align: center;
  transition: transform .24s, box-shadow .24s;
}
.destaques .cx:hover { transform: translateY(-4px); box-shadow: var(--s3); }
.destaques .ico-min {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: linear-gradient(150deg, #E9F4EE, #F5FAF7);
  border: 1px solid var(--a-linha);
  color: var(--a3);
}
.destaques .ico-min svg { width: 20px; height: 20px; }
.destaques b    { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); margin-bottom: 5px; }
.destaques span { display: block; font-size: 13px; color: var(--tinta2); line-height: 1.55; }

.faixa code {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--sur);
  border: 1px solid var(--linha);
  color: var(--a3);
  font: 500 13px ui-monospace, monospace;
}

/* ---------- formulário ---------- */

/* CAMPOS_ANTIGOS_REMOVIDOS */
/* O estilo antigo dos campos vivia aqui, preso ao id do formulario.
   Seletor de id vence seletor de classe por mais abaixo que a classe
   esteja no arquivo, entao o recuo de 46px que abre espaco para o icone
   nunca valia, e o icone ficava sob o texto.

   Os campos foram refeitos em CAMPOS_DO_CONTATO, no fim do arquivo, com
   seletores de classe. As caixas de recado ficaram aqui: elas nao
   brigavam com nada. */

#f-aviso-revenda {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-radius: 13px;
  background: linear-gradient(120deg, var(--a-fundo), #E4F0EA);
  border: 1px solid var(--a-linha);
  color: var(--tinta2);
  font-size: 14px; line-height: 1.5;
}
#f-aviso-revenda b   { color: var(--a3); font-weight: 600; }
#f-aviso-revenda svg { width: 20px; height: 20px; flex: none; color: var(--a3); }

#f-erro {
  padding: 14px 16px; border-radius: 13px;
  background: #FCF2F1; border: 1px solid #EBC9C6;
  color: #A44A44; font-size: 14px;
}
.rodape-form { font-size: 13px; text-align: center; color: var(--tinta3); }

#f-pronto {
  max-width: 620px; margin: 34px auto 0;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(150deg, #F2F9F5, #E3F0E9);
  border: 1px solid var(--a-linha);
  box-shadow: var(--s3);
}
.marca-ok {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--a2), var(--a3));
  color: #FFFFFF;
  box-shadow: 0 8px 22px -8px rgba(63,133,90,.55);
}
.marca-ok svg { width: 32px; height: 32px; }
#f-pronto h3 { font-size: 23px; margin-bottom: 10px; }
#f-pronto p  { color: var(--tinta2); font-size: 15px; line-height: 1.65; }

/* ---------- rodapé ---------- */

.rodape {
  padding: clamp(40px, 5vw, 60px) 0 30px;
  background: linear-gradient(118deg, var(--sur2), var(--a-fundo));
  border-top: 1px solid var(--linha);
}
.rodape .colunas {
  display: grid;
  /* Cinco colunas: a da marca mais larga que as quatro de links. Era
     uma regra aqui e outra 350 linhas abaixo, a segunda so para trocar
     o numero de colunas -- agora e uma so. */
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 34px; margin-bottom: 32px;
}
.logo-rodape img { height: 28px; margin-bottom: 12px; }
.rodape .marca p { font-size: 13.5px; color: var(--tinta2); line-height: 1.6; max-width: 300px; }
.rodape h4 { font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
             color: var(--tinta3); margin: 0 0 12px; font-weight: 600; }
.rodape a { display: block; font-size: 14px; color: var(--tinta2); padding: 4px 0; transition: color .18s; }
.rodape a:hover { color: var(--a1); }
.rodape .fim {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px; color: var(--tinta3);
}

/* ---------- malha decorativa ---------- */

.malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(29,36,48,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,36,48,.028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 76%);
}

/* ---------- telas menores ---------- */

@media (max-width: 900px) {
  .abre-grade { grid-template-columns: 1fr; gap: 28px; }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .bola-fundo { right: 50%; transform: translateX(50%); bottom: -50px; width: 74vw; opacity: .045; }
  .fundo-rodizio::after {
    background: linear-gradient(180deg, rgba(251,252,253,.95), rgba(251,252,253,.88));
  }
}


/* o menu recolhido se apoia na faixa */
.topo .faixa { position: relative; }
.topo .faixa > .btn.pri { margin-left: 0; }

@media (max-width: 640px) {
  .menu { display: none; }
  .hamburguer {
    display: grid; place-items: center;
    width: 40px; height: 40px; margin-left: auto;
    border-radius: 11px; border: 1px solid var(--linha2);
    background: var(--sur); cursor: pointer;
  }
  .menu.aberto {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 14px 20px 20px;
    background: var(--sur);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--s2);
  }
  .menu.aberto a { padding: 11px 0; border-bottom: 1px solid var(--linha); }
  #form-contato .par { grid-template-columns: 1fr; }
  .botoes .btn { width: 100%; }
}

@media (max-width: 640px) {
  .topo .faixa > .btn.pri { display: none; }
  .topo .faixa { gap: 12px; }
  .menu.aberto {
    top: calc(100% + 0px);
  }
}


/* No celular o texto ao lado do icone fica com poucas letras por linha;
   ai o icone volta para cima. Precisa vir depois da regra base. */
@media (max-width: 480px) {
  .card { flex-direction: column; gap: 10px; }
}

/* ---------- Para quem vende ---------- */

.revenda-grade {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  /* A imagem manda na coluna da esquerda: ela e o que se ve primeiro. */
  .revenda-grade { grid-template-columns: 1.15fr 1fr; gap: 44px; }
}
@media (min-width: 1240px) {
  .revenda-grade { grid-template-columns: 1.25fr 1fr; gap: 52px; }
}
.revenda-palco img { width: 100%; height: auto; }

.revenda-texto h2 {
  font-size: clamp(30px, 4vw, 46px); line-height: 1.08;
  margin-bottom: 18px;
}
/* A segunda linha do titulo em verde, como no desenho. */
.revenda-texto h2 em { color: var(--a3); font-style: normal; display: block; }
.revenda-texto .sub { margin-bottom: 26px; max-width: 54ch; }
.revenda-texto code {
  padding: 3px 9px; border-radius: 7px;
  background: var(--a-fundo); border: 1px solid var(--a-linha);
  color: var(--a3); font: 500 14px ui-monospace, monospace;
}

.revenda-cx {
  display: grid; gap: 12px; margin-bottom: 26px;
  /* Tres colunas fixas: com auto-fit o terceiro cartao caia sozinho para
     a linha de baixo assim que a coluna apertava. */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 620px) { .revenda-cx { grid-template-columns: 1fr; } }
.rcx {
  display: flex; flex-direction: column;
  padding: 18px 16px 14px; border-radius: var(--raio-g);
  background: var(--sur); border: 1px solid var(--linha);
  box-shadow: var(--s1);
}
/* Sem caixa atras: o traco do icone e o que se reconhece, e ele cabe
   maior no mesmo espaco. */
.rcx-ico {
  width: 42px; height: 42px; margin-bottom: 14px;
  display: grid; place-items: center;
  color: var(--a3);
}
.rcx-ico svg { width: 38px; height: 38px; }
.rcx b { display: block; font-size: 15px; margin-bottom: 6px; }
.rcx span { display: block; font-size: 12.8px; color: var(--tinta2); line-height: 1.5; }
/* O numero grande e discreto no canto, como marca d'agua do cartao. */
/* O numero ganha a propria linha, no fim do cartao: no canto, ele
   encostava no texto quando a descricao ocupava tres linhas. */
.rcx-n {
  display: block; margin-top: auto; padding-top: 12px;
  text-align: right;
  font: 700 26px Poppins, sans-serif; font-style: normal;
  color: var(--linha2); letter-spacing: -.02em;
}

.revenda-btn { gap: 10px; }
.revenda-btn svg { width: 23px; height: 23px; }
.revenda-aviso {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 13.5px; color: var(--tinta2);
}
.revenda-aviso svg { width: 19px; height: 19px; flex: none; color: var(--a3); }

.revenda-fecho {
  margin-top: 44px; padding: 26px 24px;
  border-radius: var(--raio-g);
  background: var(--sur2); border: 1px solid var(--linha);
}
.revenda-fecho h3 {
  text-align: center; color: var(--a3);
  font-size: clamp(17px, 2.2vw, 21px); margin-bottom: 20px;
}
.revenda-itens {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.revenda-itens span {
  display: grid; grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto; gap: 2px 13px; align-items: start;
}
.revenda-itens svg { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--a2); margin-top: 1px; }
.revenda-itens b { font-size: 14.5px; }
.revenda-itens i { font-style: normal; font-size: 13px; color: var(--tinta2); }

/* ---------- topo e abertura escuros, so na inicial ----------
   O comeco da pagina e escuro, como o campo a noite; o resto do site
   segue claro. Cada regra pede body.inicial porque a pagina de
   contato usa esta mesma folha e herdava o fundo preto sem pedir. */
:root { --esc-topo: #0A1420; --esc-topo2: #0E1B2A; }

body.inicial .topo {
  background: rgba(10,20,32,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.inicial .topo .menu a { color: #A9BACB; }
body.inicial .topo .menu a:hover { color: #FFFFFF; }
body.inicial .topo .marca img { filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
body.inicial .topo.preso .marca img { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
body.inicial .topo .hamburguer {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #E6EDF5;
}
body.inicial .menu.aberto {
  background: var(--esc-topo2);
  border-bottom-color: rgba(255,255,255,.08);
}
body.inicial .menu.aberto a { border-bottom-color: rgba(255,255,255,.08); }

body.inicial .abertura {
  background: linear-gradient(165deg, var(--esc-topo) 0%, var(--esc-topo2) 62%, #0B2018 100%);
  color: #FFFFFF;
}
/* O veu sobre a foto inverte: era claro, agora escurece para o texto
   branco se ler. */
body.inicial .fundo-rodizio::after {
  background: linear-gradient(100deg,
    rgba(10,20,32,.95) 0%, rgba(10,20,32,.88) 42%,
    rgba(10,20,32,.55) 74%, rgba(11,32,24,.42) 100%);
}
@media (max-width: 860px) {
  body.inicial .fundo-rodizio::after { background: rgba(10,20,32,.9); }
}

/* O cravo vira contorno claro sobre o escuro. */
body.inicial .abertura .cravo {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.42);
  color: #4ADE80;
  box-shadow: none;
}
body.inicial .abertura .cravo .pisca { background: #22C55E; }

body.inicial .abertura h1 { color: #FFFFFF; }
body.inicial .abertura .chamada { color: #B9C7D6; }

/* Os cartoes de numero em vidro escuro, com a borda acesa. */
body.inicial .numeros .cx-num {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.8);
  color: #FFFFFF;
}
body.inicial .numeros .cx-num b { color: #FFFFFF; }
body.inicial .numeros .cx-num span { color: #A9BACB; }

/* O botao de vidro precisa de mais contraste no fundo escuro. */
body.inicial .abertura .btn.vidro {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.28);
  color: #FFFFFF;
}
body.inicial .abertura .btn.vidro:hover { border-color: rgba(255,255,255,.5); }

body.inicial .abertura .bola-fundo { opacity: .06; }

/* Icone a esquerda do numero, como no desenho. */
.numeros .cx-num { display: flex; align-items: center; gap: 14px; }
.cx-num-ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
  color: #4ADE80;
}
.cx-num-ico svg { width: 26px; height: 26px; }

/* Os tres numeros passam para a coluna do texto, logo acima dos botoes:
   a direita fica livre para a arte do fundo aparecer. */
.abre-texto .numeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 26px 0 24px; max-width: 620px;
}
.abre-texto .numeros .cx-num {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 14px;
}
.abre-texto .cx-num-ico { width: 38px; height: 38px; border-radius: 11px; }
.abre-texto .cx-num-ico svg { width: 22px; height: 22px; }
.abre-texto .numeros .cx-num b { font-size: 25px; line-height: 1; display: block; }
.abre-texto .numeros .cx-num span { font-size: 11.5px; line-height: 1.35; display: block; }

@media (max-width: 720px) {
  .abre-texto .numeros { grid-template-columns: 1fr; gap: 8px; max-width: 380px; }
  .abre-texto .numeros .cx-num { padding: 10px 12px; }
  .abre-texto .numeros .cx-num b { font-size: 21px; }
}

/* ---------- cartao com foto ---------- */

/* Com foto o cartao empilha: capa, selo, texto, pe. Sem foto continua
   sendo icone a esquerda e texto a direita. */
.card.com-foto {
  display: block; padding: 0; overflow: hidden;
  position: relative;
}
.card.com-foto .capa { display: block; line-height: 0; }
.card.com-foto .capa img { width: 100%; height: 150px; object-fit: cover; }
/* O selo circular monta em cima da foto, metade dentro e metade fora. */
.card.com-foto .ico {
  position: absolute; top: 150px; left: 50%;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: #0E1B2A; border: 3px solid var(--sur);
  display: grid; place-items: center;
  color: var(--c2, var(--c));
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
}
.card.com-foto .ico svg { width: 40px; height: 40px; }
.card.com-foto .txt { padding: 44px 20px 0; text-align: center; }
.card.com-foto h3 { font-size: 17px; margin-bottom: 8px; }
.card.com-foto p { font-size: 13.5px; }
.card.com-foto .pe {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 18px 20px 22px;
}
.card.com-foto .tracinho {
  display: block; width: 34px; height: 2px; border-radius: 2px;
  background: var(--c2, var(--c)); opacity: .75;
}
.card.com-foto .ico-pe { color: var(--c2, var(--c)); display: block; }
.card.com-foto .ico-pe svg { width: 36px; height: 36px; }

/* Sem foto, o pe e so o tracinho, alinhado a esquerda com o texto. */
.card:not(.com-foto) .pe {
  flex-basis: 100%;
  padding: 12px 0 0 73px;
}
.card:not(.com-foto) .ico-pe { display: none; }
.card:not(.com-foto) .tracinho {
  display: block; width: 30px; height: 3px; border-radius: 2px;
  background: var(--c2, var(--c)); opacity: .8;
}

/* A palavra destacada no titulo das secoes. */
.cabeca h2 em { font-style: normal; color: var(--a3); }

/* ---------- os tres canais de contato ---------- */

.canais {
  display: grid; gap: 16px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  text-align: left;
}
.cx-canal {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border-radius: var(--raio-g);
  background: var(--sur); border: 1px solid var(--linha);
  box-shadow: var(--s2);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.cx-canal:hover {
  transform: translateY(-3px); box-shadow: var(--s3);
  border-color: var(--a-linha);
}
.cx-canal-ico {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--a-fundo); color: var(--a2);
}
.cx-canal-ico svg { width: 32px; height: 32px; }
.cx-canal-txt { flex: 1; min-width: 0; }
.cx-canal-txt b { display: block; font-size: 16px; color: var(--tinta); }
.cx-canal-txt i { font-style: normal; font-size: 13.5px; color: var(--tinta2); }
.cx-canal-seta { flex: none; color: var(--a2); }
.cx-canal-seta svg { width: 22px; height: 22px; }

.contato-btn { gap: 10px; }
.contato-btn svg { width: 23px; height: 23px; }
#contato h2 em { font-style: normal; color: var(--a3); }

/* ---------- rodape ---------- */

.rodape .logo-rodape { height: 62px; width: auto; margin-bottom: 14px; }
/* O tracinho verde abaixo do titulo de cada coluna. */
.tracinho-rodape {
  display: block; width: 30px; height: 3px; border-radius: 2px;
  background: var(--a2); margin: 0 0 14px;
}
.rodape-marca .tracinho-rodape { margin-top: 16px; }
.rodape h4 { margin-bottom: 10px; }

.rodape .fim { align-items: center; }
.fim-txt { display: flex; flex-direction: column; gap: 2px; }
.rodape-redes { display: flex; gap: 10px; margin-left: auto; }
.rodape-redes a {
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--linha2); color: var(--tinta2);
  transition: color .18s, border-color .18s;
}
.rodape-redes a:hover { color: var(--a2); border-color: var(--a-linha); }
.rodape-redes svg { width: 21px; height: 21px; }

@media (max-width: 860px) {
  .rodape-redes { margin-left: 0; }
}
/* SECAO_INSTALAR */
/* O ultimo convite da pagina: o app na tela inicial. Duas colunas no
   computador -- texto a esquerda, celular a direita -- e uma so no
   telefone, onde o celular desenhado vira ilustracao e nao disputa
   espaco com o que importa. */
.sec-instalar { position: relative; overflow: hidden;
  background: #071018; color: #fff; }
.sec-instalar .fundo { position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; opacity: .5;
  /* A troca de imagem nao pisca: o navegador funde uma na outra. */
  transition: background-image .9s ease-in-out; }
.sec-instalar .veu { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, #071018 8%, rgba(7,16,24,.86) 42%,
                              rgba(7,16,24,.45) 72%, rgba(7,16,24,.7)); }
.sec-instalar .conteudo { position: relative; z-index: 2; }

.inst-grade { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center; }
@media (max-width: 900px) {
  .inst-grade { grid-template-columns: 1fr; gap: 34px; }
  .inst-cel { max-width: 320px; margin: 0 auto; }
}

.inst-texto h2 { font: 700 clamp(30px, 4.4vw, 52px)/1.1 Poppins, sans-serif;
  letter-spacing: -.02em; margin: 14px 0 16px; color: #fff; }
.inst-texto h2 em { font-style: normal; color: #3DDC84; display: block; }
.inst-texto .sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: rgba(255,255,255,.8); max-width: 34ch; margin: 0 0 30px; }

.inst-selos { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 32px; }
.inst-selo { display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; line-height: 1.3; color: rgba(255,255,255,.92); }
.inst-selo i { width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #3DDC84;
  background: rgba(61,220,132,.13);
  border: 1px solid rgba(61,220,132,.3); }
.inst-selo svg { width: 22px; height: 22px; }

.sec-instalar .btn-inst { display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; border-radius: 14px; font: 700 17px Poppins, sans-serif;
  color: #04331A; background: linear-gradient(135deg, #4ADE80, #22C55E);
  box-shadow: 0 16px 34px -14px rgba(34,197,94,.7); text-decoration: none; }
.sec-instalar .btn-inst:hover { filter: brightness(1.05); }
.sec-instalar .btn-inst svg { width: 20px; height: 20px; }

.inst-fecho { display: flex; align-items: center; gap: 13px; margin-top: 26px;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); }
.inst-fecho::before { content: ""; width: 38px; height: 2px; flex: none;
  background: #3DDC84; border-radius: 2px; }

/* O celular e uma imagem pronta: a arte do aparelho em perspectiva com a
   tela dentro. Trocar por HTML faria a tela parecer chapada e perder o
    angulo, que e o que da profundidade a secao. */
.inst-cel { line-height: 0; }
.inst-cel picture, .inst-cel img { display: block; width: 100%; height: auto;
  /* A sombra acompanha o recorte do aparelho, e nao a caixa: em PNG com
     fundo transparente o box-shadow desenharia um retangulo atras. */
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }

/* TOPO_ESCURO_NAS_INTERNAS */
/* O cabecalho escuro nasceu preso a body.inicial, junto com o resto do
   visual da pagina de entrada. As paginas internas precisavam so do topo,
   e nao do fundo escuro inteiro -- entao as regras do topo ganham um nome
   proprio, e body.inicial continua valendo na inicial como sempre.

   Copiadas, e nao movidas: mexer no seletor original arriscaria a pagina
   que ja esta certa por causa de uma que esta errada. */
body.topo-escuro .topo {
  background: rgba(10,20,32,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.topo-escuro .topo .menu a { color: #A9BACB; }
body.topo-escuro .topo .menu a:hover { color: #FFFFFF; }
body.topo-escuro .topo .marca img { filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
body.topo-escuro .topo.preso .marca img { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
body.topo-escuro .topo .hamburguer {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #E6EDF5;
}

/* PAGINA_DE_CONTATO */
/*
 * Tres faixas: cabecalho centrado, miolo em duas colunas -- selos a
 * esquerda, formulario a direita -- e os publicos no pe.
 *
 * O fundo e uma arte de canto: a bola e a caligrafia vivem na direita e o
 * resto e quase branco. Por isso ele NAO e esticado com cover, que ampliava
 * a bola ate ela virar um borrao atras do formulario. Fica no canto, no
 * tamanho natural, e o conteudo passa por cima.
 */
.contato-v2 { position: relative; overflow: hidden; padding: 40px 0 56px;
  background: var(--fundo); }

/* O fundo cobre a secao inteira. A arte tem a bola e a caligrafia na
   direita e um degrade quase branco a esquerda, entao esticar ate a borda
   esquerda nao suja nada -- apenas continua o mesmo tom claro por baixo
   do texto e dos selos.

   cover, e nao contain: contain deixava metade da secao em branco liso
   quando a janela era mais larga que a proporcao da imagem. */
.fundo-contato { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fundo-contato picture { display: block; width: 100%; height: 100%; }
.fundo-contato img { width: 100%; height: 100%;
  object-fit: cover; object-position: right center; }

/* No celular a arte sai de cena. Ela vive na direita, e ali a direita e
   exatamente onde o formulario esta -- competir por esse espaco so tira
   contraste de quem esta digitando. */
/* No celular a arte fica, mas apagada: ali a largura e da bola sozinha,
   e em cheio ela competiria com os campos por atencao. */
@media (max-width: 980px) {
  .fundo-contato { opacity: .45; }
  .fundo-contato img { object-position: 72% center; }
}

.contato-v2 .conteudo { position: relative; z-index: 1; }

.cabeca-contato { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.cabeca-contato h2 { font: 700 clamp(27px, 3.4vw, 42px)/1.14 Poppins, sans-serif;
  letter-spacing: -.025em; margin: 13px 0 11px; }
/* O verbo em verde, como na arte: o titulo vem do painel, entao o destaque
   e aplicado pelo script na palavra do meio. */
.cabeca-contato h2 em { font-style: normal; color: var(--a1); }
.cabeca-contato .sub { font-size: clamp(14.5px, 1.3vw, 16.5px); line-height: 1.6;
  color: var(--tinta2); margin: 0 auto; max-width: 52ch; }

.grade-contato { display: grid; grid-template-columns: 218px minmax(0, 560px);
  gap: 34px; align-items: start; justify-content: start; }
@media (max-width: 1100px) {
  .grade-contato { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 980px) {
  .grade-contato { grid-template-columns: 1fr; gap: 26px; }
  /* O formulario primeiro: quem abre esta pagina veio para escrever. */
  .lado-contato { order: 2; }
  .caixa-form { order: 1; }
  .selos-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 560px) { .selos-contato { grid-template-columns: 1fr; } }

.selos-contato { display: flex; flex-direction: column; gap: 26px; }
.selo-contato .ic { width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 12px;
  color: var(--a1); background: var(--a-fundo); }
.selo-contato .ic svg { width: 26px; height: 26px; }
.selo-contato h3 { font: 700 15.5px/1.3 Poppins, sans-serif; margin: 0 0 4px; }
.selo-contato p { font-size: 13px; line-height: 1.5; color: var(--tinta2);
  margin: 0; max-width: 20ch; }

.fecho-contato { margin-top: 34px; padding-top: 20px;
  font: 700 16px/1.5 Poppins, sans-serif; color: var(--tinta);
  white-space: pre-line;
  border-top: 3px solid var(--a1);
  border-image: linear-gradient(90deg, var(--a1) 34px, transparent 34px) 1; }
@media (max-width: 980px) { .fecho-contato { display: none; } }

/* Quase opaco, e nao branco puro: deixa passar um tracinho da arte nas
   bordas sem que o campo perca contraste. */
.caixa-form { background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid var(--linha);
  border-radius: 20px; padding: 26px 26px 22px; box-shadow: var(--s3); }
@media (max-width: 560px) { .caixa-form { padding: 20px 16px 18px; border-radius: 16px; } }

/* Os campos: rotulo acima, caixa com icone a esquerda. */
.caixa-form .campo-f > span { font: 600 13.5px Poppins, sans-serif;
  color: var(--tinta); margin-bottom: 6px; display: block; }
.caixa-form .campo-f em { font-style: normal; font-weight: 400; color: var(--tinta3); }

.publicos-contato { display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--linha2); }
@media (max-width: 760px) {
  .publicos-contato { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
}
.publico-contato { display: flex; align-items: center; gap: 13px; padding: 0 24px; }
.publico-contato:first-child { padding-left: 0; }
.publico-contato + .publico-contato { border-left: 1px solid var(--linha2); }
@media (max-width: 760px) {
  .publico-contato { padding: 0; }
  .publico-contato + .publico-contato { border-left: 0; }
}
/* Os icones dos publicos sao cheios, e nao de contorno: e o que separa
   esta faixa dos selos da coluna, que sao leves de proposito. */
.publico-contato .ic { width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; color: var(--a1); }
.publico-contato .ic svg { width: 30px; height: 30px; stroke-width: 1.5; }
.publico-contato h3 { font: 700 15px Poppins, sans-serif; margin: 0 0 2px; }
.publico-contato p { font-size: 12.5px; color: var(--tinta2); margin: 0; }

/* CAMPOS_DO_CONTATO */
/* A caixa com icone a esquerda. O icone fica dentro do campo, e nao ao
   lado do rotulo: assim ele diz o que se escreve ali mesmo quando o
   rotulo ja saiu da vista, no celular, com o teclado aberto. */
.caixa-form .par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .caixa-form .par { grid-template-columns: 1fr; } }

.caixa-form .campo-f { display: block; margin-bottom: 16px; }
/* :not(.cx) porque a caixa do campo tambem e um span filho direto do
   label -- sem isto ela herdava o negrito e a margem do rotulo. */
.caixa-form .campo-f > span:not(.cx) { display: block; margin-bottom: 7px;
  font: 600 14px Poppins, sans-serif; color: var(--tinta); }
.caixa-form .campo-f > span:not(.cx) em { font-style: normal; font-weight: 400;
  color: var(--tinta3); }

.caixa-form .cx { position: relative; display: block; }
.caixa-form .cx .ico { position: absolute; left: 15px; top: 15px;
  width: 20px; height: 20px; color: var(--tinta3); pointer-events: none;
  transition: color .16s; }
.caixa-form .cx .ico svg { width: 100%; height: 100%; display: block; }
/* O textarea cresce: o icone acompanha o topo, e nao o centro. */
.caixa-form .cx:focus-within .ico { color: var(--a1); }

.caixa-form input,
.caixa-form select,
.caixa-form textarea {
  width: 100%; padding: 14px 16px 14px 46px;
  border: 1px solid var(--linha2); border-radius: 13px;
  background: var(--sur); color: var(--tinta);
  font: 400 15px Poppins, sans-serif;
  transition: border-color .16s, box-shadow .16s, background .16s;
  appearance: none; -webkit-appearance: none;
}
.caixa-form textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.caixa-form input::placeholder,
.caixa-form textarea::placeholder { color: var(--tinta3); }

/* A seta do select, desenhada em CSS: a nativa muda de forma em cada
   navegador e quebrava o alinhamento com os campos de texto. */
.caixa-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta2) 50%),
    linear-gradient(135deg, var(--tinta2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px; cursor: pointer;
}
.caixa-form select:disabled { background-color: var(--sur2); color: var(--tinta3);
  cursor: not-allowed; }
.caixa-form select:disabled + .ico,
.caixa-form .cx:has(select:disabled) .ico { opacity: .5; }

.caixa-form input:focus,
.caixa-form select:focus,
.caixa-form textarea:focus {
  outline: none; border-color: var(--a1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 15%, transparent);
}

/* O botao: aviao a esquerda, seta a direita, degrade e um brilho embaixo
   que sugere que ele esta acima da pagina. */
.enviar-contato {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 6px; padding: 17px 24px;
  border: 0; border-radius: 13px; cursor: pointer;
  color: #fff; font: 600 16.5px Poppins, sans-serif;
  background: linear-gradient(100deg, #37A65B, #1E7E42);
  box-shadow: 0 14px 30px -12px rgba(30,126,66,.75);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.enviar-contato:hover { filter: brightness(1.06);
  box-shadow: 0 18px 38px -12px rgba(30,126,66,.8); }
.enviar-contato:active { transform: translateY(1px); }
.enviar-contato:disabled { opacity: .65; cursor: default; filter: none; }
.enviar-contato svg { width: 21px; height: 21px; flex: none; }
.enviar-contato .seta { width: 19px; height: 19px; }

.caixa-form .rodape-form { display: flex; align-items: center;
  justify-content: center; gap: 8px; margin-top: 14px;
  font-size: 13.5px; color: var(--tinta3); text-align: center; }
.caixa-form .rodape-form svg { width: 16px; height: 16px; flex: none; }

/* O aviso de revenda nasce escondido pelo atributo hidden, mas o display
   do bloco vencia o atributo e deixava uma faixa verde vazia no meio do
   formulario. */
.caixa-form #f-aviso-revenda[hidden],
.caixa-form #f-erro[hidden] { display: none; }
.caixa-form #f-aviso-revenda,
.caixa-form #f-erro { margin-bottom: 16px; }

/* CARTAO_COM_FOTO_V2 */
/*
 * O cartao de "Para cada tipo de organizacao", revisto.
 *
 * Tres mudancas, todas por subtracao:
 *
 * 1. O icone do pe sai. O mesmo simbolo ja esta grande no selo sobre a
 *    foto -- repeti-lo embaixo, menor e sem rotulo, nao acrescenta
 *    informacao e ainda alonga o cartao em 50px.
 *
 * 2. A foto cresce de 150 para 176px. As imagens sao 16:9, e em 150px o
 *    corte comia o que esta acima e abaixo do centro.
 *
 * 3. O cartao reage ao ponteiro: sobe um fio e a sombra abre. Sem isso
 *    ele parece um bloco impresso, e nao algo que se pode tocar.
 */
.card.com-foto .capa img { height: 176px; }
.card.com-foto .ico { top: 176px; }

.card.com-foto .ico-pe { display: none; }

/* Sem o icone, o pe e so o traco: ele fecha o cartao e repete a cor do
   assunto, que e o que o liga ao selo la em cima. */
.card.com-foto .pe { padding: 16px 20px 24px; }
.card.com-foto .tracinho { width: 40px; height: 3px; opacity: 1; }

.card.com-foto { transition: transform .22s ease, box-shadow .22s ease; }
.card.com-foto:hover { transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(29,36,48,.04),
              0 18px 34px -16px rgba(29,36,48,.28); }
@media (prefers-reduced-motion: reduce) {
  .card.com-foto { transition: none; }
  .card.com-foto:hover { transform: none; }
}

/* O texto ganha ar: o titulo em 18px e o paragrafo com entrelinha maior
   leem melhor num cartao estreito. */
.card.com-foto h3 { font-size: 18px; margin-bottom: 9px; letter-spacing: -.01em; }
.card.com-foto p { font-size: 13.5px; line-height: 1.6; }
.card.com-foto .txt { padding: 46px 22px 0; }

/* CARTAO_SEM_FOTO_V2 */
/*
 * Os seis cartoes de "O que faz", revistos.
 *
 * O problema era o pe. Com flex-wrap no cartao, o .pe quebrava para uma
 * linha inteira e levava o traco para baixo de tudo, com um vao entre ele
 * e o texto que ele deveria fechar. De longe parecia sobra de elemento
 * vazio, e nao remate.
 *
 * Agora o traco sobe: vira uma regra fina sob o titulo, na cor do
 * assunto, onde separa titulo de descricao em vez de flutuar solto.
 */
.card:not(.com-foto) .pe { display: none; }

/* O traco renasce sob o titulo, desenhado pelo proprio h3: um elemento a
   menos no cartao, e ele acompanha a largura do texto em vez de ficar
   preso num recuo fixo que a primeira quebra de linha desalinha. */
.card:not(.com-foto) .txt h3 { position: relative; padding-bottom: 11px; }
.card:not(.com-foto) .txt h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--c2, var(--c));
}

/* Mais ar embaixo, agora que o pe nao ocupa mais espaco. */
.card:not(.com-foto) { padding: 24px 24px 26px; }
.card:not(.com-foto) h3 { font-size: 17.5px; margin-bottom: 0; }
.card:not(.com-foto) p { margin-top: 10px; }

/* O circulo de cor no canto cresce um pouco: em 170px ele mal se nota,
   e e ele que da identidade a cada cartao. */
.card::after { width: 200px; height: 200px; top: -80px; right: -80px; }

/* No celular, com o icone acima do texto, o traco continua sob o titulo
   -- so o alinhamento muda junto com o resto. */
@media (max-width: 640px) {
  .card:not(.com-foto) { padding: 20px 20px 22px; }
}

/* ABERTURA_V2 */
/*
 * A abertura, revista em tres pontos.
 *
 * A coluna vazia da direita fica: ela e o que deixa a foto do estadio
 * aparecer inteira atras, e nao um erro de grade.
 *
 * 1. Os numeros crescem. Eles sao o argumento mais curto da pagina --
 *    seis telas, quatro modos, zero papel -- e estavam em 25px, do
 *    tamanho de um subtitulo qualquer.
 *
 * 2. O botao secundario ganha corpo. Com fundo a 4% e borda a 28% ele
 *    sumia sobre a foto escura, e quem chegava via um botao so.
 *
 * 3. O titulo aperta o espacamento: em 52px, a entrelinha padrao abria
 *    demais entre as duas linhas.
 */

/* Os numeros */
.abre-texto .numeros .cx-num { padding: 14px 15px; gap: 13px; }
.abre-texto .numeros .cx-num b { font-size: 30px; letter-spacing: -.02em; }
.abre-texto .numeros .cx-num span { font-size: 12.5px; margin-top: 3px; }
.abre-texto .cx-num-ico { width: 42px; height: 42px; }
.abre-texto .cx-num-ico svg { width: 24px; height: 24px; }

/* O botao secundario, sobre a foto escura */
body.inicial .abertura .btn.vidro {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
  font-weight: 600;
}
body.inicial .abertura .btn.vidro:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.7);
}

/* O titulo */
.abertura h1 { line-height: 1.08; letter-spacing: -.03em; }
.chamada { line-height: 1.62; }

/* Mais ar entre o texto e os botoes, agora que os numeros pesam mais */
.botoes { margin-top: 28px; }

@media (max-width: 640px) {
  /* No celular os numeros empilham: ali o tamanho grande ocuparia a tela
     toda antes de o visitante chegar aos botoes. */
  .abre-texto .numeros .cx-num b { font-size: 24px; }
  .abre-texto .numeros .cx-num span { font-size: 12px; }
}

/* PASSOS_V2 */
/*
 * Os quatro passos, revistos.
 *
 * O numero e as setas entre os cartoes ja estavam bem resolvidos -- 44px
 * com degrade, e a seta em li::after ligando um ao outro. O que nao
 * estava era o contraste: o cartao terminava em #EEF1F5 e o fundo da
 * secao tambem puxava para esse tom, entao o cartao quase nao se
 * destacava do que esta atras.
 *
 * E no topo o icone de 46px empatava com o numero de 44px. Numa sequencia
 * numerada, quem lidera e o numero -- o icone ilustra, nao compete.
 */

/* Cartao branco puro, sobre o fundo levemente colorido da secao. */
.passos li {
  background: #FFFFFF;
  border: 1px solid var(--linha2);
  box-shadow: 0 1px 2px rgba(29,36,48,.04),
              0 12px 24px -14px rgba(29,36,48,.18);
}
.passos li:hover {
  border-color: rgba(63,133,90,.3);
  box-shadow: 0 2px 4px rgba(29,36,48,.05),
              0 20px 38px -18px rgba(63,133,90,.32);
}

/* O icone recua: menor, mais claro, e empurrado para a direita do topo,
   onde acompanha o numero em vez de disputar com ele. */
.passo-icone { width: 40px; height: 40px; margin-left: auto;
  color: var(--tinta3); opacity: .55; }
.passo-icone svg { width: 34px; height: 34px; }
.passos li:hover .passo-icone { opacity: .8; color: var(--a3); }
.passo-icone { transition: opacity .24s, color .24s; }

/* O numero um pouco maior, agora que lidera sozinho. */
.passos .n { width: 46px; height: 46px; font-size: 21px; }

/* A seta entre os cartoes ganha a cor da marca: era cinza a 55%, e de
   longe nao se lia como ligacao entre os passos. */
.passos li::after {
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E9E6A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity: .8;
}

/* As marcas embaixo: um degrade leve as liga a secao em vez de as deixar
   flutuando como etiquetas soltas. */
.passo-marcas { gap: 11px; margin-top: 32px; }
.passo-marcas span {
  background: rgba(255,255,255,.9);
  border-color: var(--a-linha);
  padding: 11px 19px;
}
.passo-acoes { margin-top: 28px; }

@media (max-width: 640px) {
  /* Empilhado, a seta apontaria para o lado errado. */
  .passos li::after { display: none; }
  .passo-icone { width: 34px; height: 34px; }
  .passo-icone svg { width: 30px; height: 30px; }
}

/* REVENDA_V2 */
/*
 * A secao de revenda, revista.
 *
 * O numeral de fundo dos tres cartoes (01, 02, 03) estava em --linha2,
 * cinza a 13%: forte demais para desaparecer, fraco demais para se ler
 * como numero. De longe parecia sujeira no canto. Agora ele e grande e
 * bem apagado -- funciona como marca d'agua, que era a intencao.
 *
 * Os tres cartoes dizem o que a revenda ganha; os quatro itens do fecho
 * sao garantias comerciais. Eram dois grupos com o mesmo peso visual, e
 * por isso pareciam repetir. O fecho passa a ser mais leve, com os itens
 * em linha em vez de cartoes.
 */

/* O numeral vira marca d'agua de verdade */
.rcx { position: relative; overflow: hidden; }
.rcx-n {
  position: absolute; right: 12px; bottom: 4px;
  margin: 0; padding: 0;
  font-size: 52px; line-height: 1;
  color: var(--a1); opacity: .07;
  pointer-events: none;
}

/* O cartao ganha contorno mais visivel e reage ao ponteiro */
.rcx { border-color: var(--linha2);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.rcx:hover { border-color: var(--a-linha); box-shadow: var(--s2);
  transform: translateY(-2px); }

/* O icone menor: em 38px ele ocupava metade da altura do cartao */
.rcx-ico { width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: 10px; background: var(--a-fundo); }
.rcx-ico svg { width: 22px; height: 22px; }

/* O fecho fica mais leve: sem caixa cinza, so uma linha acima e os
   itens soltos. Assim ele le como remate da secao, e nao como um
   segundo bloco de cartoes. */
.revenda-fecho {
  background: none; border: 0;
  border-top: 1px solid var(--linha2);
  border-radius: 0;
  padding: 30px 0 0; margin-top: 48px;
}
.revenda-fecho h3 { color: var(--tinta); margin-bottom: 24px; }
.revenda-itens span { align-items: center; }
.revenda-itens svg { width: 26px; height: 26px; }

@media (max-width: 940px) {
  .rcx-n { font-size: 44px; }
}

/* QUEBRAS_ANTIGAS_DO_RODAPE */
/* As quatro regras de .rodape .colunas que viviam nas media queries de
   900, 860, 640 e 520px foram removidas. Elas mandavam duas colunas e
   depois uma, repetidas em pares quase iguais, e acrescentar as novas
   sem tirar as velhas deixou sete regras disputando a mesma grade.
   As media queries em si ficaram: elas cuidam de outras coisas. */

/* RODAPE_V2 */
/*
 * Duas correcoes e um ajuste.
 *
 * 1. A regra .rodape .marca p, la em cima, mira uma classe que nao existe
 *    aqui: o elemento e .rodape-marca. O paragrafo nunca recebeu o
 *    max-width de 300px, e em tela larga ele corria a coluna inteira.
 *    Corrigido pelo seletor certo, sem tocar no original -- que pode
 *    estar mirando o topo, onde .marca existe.
 *
 * 2. Os pontos de quebra estavam duplicados: 900 e 860 mandavam duas
 *    colunas, 640 e 520 mandavam uma. Funcionava por coincidencia. Aqui
 *    fica valendo o par 860/520, que e o mais recente, e as faixas
 *    intermediarias ganham um passo proprio.
 *
 * 3. O logo do rodape em 62px era maior que o do topo em repouso. Volta
 *    para 52px, que e o tamanho de uma assinatura.
 */

.rodape .rodape-marca p { max-width: 300px; font-size: 13.5px;
  color: var(--tinta2); line-height: 1.6; }

.rodape .logo-rodape { height: 52px; margin-bottom: 12px; }

/* Cinco colunas em tela larga, tres no meio, duas no tablet, uma no
   celular: cada faixa com o seu passo, em vez de pular de cinco para
   duas de uma vez. */
@media (max-width: 1100px) {
  .rodape .colunas { grid-template-columns: 1.4fr repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 760px) {
  .rodape .colunas { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 460px) {
  .rodape .colunas { grid-template-columns: 1fr; gap: 20px; }
}

/* A linha final respira um pouco mais */
.rodape .fim { padding-top: 24px; margin-top: 4px; }

/* RODAPE_NO_CELULAR */
/*
 * Abaixo de 760px o rodape vira duas colunas centradas.
 *
 * Quatro grupos empilhados em coluna unica viravam uma lista longa
 * demais para o que e navegacao secundaria: dez telas de rolagem para
 * passar por um bloco que quase ninguem le com pressa. Em duas colunas
 * cabe na metade da altura, e como sao dois a quatro links por grupo,
 * eles continuam bem separados para o dedo.
 *
 * O traco volta, centrado sob cada titulo -- e ele que separa um grupo
 * do outro quando tudo esta centralizado. Eu o havia escondido aqui por
 * conta propria; era opiniao, nao correcao.
 */
@media (max-width: 760px) {
  .rodape .colunas { grid-template-columns: 1fr 1fr; gap: 22px 14px;
    text-align: center; }

  /* A marca ocupa a linha inteira acima dos quatro grupos. */
  .rodape .rodape-marca { grid-column: 1 / -1; }
  .rodape .rodape-marca p { max-width: 34ch; margin-inline: auto; }
  .rodape .logo-rodape { margin-inline: auto; display: block; }

  .rodape .tracinho-rodape { margin-inline: auto; }
  .rodape h4 { margin-bottom: 8px; }

  /* Area de toque de 44px sem alongar a lista: o link ocupa a linha
     inteira e o espaco vem do padding, nao da margem entre um e outro. */
  .rodape a { padding: 11px 0; line-height: 1.2; }

  .rodape .fim { flex-direction: column; align-items: center;
    text-align: center; gap: 14px; }
  .fim-txt { align-items: center; }
  .rodape-redes { margin-left: 0; justify-content: center; }
}

/* Em 460px as duas colunas ficam, mas o texto encolhe um tico para os
   rotulos de duas palavras nao quebrarem no meio. */
@media (max-width: 400px) {
  .rodape .colunas { gap: 18px 10px; }
  .rodape a { font-size: 13.5px; }
}

/* LIMPEZA_DO_RODAPE */
/* Saiu uma media query que tinha ficado sem nenhuma regra dentro, e as
   duas declaracoes base de .rodape .colunas viraram uma. A segunda
   existia so para trocar o numero de colunas de tres para cinco, 350
   linhas depois da primeira -- quem lesse a primeira via o valor errado. */

/* PAINEL_LATERAL */
/*
 * O menu deixa de ser faixa no topo e vira um painel fixo na lateral
 * esquerda, em todas as paginas institucionais. Fora dele: cadastro,
 * entrar e pelada, que sao telas de conversao -- ali navegacao lateral
 * so afasta do unico botao que importa.
 *
 * Abaixo de 1100px o painel sai de cena e vira o botao de sempre, que o
 * traz de volta por cima: num tablet ele comeria um terco da largura.
 */
:root { --painel: 268px; }

.painel {
  position: fixed; top: 16px; left: 16px; bottom: 16px; z-index: 95;
  width: calc(var(--painel) - 32px);
  display: flex; flex-direction: column;
  padding: 26px 20px 24px;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(10,22,18,.94), rgba(6,14,24,.97));
  border: 1px solid rgba(61,220,132,.22);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8),
              inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: saturate(150%) blur(12px);
  transition: transform .34s cubic-bezier(.22,.7,.28,1);
  overflow-y: auto;
}

.painel-marca { display: block; text-align: center; margin-bottom: 24px; }
.painel-marca img { height: 76px; width: auto; display: inline-block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); }

.painel-menu { display: flex; flex-direction: column; gap: 2px; }
.painel-menu a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 12px;
  color: #C3D2E0; font: 500 14.5px Poppins, sans-serif;
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.painel-menu a svg { width: 21px; height: 21px; flex: none; opacity: .85; }
.painel-menu a:hover, .painel-menu a.agora {
  color: #FFFFFF; background: rgba(61,220,132,.12);
  border-color: rgba(61,220,132,.28);
}
.painel-menu a:hover svg, .painel-menu a.agora svg { opacity: 1; color: #3DDC84; }

.painel-acoes { display: flex; flex-direction: column; gap: 10px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.09); }
.painel-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; border-radius: 12px;
  font: 600 14.5px Poppins, sans-serif;
  border: 1px solid rgba(255,255,255,.18); color: #E6EDF5;
  transition: border-color .18s, background .18s, filter .18s;
}
.painel-btn svg { width: 17px; height: 17px; flex: none; }
.painel-btn:hover { border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.05); }
.painel-btn.pri { color: #04331A; border-color: transparent;
  background: linear-gradient(135deg, #4ADE80, #22C55E);
  box-shadow: 0 12px 26px -12px rgba(34,197,94,.8); }
.painel-btn.pri:hover { filter: brightness(1.06); }

.painel-fecho { margin: auto 0 0; padding-top: 24px;
  font: 600 12px/1.7 Poppins, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.42); }
.painel-risco { display: block; width: 44px; height: 3px; margin-top: 14px;
  border-radius: 2px; background: #3DDC84; }

/* O conteudo recua a largura do painel. A classe no body, e nao :has,
   porque :has e recente e num aparelho antigo o conteudo ficaria por
   baixo do painel -- falha que ninguem percebe ate acontecer. */
/* REGRA_MORTA_REMOVIDA */
/* Aqui vivia um padding-left de 268px no conteudo, da epoca em que o
   painel empurrava a pagina. Desde que ele passou a flutuar, uma regra
   mais abaixo zera esse recuo -- entao esta nunca chegava a valer, e
   quem lesse o arquivo veria um recuo que nao existe. */

.abre-painel {
  position: fixed; top: 14px; left: 14px; z-index: 96;
  width: 46px; height: 46px; padding: 0;
  display: none; place-items: center;
  border-radius: 13px; cursor: pointer;
  background: rgba(10,20,32,.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); color: #E6EDF5;
}
.abre-painel svg { width: 22px; height: 22px; }
.veu-painel { position: fixed; inset: 0; z-index: 94;
  background: rgba(4,10,18,.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.veu-painel.vendo { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) {
  .painel { transform: translateX(calc(-100% - 24px)); }
  .painel.vendo { transform: none; }
  .abre-painel { display: grid; }
  body.com-painel > section,
  body.com-painel > footer,
  body.com-painel > .malha > section { padding-left: 0; }
  body.com-painel > .malha > section:first-of-type,
  body.com-painel > section:first-of-type { padding-top: 78px; }
}

/* PAINEL_FIEL */
/*
 * O painel e a faixa, aproximados da arte de referencia.
 *
 * As diferencas que estavam mais visiveis: a borda do painel era um fio
 * uniforme, e na arte e um halo verde que nasce forte perto do logo e
 * apaga para baixo; o item ativo tinha contorno fechado, e na arte e uma
 * faixa vertical a esquerda com o fundo esmaecendo para a direita; e os
 * numeros vinham empilhados, quando na arte o numero fica grande a
 * esquerda e a legenda ao lado.
 */

/* O halo: um pseudo-elemento atras do painel, com degrade vertical. */
.painel { border-color: transparent; position: fixed; }
.painel::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: 21px; padding: 1px;
  background: linear-gradient(180deg,
    rgba(61,220,132,.85) 0%, rgba(61,220,132,.42) 26%,
    rgba(61,220,132,.16) 58%, rgba(61,220,132,.06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.painel::after {
  content: ""; position: absolute; inset: -18px -14px 40%; z-index: -2;
  border-radius: 30px; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%,
    rgba(61,220,132,.30), transparent 72%);
  filter: blur(14px);
}
.painel { isolation: isolate; }

/* A bola em marca d'agua, no pe do painel. */
.painel-risco { position: relative; }
.painel-risco::after {
  content: ""; position: absolute; right: -26px; bottom: -36px;
  width: 132px; height: 132px; pointer-events: none;
  background: url("/borabola-icone.webp") no-repeat center/contain;
  opacity: .07;
}

/* O item do menu: faixa vertical a esquerda, fundo esmaecendo. */
.painel-menu a { border: 0; padding: 13px 14px 13px 16px; position: relative;
  border-radius: 11px; }
.painel-menu a::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: #3DDC84; opacity: 0; transition: opacity .18s;
}
.painel-menu a:hover, .painel-menu a.agora {
  background: linear-gradient(90deg, rgba(61,220,132,.17), rgba(61,220,132,.02));
  border-color: transparent;
}
.painel-menu a:hover::before, .painel-menu a.agora::before { opacity: 1; }
.painel-menu a svg { color: #9FB3C6; }

/* Os numeros: grande a esquerda, legenda ao lado, como na arte. */
.abre-texto .numeros .cx-num { align-items: center; gap: 14px;
  padding: 15px 17px; border-radius: 15px;
  background: rgba(10,26,20,.55);
  border: 1px solid rgba(61,220,132,.16);
  backdrop-filter: blur(8px); }
.abre-texto .numeros .cx-num > div { display: flex; align-items: baseline;
  gap: 9px; flex-wrap: wrap; }
.abre-texto .numeros .cx-num b { font-size: 34px; line-height: 1;
  color: #FFFFFF; }
.abre-texto .numeros .cx-num span { font-size: 12.5px; margin-top: 0;
  max-width: 13ch; line-height: 1.3; }
.abre-texto .cx-num-ico { width: 44px; height: 44px; border-radius: 12px;
  background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.26); }

/* A faixa do pe da abertura. */
.faixa-abre { display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08); }
.faixa-itens { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.faixa-item { display: inline-flex; align-items: center; gap: 10px;
  font: 600 11.5px Poppins, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.72); }
.faixa-item svg { width: 21px; height: 21px; flex: none; color: #3DDC84; }
.faixa-frase { display: flex; align-items: center; gap: 16px; margin: 0;
  font: 600 11.5px/1.5 Poppins, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  white-space: pre-line; text-align: right; }
.faixa-frase::before { content: ""; width: 54px; height: 2px; flex: none;
  border-radius: 2px; background: #3DDC84; }

@media (max-width: 900px) {
  .faixa-abre { flex-direction: column; align-items: flex-start; gap: 20px; }
  .faixa-itens { gap: 16px 22px; }
  .faixa-frase { text-align: left; }
}
@media (max-width: 560px) {
  .faixa-item { font-size: 10.5px; letter-spacing: .1em; }
  .faixa-item svg { width: 18px; height: 18px; }
  .abre-texto .numeros .cx-num b { font-size: 27px; }
}

/* PAINEL_FLUTUANTE */
/*
 * O painel passa a flutuar sobre a pagina, como no layout.
 *
 * Antes ele empurrava o conteudo 268px para a direita, e a abertura
 * ficava espremida. No layout o conteudo corre por baixo dele -- a foto
 * do estadio continua inteira, e o texto comeca depois do painel por
 * causa da margem, nao de um recuo da secao.
 *
 * Saiu tambem o overflow-y: auto, que fazia nascer uma barra de rolagem
 * dentro do painel quando a janela era baixa. Com o conteudo mais
 * compacto ele cabe; se um dia nao couber, e melhor apertar o conteudo
 * do que exibir uma barra dentro de um cartao flutuante.
 */
:root { --painel: 300px; }

.painel {
  top: 20px; left: 20px; bottom: 20px;
  width: calc(var(--painel) - 40px);
  padding: 30px 22px 26px;
  border-radius: 24px;
  overflow: visible;
  background: linear-gradient(168deg, rgba(8,20,16,.95), rgba(5,12,20,.97));
}

/* O fio verde inteiro, com brilho por fora. */
.painel::before {
  inset: -1.5px; border-radius: 25.5px; padding: 1.5px;
  background: linear-gradient(170deg,
    rgba(61,220,132,.9) 0%, rgba(61,220,132,.55) 34%,
    rgba(61,220,132,.3) 66%, rgba(61,220,132,.5) 100%);
}
.painel::after {
  inset: -22px -18px -22px -18px;
  border-radius: 38px;
  background: radial-gradient(52% 42% at 50% 6%,
    rgba(61,220,132,.34), transparent 70%);
  filter: blur(18px);
}

/* O conteudo NAO recua mais: o painel passa por cima. A margem do texto
   vem da propria largura do painel mais um respiro. */
body.com-painel > section,
body.com-painel > footer,
body.com-painel > .malha > section { padding-left: 0; }
body.com-painel .conteudo {
  width: min(100% - calc(var(--painel) + 60px), var(--largura));
  margin-left: calc(var(--painel) + 30px);
  margin-right: auto;
}

/* O logo ocupa a largura do painel, como no layout. */
.painel-marca { margin-bottom: 30px; }
.painel-marca img { height: auto; width: 82%; max-width: 190px; }

/* Os itens respiram: no layout ha bem mais ar entre um e outro. */
.painel-menu { gap: 6px; }
.painel-menu a { padding: 15px 16px; font-size: 15px; gap: 15px; }
.painel-menu a svg { width: 22px; height: 22px; }

.painel-acoes { margin-top: 30px; padding-top: 26px; gap: 12px; }
.painel-btn { padding: 14px 18px; white-space: nowrap; }

.painel-fecho { padding-top: 28px; font-size: 11.5px; letter-spacing: .19em; }

/* A bola da marca d'agua, maior e mais para o canto. */
.painel-risco::after { right: -30px; bottom: -44px;
  width: 158px; height: 158px; opacity: .08; }

@media (max-width: 1100px) {
  /* No celular e no tablet o painel ja sai de cena; o conteudo volta a
     ocupar a largura inteira. */
  body.com-painel .conteudo {
    width: min(100% - 40px, var(--largura));
    margin-inline: auto;
  }
}