/* =========================================================
   COSMOS — Blog
   Listagem, arquivos e artigo. Carrega depois do cosmos.css e
   só acrescenta; nada aqui repete o que já existe lá.
   Estrutura:
   01 Heróis · 02 Filtros · 03 Grelha e cartões · 04 Paginação
   05 Vazio e pesquisa · 06 Artigo (capa, colunas, índice)
   07 Prosa · 08 Rodapé do artigo · 09 Responsivo
   ========================================================= */

:root {
  --prosa:      #c6d2e2;   /* corpo do artigo: mais claro que --ink-2, que
                              a 17px em texto longo cansa a vista */
  --prosa-w:    72ch;
}

/* 01 --------------------------------------------------- Heróis */

/* O .ph do site nasce com 82svh e padding de página de serviço. No blog
   isso empurrava a primeira fila de cartões para fora do ecrã. */
.ph--blog,
.ph--post {
  min-height: 0;
  padding: clamp(124px, 15vh, 168px) 0 clamp(44px, 5.5vw, 68px);
}

.ph--blog .ph__bg,
.ph--post .ph__bg {
  background-image: url("../img/cta-galaxia.jpg");
  background-position: center;
}

/* O véu do site é pesado à esquerda porque lá o globo fica à direita. Aqui
   não há globo nenhum: escurece por igual e desvanece para o fundo. */
.ph--blog .ph__veu,
.ph--post .ph__veu {
  background:
    linear-gradient(100deg,
      rgba(5, 7, 15, .95) 0%,
      rgba(5, 7, 15, .86) 42%,
      rgba(5, 7, 15, .68) 74%,
      rgba(5, 7, 15, .78) 100%),
    linear-gradient(180deg,
      rgba(5, 7, 15, .92) 0%,
      rgba(5, 7, 15, .34) 30%,
      rgba(5, 7, 15, .38) 62%,
      var(--bg) 100%);
}

.ph--post .ph__inner { max-width: 880px; }
.ph--post h1 { max-width: 22ch; }
.ph--post .ph__lead { max-width: 62ch; margin-bottom: 26px; }

/* Autor · data · minutos */
.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.artigo__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--turq);
  transform: rotate(45deg);
  opacity: .8;
}

/* 02 -------------------------------------------------- Filtros */

.filtros {
  position: sticky;
  top: 68px;                      /* a barra do site encolhe para 68px assim
                                     que a página rola, e é só aí que esta
                                     fila cola; com 78px ficava um risco de
                                     conteúdo a passar entre as duas */
  z-index: 6;
  background: rgba(10, 14, 27, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}

.filtros__lista {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}
.filtros__lista::-webkit-scrollbar { display: none; }

.filtros__a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 16px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.filtros__a:hover { color: var(--ink); }
.filtros__a.is-atual { color: var(--turq); border-bottom-color: var(--turq); }

.filtros__a i {
  font-style: normal;
  font-size: .58rem;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-3);
}
.filtros__a.is-atual i { border-color: rgba(46, 230, 197, .45); color: var(--turq); }

/* 03 ------------------------------------------ Grelha e cartões */

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pgrid:empty { display: none; }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.pcard:hover {
  border-color: rgba(46, 230, 197, .34);
  background: var(--surface-2);
  transform: translateY(-3px);
}

.pcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--out);
}
.pcard:hover .pcard__media img { transform: scale(1.045); }

/* Sem imagem em destaque não fica um buraco: entra o símbolo sobre a
   nebulosa da marca. */
.pcard__vazio {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(46, 230, 197, .16), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(42, 107, 242, .2), transparent 62%),
    var(--bg-2);
}
.pcard__vazio img { width: 34px; height: auto; opacity: .5; }

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 24px 24px 26px;
}

.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A etiqueta é um link à parte: sobe acima da área clicável do cartão. */
.pcard__cat {
  position: relative;
  z-index: 2;
  color: var(--turq);
  padding: 4px 9px;
  border: 1px solid rgba(46, 230, 197, .3);
  border-radius: 999px;
  background: rgba(46, 230, 197, .07);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pcard__cat:hover { background: rgba(46, 230, 197, .16); border-color: rgba(46, 230, 197, .55); }

.pcard__titulo {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.28;
  letter-spacing: -.018em;
}
.pcard__titulo a { color: #fff; }
.pcard:hover .pcard__titulo a { color: var(--turq); }

/* Cartão inteiro clicável, sem embrulhar tudo num <a> — assim a etiqueta
   da categoria continua a ser uma ligação própria. */
.pcard__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pcard__resumo {
  margin: 0;
  font-size: .935rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.pcard__ler {
  margin-top: auto;
  padding-top: 4px;
  color: var(--turq);
  font-size: .855rem;
}
.pcard__ler svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.pcard:hover .pcard__ler svg { transform: translateX(4px); }

/* --- Artigo em destaque: ocupa a fila toda no topo da grelha ---
   O cartao vai DENTRO da .pgrid (home.php), por isso sem o grid-column
   ficava numa celula de um terco: a imagem a 54% dessa celula e o titulo
   a partir-se palavra a palavra numa coluna de dois dedos. */
.pcard--destaque {
  grid-column: 1 / -1;
  flex-direction: row;
}
/* O max-height é o que trava o cartão. A imagem em destaque pode vir
   quadrada do painel e, esticada a 54% da largura, levava o cartão a mais
   de 600px de altura com um vazio enorme ao lado do texto. */
.pcard--destaque .pcard__media {
  flex: 0 0 54%;
  aspect-ratio: auto;
  max-height: 400px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.pcard--destaque .pcard__body {
  justify-content: center;
  gap: 16px;
  padding: clamp(26px, 3.4vw, 44px);
}
.pcard--destaque .pcard__titulo {
  font-size: clamp(1.42rem, 1.1rem + 1.1vw, 2.05rem);
  line-height: 1.16;
}
.pcard--destaque .pcard__resumo { font-size: 1rem; }

/* No destaque a coluna do texto está centrada; empurrar a ligação para o
   fundo abria um vão de duzentos pixéis entre o resumo e a seta. */
.pcard--destaque .pcard__ler { margin-top: 6px; }

/* 04 ------------------------------------------------ Paginação */

.paginacao {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.paginacao .screen-reader-text { position: absolute; left: -9999px; }

.paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.paginacao .page-numbers:hover {
  color: #fff;
  border-color: rgba(46, 230, 197, .45);
  background: rgba(46, 230, 197, .07);
}
.paginacao .page-numbers.current {
  color: #04121a;
  background: var(--grad);
  border-color: transparent;
  font-weight: 700;
}
.paginacao .page-numbers.dots { border-color: transparent; }

/* 05 -------------------------------------- Sem resultados e busca */

.vazio {
  max-width: 620px;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.vazio h2 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); margin-bottom: 14px; }

.busca {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin-top: 26px;
}
.busca input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.busca input::placeholder { color: var(--ink-3); }
.busca input:focus { outline: 2px solid var(--turq); outline-offset: 2px; }

/* 06 ---------------------------------------------------- Artigo */

/* A capa sobe um pouco sobre o hero: é o que costura o topo ao artigo em
   vez de os deixar como dois blocos empilhados. O calc é preciso porque
   um clamp negativo teria de ter o mínimo e o máximo trocados. */
.artigo__capa {
  margin: calc(-1 * clamp(24px, 4.5vw, 64px)) 0 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.artigo__capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.artigo__capa figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.artigo__layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.artigo__lado {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* --- Índice --- */
.indice__lbl,
.partilha__lbl {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.indice ul { list-style: none; border-left: 1px solid var(--line); }
.indice li { position: relative; }
.indice a {
  display: block;
  padding: 7px 0 7px 16px;
  font-size: .855rem;
  line-height: 1.42;
  color: var(--ink-3);
  transition: color .25s var(--ease);
}
.indice a:hover { color: var(--ink); }
.indice .indice__n3 a { padding-left: 30px; font-size: .8rem; }

.indice li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--turq);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}
.indice li.is-atual::before { transform: scaleY(1); }
.indice li.is-atual > a { color: var(--turq); }

/* --- Partilha --- */
.partilha__links { display: flex; flex-wrap: wrap; gap: 8px; }
.partilha__links a,
.partilha__copiar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.partilha__links a:hover,
.partilha__copiar:hover {
  color: var(--turq);
  border-color: rgba(46, 230, 197, .45);
  background: rgba(46, 230, 197, .08);
  transform: translateY(-2px);
}
.partilha__links svg { width: 16px; height: 16px; fill: currentColor; }
.partilha__links a:nth-child(4) svg,
.partilha__copiar svg { fill: none; }
.partilha__copiar.is-feito { color: var(--turq); border-color: rgba(46, 230, 197, .55); }

/* 07 ----------------------------------------------------- Prosa */

/* Tudo o que o cliente escreve no painel cai aqui dentro. As regras são
   por elemento, não por classe do Gutenberg, para o texto ficar certo
   venha de blocos ou de HTML colado. */

.prosa {
  max-width: var(--prosa-w);
  color: var(--prosa);
  font-size: 1.06rem;
  line-height: 1.78;
}

/* O espaçamento é do bloco de topo, não do elemento: assim serve tanto a
   um <p> do Gutenberg como a uma tabela colada à mão. Não voltar a pôr
   aqui `.prosa p { margin: 0 }` — essa regra pesa mais do que a de baixo
   e cola dois parágrafos seguidos um ao outro. */
.prosa > * { margin-block: 0; }
.prosa > * + * { margin-top: 1.35em; }

.prosa li p { margin: 0; }
.prosa strong, .prosa b { color: #fff; font-weight: 600; }
.prosa em { color: var(--ink); }

.prosa h2,
.prosa h3,
.prosa h4 {
  color: #fff;
  font-family: var(--font-head);
  letter-spacing: -.022em;
  line-height: 1.2;
  scroll-margin-top: 108px;
}

.prosa h2 {
  margin-top: 2.1em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.42rem, 1.15rem + .9vw, 1.86rem);
}
.prosa h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--grad);
}
.prosa h3 { margin-top: 1.9em; font-size: clamp(1.14rem, 1rem + .5vw, 1.34rem); }
.prosa h4 { margin-top: 1.7em; font-size: 1.04rem; }

.prosa h2 + *,
.prosa h3 + *,
.prosa h4 + * { margin-top: .8em; }

/* Ligações: sublinhado que se acende. Interna ou externa, o mesmo gesto —
   o que muda é o alvo, não o estilo. */
.prosa a {
  color: var(--turq);
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 197, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease), background .2s var(--ease);
}
.prosa a:hover {
  color: #7ff5e0;
  text-decoration-color: #7ff5e0;
  background: rgba(46, 230, 197, .09);
}

.prosa ul,
.prosa ol { padding-left: 0; list-style: none; }
.prosa li { position: relative; padding-left: 30px; }
.prosa li + li { margin-top: .62em; }

.prosa ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .68em;
  width: 7px;
  height: 7px;
  background: var(--turq);
  transform: rotate(45deg);
}

.prosa ol { counter-reset: passo; }
.prosa ol > li { counter-increment: passo; }
.prosa ol > li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--turq);
}

.prosa li ul,
.prosa li ol { margin-top: .6em; }

.prosa blockquote {
  margin-inline: 0;
  padding: 22px 26px;
  border-left: 2px solid transparent;
  border-image: var(--grad) 1;
  background: rgba(255, 255, 255, .028);
  font-family: var(--font-head);
  font-size: 1.12rem;
  line-height: 1.55;
  color: #fff;
}
.prosa blockquote p { margin: 0; }
.prosa blockquote p + p { margin-top: .7em; }
.prosa blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prosa figure { margin-inline: 0; }
.prosa img {
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.prosa figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prosa hr,
.prosa .wp-block-separator {
  height: 1px;
  border: 0;
  margin-block: 2.2em;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

.prosa code {
  padding: 2px 6px;
  font-family: var(--font-code);
  font-size: .86em;
  color: var(--turq);
  background: rgba(46, 230, 197, .08);
  border: 1px solid rgba(46, 230, 197, .2);
  border-radius: 3px;
}
.prosa pre {
  padding: 20px 22px;
  overflow-x: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-code);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.prosa pre code { padding: 0; border: 0; background: none; color: inherit; }

/* Tabela: rola dentro da própria caixa. Sem isto, uma tabela larga
   empurrava a página inteira para o lado no telemóvel. */
.prosa .wp-block-table,
.prosa .tabela-rola { overflow-x: auto; }
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
.prosa th,
.prosa td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.prosa th {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--turq);
  border-bottom-color: var(--line-2);
}
.prosa tr:last-child td { border-bottom: 0; }

/* Grupo com fundo da paleta vira caixa de destaque sem trabalho nenhum
   para quem escreve: basta escolher a cor "Superfície" no painel. */
.prosa .wp-block-group.has-background {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.prosa .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 2px;
  background: var(--grad);
  color: #04121a;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(46, 230, 197, .6);
}
.prosa .wp-block-button__link:hover { color: #04121a; background: var(--grad); }

.prosa .wp-block-embed iframe,
.prosa iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); }

/* Larguras do editor dentro de uma coluna estreita */
.prosa .alignwide,
.prosa .alignfull { width: auto; margin-inline: 0; }
.prosa .aligncenter { margin-inline: auto; }

/* 08 --------------------------------------- Rodapé do artigo */

.artigo__corpo { min-width: 0; }

.artigo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(34px, 4vw, 50px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.artigo__tags a {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.artigo__tags a:hover { color: var(--turq); border-color: rgba(46, 230, 197, .45); }

.artigo__marca {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.artigo__marca p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.artigo__marca strong { color: #fff; font-weight: 600; }
.artigo__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(46, 230, 197, .18), transparent 62%),
    radial-gradient(90% 90% at 80% 90%, rgba(42, 107, 242, .22), transparent 64%),
    var(--bg-2);
}
.artigo__avatar img { width: 22px; height: auto; opacity: .9; }
/* Anterior / seguinte */
.prox--artigo { margin-top: 0; gap: 22px; }
.prox--artigo a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 40%;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.prox--artigo a:hover { border-color: rgba(46, 230, 197, .34); transform: translateY(-3px); }
.prox--artigo span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .15em; color: var(--ink-3); }
.prox--artigo b {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
}
.prox--artigo a:hover b { color: var(--turq); }
.prox--fim { text-align: right; align-items: flex-end; }

/* 09 ------------------------------------------------ Responsivo */

@media (max-width: 1080px) {
  .artigo__layout { grid-template-columns: 1fr; }
  .artigo__lado {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
  }
  .indice {
    flex: 1 1 100%;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
  }
  .prosa { max-width: none; }
}

@media (max-width: 980px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard--destaque { flex-direction: column; }
  .pcard--destaque .pcard__media {
    flex: none;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .pgrid { grid-template-columns: 1fr; }
  .artigo__capa { border-radius: var(--r); }
  .prox--artigo a { flex: 1 1 100%; }
  .prox--fim { text-align: left; align-items: flex-start; }
  .busca { flex-direction: column; }
  .busca .btn { width: 100%; }
}