/* brncunha.com.br — movimento, quebras de página e o Tião.
   Separado do estilo base de propósito: aqui é acabamento, e acabamento se
   remove sem derrubar a obra. Sem JavaScript, `.visivel` nunca é aplicado —
   por isso a regra de entrada também vale quando o script não roda. */

/* ---------------------------------------------------- entrada suave */
[data-surge] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.7,.3,1),
              transform .62s cubic-bezier(.22,.7,.3,1);
}
[data-surge].visivel { opacity: 1; transform: none; }
.sem-js [data-surge] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-surge] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------- o menu marca a seção */
.topo nav a { position: relative; padding-bottom: 3px; transition: color .2s; }
.topo nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--cota);
  transition: right .28s cubic-bezier(.22,.7,.3,1);
}
.topo nav a:hover::after, .topo nav a.aqui::after { right: 0; }
.topo nav a.aqui { color: var(--tinta); }

/* ------------------------------------------------ quebras de página */
.faixa { background: var(--tinta); color: var(--papel); padding: 56px 0; }
.faixa .dentro {
  max-width: var(--larg); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.faixa .frase {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(21px, 3vw, 31px); line-height: 1.2; letter-spacing: -.02em;
  margin: 0; max-width: 26ch;
}
.faixa .frase em { font-style: normal; color: var(--cota); }
.faixa .nota {
  font-family: var(--tec); font-size: 12.5px; color: var(--azul-claro);
  margin-left: auto; max-width: 30ch; line-height: 1.65;
}
.faixa.tijolo { background: var(--tijolo); color: #fff; }
.faixa.tijolo .frase em { color: #ffd9c2; }
.faixa.tijolo .nota { color: #f0cdb6; }

/* ----------------------------------------------------------- ícones */
.ico { width: 28px; height: 28px; display: block; }
.ico * { fill: none; stroke: currentColor; stroke-width: 1.7; }

/* --------------------------------------------------- cards com vida */
.negocio, .obra, .form-item {
  transition: transform .26s cubic-bezier(.22,.7,.3,1), background .26s;
}
.negocio:hover { transform: translateY(-3px); background: #fff; }
.obra:hover { transform: translateY(-3px); background: #20456c; }
.placar div { transition: background .26s; }
.placar div:hover { background: #fff; }

/* --------------------------------------------------- tira de fotos */
.tira { display: grid; grid-template-columns: 1.25fr .875fr .875fr; gap: 14px; margin-top: 36px; }
.tira figure { margin: 0; position: relative; overflow: hidden;
  border: 1px solid var(--linha-forte); }
.tira img { transition: transform .7s cubic-bezier(.22,.7,.3,1); }
.tira figure:hover img { transform: scale(1.035); }
.tira figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(22,32,43,.9)); color: var(--papel);
  font-family: var(--tec); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 44px 16px 14px;
}
@media (max-width: 760px) { .tira { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------- FAQ */
.faq { margin-top: 34px; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  padding: 20px 44px 20px 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 15px;
  font-family: var(--tec); font-size: 24px; color: var(--cota);
  transition: transform .24s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; color: var(--tinta-fraca); max-width: 62ch; }

/* ----------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 14px 24px; border: 2px solid var(--cota); background: var(--cota); color: #fff;
  transition: background .22s, color .22s, transform .22s;
}
.btn:hover { background: transparent; color: var(--cota); transform: translateY(-2px); }
.btn.vazado { background: transparent; color: var(--papel); border-color: var(--papel); }
.btn.vazado:hover { background: var(--papel); color: var(--tinta); }
.botoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ======================================================== o Tião === */
#tiao-botao {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 12px; padding: 9px 20px 9px 9px;
  background: var(--tinta); border: 0; border-radius: 44px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(22,32,43,.3);
  transition: transform .24s, box-shadow .24s;
}
#tiao-botao:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(22,32,43,.4); }
#tiao-botao img { width: 44px; height: 44px; border-radius: 50%; }
#tiao-botao .rotulo { font-family: var(--display); font-weight: 600; font-size: 15px;
  color: var(--papel); text-align: left; }
#tiao-botao .rotulo small {
  display: block; font-family: var(--tec); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-claro); font-weight: 400; margin-top: 2px;
}
@media (max-width: 540px) { #tiao-botao .rotulo { display: none; } #tiao-botao { padding: 9px; } }

#tiao-painel {
  position: fixed; right: 22px; bottom: 96px; z-index: 91;
  width: min(370px, calc(100vw - 44px));
  background: var(--papel); border: 1px solid var(--linha-forte);
  box-shadow: 0 22px 60px rgba(22,32,43,.3);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .2s, transform .22s cubic-bezier(.22,.7,.3,1);
}
#tiao-painel.aberto { opacity: 1; transform: none; }
#tiao-painel .tiao-topo {
  background: var(--tinta); color: var(--papel); padding: 13px 16px;
  display: flex; align-items: center; gap: 12px;
}
#tiao-painel .tiao-topo img { width: 38px; height: 38px; border-radius: 22%; }
#tiao-painel .tiao-topo b { font-family: var(--display); font-size: 16px; display: block; }
#tiao-painel .tiao-topo small {
  font-family: var(--tec); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul-claro);
}
.tiao-fechar {
  margin-left: auto; background: none; border: 0; color: var(--azul-claro);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.tiao-fechar:hover { color: var(--papel); }
.tiao-corpo {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  max-height: 58vh; overflow-y: auto;
}
.bolha {
  font-size: 15.5px; line-height: 1.55; padding: 11px 14px; max-width: 90%;
  animation: bolha-sobe .3s cubic-bezier(.22,.7,.3,1);
}
.bolha.ele { background: var(--papel-alt); border-left: 3px solid var(--tijolo); }
.bolha.voce {
  background: var(--azul); color: var(--papel); align-self: flex-end;
  border-left: 0; border-right: 3px solid var(--cota);
}
@keyframes bolha-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tiao-opcoes { display: grid; gap: 7px; margin-top: 4px; }
.tiao-opcoes button {
  font-family: var(--display); font-weight: 500; font-size: 15px; text-align: left;
  padding: 11px 14px; background: transparent; color: var(--azul);
  border: 1px solid var(--linha-forte); cursor: pointer; transition: all .2s;
}
.tiao-opcoes button:hover { background: var(--azul); color: var(--papel); border-color: var(--azul); }
.tiao-acao {
  display: block; text-align: center; font-family: var(--display); font-weight: 600;
  background: var(--tijolo); color: #fff; text-decoration: none; padding: 13px;
  margin-top: 6px; transition: background .2s; animation: bolha-sobe .3s;
}
.tiao-acao:hover { background: #7d3f1f; }
@media (prefers-reduced-motion: reduce) { .bolha, .tiao-acao { animation: none; } }