/* ===========================================================================
   Legacy — tokens and shared primitives.
   Everything both pages need: brand palette, type, the fixed bar, the pill
   buttons, the kicker label and the grain. Page-specific layout stays in each
   page's own <style>. Kept in one file so the palette cannot drift between
   index.html and pacotes.html.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Brand primaries, straight from the 2025/2 manual. */
  --navy-deep: #0b1e4a;
  --navy:      #1b3e72;
  --blue:      #3a87b2;
  --blue-soft: #85acc9;
  --grey:      #d9d9d9;

  --ink:   #ffffff;
  --muted: #b3c8de;
  --line:  rgba(179, 200, 222, .22);

  --sans: "Outfit", system-ui, -apple-system, sans-serif;
  --mark: "Archivo Black", var(--sans);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1180px;

  /* The bar's height, expressed rather than measured, so a page can subtract it
     exactly. Both terms are reused by .nav and .brand img below. */
  --nav-pad: clamp(.8rem, 1.5vw, 1.15rem);
  --brand-h: clamp(30px, 3.6vw, 38px);
  --nav-h: calc(var(--brand-h) + var(--nav-pad) * 2);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ---------- grain --------------------------------------------------------- */
/* Wide gradients band badly on 8-bit panels without it. */

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ---------- top bar ------------------------------------------------------- */
/* Full-bleed and fixed. Nothing at rest — the bar is invisible over the hero
   and only takes on a surface once the page has moved. A permanent gradient
   reads as a band hanging off the top of the design. */

.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  /* backdrop-filter is deliberately NOT transitioned: it starts from `none`,
     which does not interpolate, and the animation stalls on blur(0px). */
  transition: background-color .3s ease, border-color .3s ease;
}

.topbar.is-stuck {
  background-color: rgba(16, 42, 82, .82);
  border-bottom-color: rgba(179, 200, 222, .14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* The bar's trigger. Needs real area — IntersectionObserver is unreliable on a
   zero-sized box — but must stay out of the flow so it adds no height. */
#topSentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.nav {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: var(--nav-pad);
}

/* The mark: the tree keeps its own blues (it was drawn for a dark ground),
   the wordmark is Archivo Black per the manual. */
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand img { height: var(--brand-h); width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--mark);
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  letter-spacing: .01em;
}
.brand__sub {
  margin-top: .22em;
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .19em;
  color: var(--blue-soft);
}

.nav__links { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 400;
  transition: color .2s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------- menu do celular (menu.js) ------------------------------------- */

.menu-toggle { display: none; }
@media (max-width: 860px) {
  /* O botão principal fica fixo no topo; o resto vai para o menu. */
  .nav { gap: .6rem; }
  .nav > .btn--shimmer { margin-left: auto; padding: .5rem .9rem; font-size: .78rem; }
  .menu-toggle {
    display: grid;
    align-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(11, 30, 74, .55);
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    height: 1.6px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
}
.menu-painel {
  padding: .6rem var(--gutter) 1.4rem;
  border-top: 1px solid var(--line);
  background: rgba(11, 30, 74, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: menu-desce .35s var(--ease);
}
.menu-painel[hidden] { display: none; }
.menu-painel__links { margin: 0; padding: 0; list-style: none; }
.menu-painel__links a {
  display: block;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
}
/* Com o menu aberto a barra fica sólida, mesmo no topo da página. */
.menu-aberto .topbar { background-color: rgba(11, 30, 74, .96); }
@keyframes menu-desce { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ------------------------------------------------------- */
/* Always pills, always compact. One shape everywhere; emphasis comes from
   fill versus outline, never from size. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .56rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .845rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(2px); }

.btn--solid {
  background: var(--ink);
  color: var(--navy-deep);
  font-weight: 600;
}
.btn--solid:hover { background: #ffffff; }

.btn--outline {
  /* Faint dark glass, not transparent: this pill can land on the hottest part
     of the arc, where white-on-glow drops below readable contrast. */
  background: rgba(11, 30, 74, .42);
  backdrop-filter: blur(6px);
  color: var(--ink);
  border-color: var(--line);
}
.btn--outline:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(11, 30, 74, .62);
}

/* ---------- hover interativo ---------------------------------------------- */
/* Porte do "Interactive Hover Button" (magicui, 21st.dev). botoes.js monta
   dentro do botão: um ponto, o rótulo original e uma cópia do rótulo com seta.
   No hover o ponto cresce até cobrir o botão, o rótulo sai para a direita e a
   cópia entra no lugar. */

.btn.is-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn.is-hover:hover { transform: none; }
.btn.is-hover:hover svg { transform: none; }
.btn__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-fill, var(--blue));
  transition: transform .45s var(--ease);
  z-index: -1;
}
.btn.is-hover:hover .btn__dot,
.btn.is-hover:focus-visible .btn__dot { transform: scale(var(--dot-scale, 60)); }
.btn__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: transform .35s var(--ease), opacity .25s ease;
}
.btn.is-hover:hover .btn__label,
.btn.is-hover:focus-visible .btn__label { transform: translateX(2.6rem); opacity: 0; }
.btn__swap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--dot-ink, #ffffff);
  opacity: 0;
  transform: translateX(2.6rem);
  transition: transform .35s var(--ease), opacity .25s ease;
  pointer-events: none;
}
.btn.is-hover:hover .btn__swap,
.btn.is-hover:focus-visible .btn__swap { transform: translateX(0); opacity: 1; }
.btn--solid.is-hover   { --dot-fill: var(--navy-deep); --dot-ink: #ffffff; }
.btn--outline.is-hover { --dot-fill: var(--blue);      --dot-ink: #ffffff; }

/* ---------- shimmer ------------------------------------------------------- */
/* Porte do "Shimmer Button" (magicui, 21st.dev) para os dois botões de maior
   peso: o do topo direito e o principal do hero. Uma faixa de luz azul-céu
   gira pela borda; o miolo fica no azul mais fundo com brilho interno. */

@property --shimmer-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.btn--shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  font-weight: 600;
  background: transparent;
  border-color: rgba(186, 222, 252, .18);
}
.btn--shimmer::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from var(--shimmer-a),
    transparent 0deg, transparent 250deg,
    rgba(186, 222, 252, .95) 320deg, #ffffff 340deg, transparent 360deg);
  animation: shimmer-gira 3s linear infinite;
}
.btn--shimmer::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: inherit;
  background: var(--navy-deep);
  box-shadow: inset 0 -8px 12px rgba(186, 222, 252, .14);
  transition: box-shadow .3s ease;
}
.btn--shimmer:hover::after { box-shadow: inset 0 -6px 14px rgba(186, 222, 252, .32); }
.btn--shimmer:active { transform: translateY(1px); }
@keyframes shimmer-gira { to { --shimmer-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn--shimmer::before { animation: none; } }

/* ---------- estrelas em bolinhas ------------------------------------------ */
/* A nota do cliente como o grupo de avatares da home: bolinhas perfiladas, uma
   sobre a outra, com anel da cor do fundo. Acesas no azul da marca; apagadas
   em vidro. --ring troca conforme o fundo onde as estrelas estão. */

.stars { --ring: var(--navy-deep); display: inline-flex; align-items: center; }
.stars i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-style: normal;
  font-size: .62rem;
  line-height: 1;
  color: rgba(186, 222, 252, .45);
  background: rgba(186, 222, 252, .12);
  box-shadow: 0 0 0 2px var(--ring);
}
.stars i svg { width: 58%; height: 58%; display: block; }
.stars i + i { margin-left: -5px; }
.stars i.on { color: #ffffff; background: var(--blue); }

/* ---------- perguntas frequentes ------------------------------------------ */
/* Porte do "FAQ Section" (ruixen.ui, 21st.dev): cabeçalho centralizado com a
   pill, perguntas em duas colunas, cada uma abrindo com a seta. HTML e JSON-LD
   saem de gerar-faq.mjs. <details> abre sem JavaScript; onde o navegador
   permite, a altura anima. */

.faq {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
}
.faq__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.faq__head { max-width: 46rem; margin: 0 auto clamp(2rem, 5vh, 3rem); text-align: center; }
.faq__head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.faq__head p:not(.kicker) {
  margin: .9rem auto 1.4rem;
  max-width: 52ch;
  font-size: clamp(.93rem, 1.02vw, 1.02rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}
.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) { .faq__cols { grid-template-columns: 1fr; } }

.faq__item { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #ffffff; }
.faq__item summary svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: .2rem;
  color: var(--blue-soft);
  transition: transform .35s var(--ease);
}
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p {
  margin: 0;
  padding: 0 2rem 1.2rem 0;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}
.faq__item::details-content {
  height: 0;
  overflow: clip;
  transition: height .4s var(--ease), content-visibility .4s allow-discrete;
}
.faq__item[open]::details-content { height: auto; }

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

.footer {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid var(--line);
  background: var(--navy-deep);
  text-align: center;
}
.footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 4rem) var(--gutter) clamp(2rem, 5vh, 2.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vh, 1.9rem);
}
.footer__brand { justify-content: center; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem clamp(1.2rem, 2.6vw, 2.2rem); }
.footer__links a {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  opacity: .85;
  transition: opacity .2s, color .2s;
}
.footer__links a:hover { opacity: 1; color: var(--blue-soft); }
.footer__social { display: flex; gap: .9rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.footer__social a:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__rule { height: 1px; background: var(--line); }
.footer__copy {
  margin: 0;
  padding: 1.4rem var(--gutter) 1.8rem;
  font-size: .8rem;
  color: rgba(179, 200, 222, .6);
}
.footer__copy a { color: inherit; text-underline-offset: 3px; }
.footer__copy a:hover { color: var(--ink); }

/* ---------- atalhos fixos ------------------------------------------------- */
/* Instagram e WhatsApp sempre à mão, no canto inferior direito. Discretos em
   repouso (vidro escuro, ícone claro); no hover ganham a cor da rede. */

.float-social {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.float-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(186, 222, 252, .22);
  background: rgba(11, 30, 74, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .85);
  box-shadow: 0 10px 24px -12px rgba(4, 12, 28, .9);
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.float-social a:hover, .float-social a:focus-visible { transform: translateY(-2px); color: #ffffff; }
.float-social__whatsapp:hover, .float-social__whatsapp:focus-visible { background: #25d366; border-color: #25d366; }
.float-social__instagram:hover, .float-social__instagram:focus-visible { background: #d6297a; border-color: #d6297a; }
.float-social svg { width: 20px; height: 20px; }

/* ---------- shared label -------------------------------------------------- */

.kicker {
  margin: 0 0 clamp(.9rem, 1.7vw, 1.35rem);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-soft);
}