/* Meu CDN, TRAVESSIA: base comum a TODAS as páginas (home e páginas de serviço).
   Tokens, fonte, reset, selo fixo do canto, botão, rótulo, logos oficiais dos canais, fecho e rodapé.
   Ordem de carga: base.css → (home: travessia.css, secoes.css | páginas: servico.css, pg/<slug>.css) → menu.css.
   Separado de travessia.css na v4 (01/11/2026) sem mudar nenhuma regra. */

@font-face { font-family: 'Jakarta'; src: url('../fontes/jakarta-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --fundo: #0e0720;
  --fundo-2: #170c33;
  --tinta: #f6f1ff;
  --tinta-2: #cfc4e8;
  --tinta-3: #9d90bd;
  --magenta: #F000D0;
  --roxo: #8B2BE2;
  --azul: #0050F0;
  --degrade: linear-gradient(90deg, #F000D0 0%, #8B2BE2 52%, #0050F0 100%);
  --ambar: #ffc777;
  --fonte: 'Jakarta', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --alto: 100vh;
  --lado: clamp(20px, 4.4vw, 72px);
  --saida: cubic-bezier(.22, 1, .36, 1);
  --cab: 72px;
}
@supports (height: 100svh) { :root { --alto: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); overflow-x: clip; }
body { font: 400 1rem/1.6 var(--fonte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.022em; }
p { margin: 0; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--fundo); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }

/* ---------- cabeçalho e mega menu: assets/css/menu.css ---------- */

/* ---------- selo fixo do canto (só texto; sem o logo da Meta). Some quando um link ou botão passa por baixo (secoes.js) ---------- */
.selo {
  position: fixed; z-index: 45; left: var(--lado); bottom: 18px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--lado));
  padding: 7px 12px 7px 9px; border-radius: 8px; background: rgb(12 6 28 / .86); border: 1px solid rgb(255 255 255 / .12);
  font: 600 .74rem/1.25 var(--fonte); letter-spacing: .02em; color: var(--tinta); pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--saida), visibility 0s;
}
.selo i { font-style: normal; color: var(--magenta); margin: 0 2px; }
.selo svg { width: 16px; height: 16px; flex: none; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.selo circle { stroke: rgb(255 255 255 / .35); }
.selo path { stroke: #7cf2b0; }
.selo.is-oculto, .cab.is-mega ~ .selo, .cab.is-gaveta ~ .selo { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s ease, transform .3s var(--saida), visibility 0s .18s; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  font: 700 1rem/1 var(--fonte); color: #fff; padding: 16px 22px; border-radius: 12px;
  background: var(--degrade); box-shadow: 0 10px 30px -12px rgb(240 0 208 / .55);
  transition: transform .4s var(--saida), box-shadow .4s var(--saida);
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgb(139 43 226 / .7); }
.rotulo { font: 700 .76rem/1.25 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo span { color: var(--magenta); }
/* "Conhecer em detalhe →": link discreto de cada seção da home para a página do serviço (também usado nas páginas) */
.detalhe { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font: 700 .95rem/1.2 var(--fonte); color: var(--tinta);
  text-decoration: underline; text-decoration-color: rgb(240 0 208 / .6); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .25s, text-decoration-color .25s; }
.detalhe span { display: inline-block; color: var(--magenta); text-decoration: none; transition: transform .35s var(--saida); }
.detalhe:hover { color: #fff; text-decoration-color: var(--magenta); }
.detalhe:hover span { transform: translateX(4px); }
.detalhe--linha { display: inline; min-height: 0; margin: 0 0 0 2px; white-space: nowrap; font-size: inherit; }
.botao + .detalhe { margin: 0 0 0 18px; vertical-align: middle; }

[id] { scroll-margin-top: calc(var(--cab) + 12px); }

/* logos oficiais dos canais (arquivos em img/v3/marcas, fill=currentColor): o desenho é máscara, a cor oficial é o fundo.
   Ficam sempre sobre fundo claro (o recorte do "f" e do telefone mostra o branco, como no logo oficial). */
.mc { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.14em; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mc--wa { --m: url('../img/v3/marcas/whatsapp.svg'); --c: #25D366; }
.mc--ig { --m: url('../img/v3/marcas/instagram.svg'); --c: radial-gradient(circle at 0% 100%, #FFD600 0%, #FF7A00 25%, #FF0069 50%, #D300C5 75%, #7638FA 100%); }
.mc--fb { --m: url('../img/v3/marcas/facebook.svg'); --c: #0866FF; }
.mc--ms { --m: url('../img/v3/marcas/messenger.svg'); --c: #0084FF; }
.mc--app { -webkit-mask: none; mask: none; background: url('../img/icone.png') center / contain no-repeat; border-radius: 22%; }

/* =========================================================================================================
   FECHO: a Ponte da Amizade à noite (3 camadas), o logo oficial, o buldogue e o canal de contato.
   Base = a cena parada e completa; com movimento, secoes.js só escreve transform e opacidade (scrub, sem pin).
   ========================================================================================================= */
.fecho { position: relative; background: #070312; color: var(--tinta); }
.fecho__palco { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: max(var(--alto), 660px); padding: calc(var(--cab) + 36px) var(--lado) 64px; }
.fecho__cena { position: absolute; inset: 0; z-index: -2; transform-origin: 60% 72%; will-change: transform; }
.fecho__camada { position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; will-change: transform; }
.fecho__camada img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.fecho__veu { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(7 3 18 / .92) 0%, rgb(7 3 18 / .78) 30%, rgb(7 3 18 / .28) 52%, rgb(7 3 18 / 0) 66%),
              linear-gradient(180deg, rgb(7 3 18 / .72) 0%, rgb(7 3 18 / 0) 22%), linear-gradient(0deg, #070312 0%, rgb(7 3 18 / .5) 12%, rgb(7 3 18 / 0) 30%); }
.fecho__texto { width: min(580px, 46vw); }
.fecho__logo { width: min(400px, 100%); height: auto; margin: 0 0 26px -8px; filter: drop-shadow(0 12px 48px rgb(139 43 226 / .5)); transform-origin: 0 50%; }
.fecho__titulo { font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; margin: 12px 0 14px; text-shadow: 0 2px 30px rgb(7 3 18 / .5); }
.fecho__apoio { color: var(--tinta-2); font-size: 1.08rem; line-height: 1.55; max-width: 30em; }
.fecho__paises { margin-top: 12px; font-weight: 700; font-size: 1.06rem; color: #fff; }
/* desktop: o buldogue fica na margem direita da cena (a caixa do contato não é posicionada, então ele usa o palco) */
.fecho__boris { position: absolute; z-index: 0; right: clamp(-40px, -1vw, 0px); bottom: 0; height: min(70%, 640px); width: auto; max-width: none; transform-origin: 50% 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgb(0 0 0 / 0) 98%); mask-image: linear-gradient(180deg, #000 72%, rgb(0 0 0 / 0) 98%);
  filter: brightness(.9) saturate(.94) drop-shadow(-22px 12px 40px rgb(4 2 12 / .85)) drop-shadow(0 0 60px rgb(139 43 226 / .38)); will-change: transform, opacity; }
.fecho__canal { position: relative; z-index: 1; margin-top: 28px; border-radius: 18px; overflow: hidden; background: rgb(12 6 28 / .86); border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 34px 70px -32px rgb(0 0 0 / .9); }
.fecho__wa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; text-decoration: none; color: #fff;
  background: linear-gradient(100deg, rgb(240 0 208 / .2), rgb(139 43 226 / .14) 50%, rgb(0 80 240 / .14)); border-bottom: 1px solid rgb(255 255 255 / .1); transition: background .3s; }
.fecho__wa:hover { background: linear-gradient(100deg, rgb(240 0 208 / .32), rgb(139 43 226 / .24) 50%, rgb(0 80 240 / .24)); }
.fecho__wa:focus-visible { outline-offset: -4px; border-radius: 18px 18px 0 0; }
.fecho__wa-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px -8px rgb(0 0 0 / .6); }
.fecho__wa-ico .mc { width: 30px; height: 30px; }
.fecho__wa-txt small { display: block; margin-bottom: 6px; font: 700 .72rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.fecho__wa-txt b { display: block; font-weight: 800; font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.fecho__wa-ir { padding: 13px 18px; border-radius: 11px; background: var(--degrade); font: 700 .98rem/1 var(--fonte); white-space: nowrap; box-shadow: 0 10px 26px -12px rgb(240 0 208 / .7); }
.fecho__wa-ir span { display: inline-block; transition: transform .35s var(--saida); }
.fecho__wa:hover .fecho__wa-ir span { transform: translateX(4px); }
.fecho__dados { margin: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
.fecho__dados > div { padding: 16px 20px 18px; }
.fecho__dados > div + div { border-left: 1px solid rgb(255 255 255 / .1); }
.fecho__dados dt { margin-bottom: 7px; font: 700 .72rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.fecho__dados dd { margin: 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.45; }
.fecho__dados a { color: #fff; font-weight: 700; text-decoration-color: var(--magenta); text-underline-offset: 3px; overflow-wrap: anywhere; }
html.mov .fecho__cena, html.mov .fecho__camada { will-change: transform; }

/* =========================================================================================================
   RODAPÉ: logo, mapa do site (as mesmas seções do mega menu), contato, redes e os dados legais
   ========================================================================================================= */
.rodape { position: relative; padding: 72px var(--lado) 40px; background: #070312; color: var(--tinta-3); font-size: .92rem; }
.rodape::before { content: ''; position: absolute; left: var(--lado); right: var(--lado); top: 0; height: 1px; background: linear-gradient(90deg, rgb(240 0 208 / 0), rgb(240 0 208 / .7) 20%, rgb(139 43 226 / .7) 50%, rgb(0 80 240 / .7) 80%, rgb(0 80 240 / 0)); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 3.3fr) minmax(0, 1.2fr); gap: 40px 52px; max-width: 1380px; margin: 0 auto; }
.rodape__marca img { width: min(220px, 100%); height: auto; margin: 0 0 18px -6px; }
.rodape__marca p { color: var(--tinta-2); line-height: 1.55; max-width: 25em; }
.rodape__meta { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; font-weight: 700; font-size: .86rem; line-height: 1.4; }
.rodape__marca .rodape__meta { color: var(--tinta); }
.rodape__meta i { font-style: normal; color: var(--magenta); }
.rodape__meta svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rodape__meta circle { stroke: rgb(255 255 255 / .35); }
.rodape__meta path { stroke: #7cf2b0; }
.rodape__mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.rodape__grupo ul, .rodape__contato ul { list-style: none; margin: 0; padding: 0; }
.rodape__grupo-titulo, .rodape__titulo { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font: 800 .98rem/1.2 var(--fonte); letter-spacing: 0; color: var(--tinta); text-decoration: none; }
.rodape__grupo li a, .rodape__contato li a, .rodape__contato li span { display: inline-flex; align-items: center; min-height: 40px; color: var(--tinta-2); text-decoration: none; font-size: .88rem; line-height: 1.35; }
.rodape__contato li span { min-height: 0; padding: 6px 0; }
.rodape__grupo a:hover, .rodape__contato a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.rodape__contato .rodape__titulo + ul { margin-bottom: 10px; }
.rodape__redes a span { margin-left: 6px; color: var(--tinta-3); }
.rodape__base { display: grid; gap: 8px; max-width: 1380px; margin: 48px auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .08); }
.rodape__legal { font-size: .78rem; line-height: 1.5; }

@media (min-width: 761px) and (max-width: 1180px) {
  .rodape__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape__mapa { grid-column: 1 / -1; grid-row: 2; }
  .fecho__texto { width: min(520px, 54vw); }
  .fecho__boris { height: min(56%, 520px); right: -4vw; }
}

/* =========================================================================================================
   CELULAR: o fecho vira coluna (logo e chamada em cima, o buldogue espiando atrás do contato embaixo)
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .fecho__palco { flex-direction: column; align-items: stretch; min-height: var(--alto); padding: calc(var(--cab) + 20px) 16px 26px; }
  .fecho__camada img { object-position: 74% 58%; }
  .fecho__veu { background: linear-gradient(180deg, rgb(7 3 18 / .9) 0%, rgb(7 3 18 / .72) 40%, rgb(7 3 18 / .2) 58%, rgb(7 3 18 / .45) 76%, #070312 100%); }
  .fecho__texto { display: flex; flex-direction: column; flex: 1; width: auto; }
  .fecho__logo { width: min(290px, 74vw); margin: 0 0 14px -6px; }
  .fecho__titulo { font-size: clamp(2rem, 9vw, 2.4rem); margin: 8px 0 10px; }
  .fecho__apoio { font-size: .96rem; }
  .fecho__paises { font-size: .98rem; }
  .fecho__contato { position: relative; margin-top: auto; padding-top: 150px; }
  .fecho__boris { right: 6px; bottom: auto; top: 0; height: 176px; -webkit-mask-image: none; mask-image: none; filter: brightness(.94) drop-shadow(-10px 8px 20px rgb(4 2 12 / .8)); }
  .fecho__canal { margin-top: -18px; }
  .fecho__wa { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; }
  .fecho__wa-ico { width: 46px; height: 46px; }
  .fecho__wa-ico .mc { width: 26px; height: 26px; }
  .fecho__wa-txt b { font-size: 1.36rem; }
  .fecho__wa-ir { grid-column: 1 / -1; text-align: center; padding: 14px; }
  .fecho__dados { grid-template-columns: 1fr; }
  .fecho__dados > div { padding: 13px 16px 14px; }
  .fecho__dados > div + div { border-left: 0; border-top: 1px solid rgb(255 255 255 / .1); }

  .rodape { padding: 56px 20px 64px; }
  .rodape::before { left: 20px; right: 20px; }
  .rodape__grade { grid-template-columns: 1fr; gap: 30px; }
  .rodape__marca img { width: 190px; }
  .rodape__mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .rodape__grupo li a, .rodape__contato li a { min-height: 44px; }
  .rodape__base { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}