/* Peças reutilizadas: botões, barras fixas, bandeiras, listas e FAQ */

/* Bandeiras (símbolos no sprite do index.html) */

.bandeira {
  flex: none;
  height: var(--bh, 1em);
  width: auto;
  aspect-ratio: 1.9 / 1;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
}
.bandeira.br { aspect-ratio: 10 / 7; }

.seta { flex: none; width: 1.25em; height: 1.25em; }

/* Botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  background: var(--laranja);
  color: var(--preto);
  border: 2px solid var(--laranja);
  border-radius: 0.25rem;
  font: 700 0.9375rem/1 var(--painel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.btn svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s var(--ease); }
.btn:active { transform: scale(0.97); }

.btn-sm { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.8125rem; }

.btn-sec { background: transparent; color: var(--creme); border-color: var(--creme); }

.btn-escuro { background: var(--preto); border-color: var(--preto); color: var(--creme); }

@media (hover: hover) {
  .btn:hover { background: var(--pessego); border-color: var(--pessego); }
  .btn:hover svg { transform: translateX(0.25rem); }
  .btn-sec:hover { background: var(--creme); border-color: var(--creme); color: var(--preto); }
  .btn-escuro:hover { background: var(--laranja); border-color: var(--preto); color: var(--preto); }
}

/* Barra do topo */

.topo {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--topo-h);
  background: var(--grafite);
  border-bottom: 1px solid var(--linha);
}

.topo-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.marcas { display: flex; align-items: center; gap: 0.55rem; }
.logo-futedu { height: 1.625rem; width: auto; }
.logo-nona { height: 2.25rem; width: auto; }
.marcas-x { font: 500 0.875rem/1 var(--painel); color: var(--cinza); }

.selo-eua {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border: 1px solid var(--linha);
  border-radius: 99px;
  font: 700 0.6875rem/1.1 var(--painel);
  letter-spacing: 0.08em;
  white-space: nowrap;
  --bh: 1rem;
}
.selo-eua .seta { display: inline-block; width: 1em; height: 1em; margin-inline: 0.25em; vertical-align: -0.15em; }
.topo .btn { display: none; }

@media (min-width: 768px) {
  :root { --topo-h: 4.25rem; }
  .topo .btn { display: inline-flex; }
  .topo-in { gap: 1.5rem; }
  .selo-eua { margin-left: auto; font-size: 0.75rem; }
  .logo-futedu { height: 1.875rem; }
  .logo-nona { height: 2.625rem; }
}

/* Barra fixa embaixo (celular) */

.barra-baixo {
  position: fixed;
  z-index: 50;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--preto);
  border-top: 1px solid var(--linha);
  transition: transform 0.45s var(--ease), visibility 0s 0s;
}
.barra-baixo p { font: 700 0.875rem/1.25 var(--painel); letter-spacing: 0.06em; text-transform: uppercase; }
.barra-baixo p span { display: block; font-weight: 500; color: var(--pessego); }
.barra-baixo.oculta { transform: translateY(110%); visibility: hidden; transition: transform 0.45s var(--ease), visibility 0s 0.45s; }
.barra-baixo .btn { flex: none; min-height: 2.875rem; padding-inline: 1.1rem; font-size: 0.8125rem; white-space: nowrap; }

@media (min-width: 440px) {
  .barra-baixo p span { display: inline; }
  .barra-baixo p span::before { content: " · "; }
}

@media (min-width: 768px) { .barra-baixo { display: none; } }

/* Lista com marcador de check (máscara, cor herdada do texto) */

.lista-ok li { position: relative; padding: 0.35rem 0 0.35rem 2.1rem; }
.lista-ok li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* FAQ (details/summary) */

.faq details { border-top: 2px solid var(--preto); }
.faq details:last-child { border-bottom: 2px solid var(--preto); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.9rem 0;
  font: 700 1.0625rem/1.3 var(--painel);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding: 0 2.5rem 1.25rem 0; }