:root {
  --clout-bg: #06060b;
  /* ligeiramente mais escuro */
  /* fundo preto espacial */
  --clout-deep: #2a0072;
  /* roxo profundo */
  --clout-main: #6b21ff;
  /* roxo vibrante */
  --clout-accent: #a78bfa;
  /* detalhes */
  --clout-white: #f5f5f7;
  /* texto claro */
  --glass: rgba(255, 255, 255, .05);
  --border: rgba(167, 139, 250, .25);
}

html,
body {
  background: var(--clout-bg);
  color: var(--clout-white);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== After-hero site background (hard cut) ===== */
.after-hero-bg {
  /* vinheta fixa: fundo não se move ao rolar */
  position: relative;
  background:
    /* vinheta forte no topo */
    radial-gradient(140% 120% at 50% -10%, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 58%),
    /* brilho central roxo */
    radial-gradient(130% 120% at 50% 30%, #6b21ff 0%, #4c14d6 40%, #2a0072 68%, #0e0a19 86%, #000000 100%),
    /* cantos escurecidos (vinheta geral) */
    radial-gradient(120% 120% at -10% -10%, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 120% at 110% -10%, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 60%),
    radial-gradient(150% 150% at -12% 120%, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, 0) 65%),
    radial-gradient(120% 120% at 110% 110%, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 60%);
  background-attachment: fixed;
}

.after-hero-bg::before {
  content: none;
}

.after-hero-bg>* {
  position: relative;
  z-index: 1;
}

/* ===== Light Theme from Reels onward ===== */
.theme-light {
  --clout-white: #111318;
  /* reuse existing var for text */
  --border: rgba(17, 19, 24, .12);
  color: var(--clout-white);
  background: #f8f8f8;
}

.theme-light .section-title,
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5,
.theme-light h6 {
  color: #111;
}

.theme-light .sub,
.theme-light .duo-sub,
.theme-light .ig-fake {
  color: #5f6574;
}

.theme-light .divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent);
}

.theme-light .card-glass {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
}

.theme-light .reel {
  background: #fff;
  border-color: var(--border);
}

.theme-light .btn-modern {
  color: #212529;
  border-color: rgba(17, 19, 24, .16);
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0));
}

.theme-light .btn-modern:hover {
  border-color: rgba(17, 19, 24, .28);
  color: #212529;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}

.theme-light .link-light {
  color: #111 !important;
}

.theme-light .ig-fake a {
  color: #111 !important;
}

.theme-light .form-control.bg-dark {
  background: #f5f6f9 !important;
  color: #111 !important;
}

.theme-light .btn-outline-light {
  color: #212529 !important;
  border-color: #212529 !important;
}

.theme-light .btn-outline-light:hover {
  background: #212529 !important;
  color: #fff !important;
}

footer.theme-light {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ===== Hero / Canvas ===== */
#hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
}

#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-gradient {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70vh;
  filter: blur(90px);
  background: radial-gradient(60% 70% at 50% 40%, rgba(107, 33, 255, .55), rgba(42, 0, 114, .35) 48%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  /* desativado: não exibir o roxo de borda */
  opacity: 0 !important;
  display: none !important;
}

/* Sempre invisível, mesmo se alguma classe for adicionada por engano */
#hero.glow-on .hero-gradient {
  opacity: 0 !important;
  display: none !important;
}

/* Header “não fullwidth”: a barra é transparente, o vidro fica na .container interna */
.navbar {
  --bs-navbar-brand-color: #fff;
  background: transparent;
  border-bottom: none;
}

/* O “bloco” de header com vidro/borda/raio aplicado na grade interna */
.navbar .container.nav-grid {
  background: rgba(12, 12, 20, .32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Sem borda ao redor */
  border: none;
  /* Bordas mais arredondadas */
  border-radius: 24px;
  padding: 8px 16px;
  box-shadow: 0 10px 30px rgba(107, 33, 255, .12);
}

@media (max-width: 575.98px) {
  .navbar .container.nav-grid {
    border-radius: 18px;
    padding: 6px 10px;
  }
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: conic-gradient(from 210deg, var(--clout-main), var(--clout-deep));
}

.btn-modern {
  --bs-btn-padding-y: .7rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-weight: 600;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: var(--clout-white);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .2s ease;
}

.btn-modern:hover {
  border-color: #bda6ff;
  background-color: #fff;
  color: #212529;
  box-shadow: 0 10px 30px rgba(107, 33, 255, .25)
}

.chip {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(107, 33, 255, .12);
  color: #cbb9ff;
}

.headline {
  font-weight: 800;
  letter-spacing: -.02em;
}

.sub {
  color: #cfd0d7
}

/* Espaço entre a logo+chip e o título do hero */
.hero-topline {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(14px, 2.4vw, 24px);
}

.hero-logo-top {
  display: inline-block;
  height: auto;
}

/* ===== Sections ===== */
section {
  position: relative;
  padding: 84px 0;
}

.section-title {
  font-weight: 800;
  letter-spacing: .02em;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 20px 0 40px;
}

.card-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(107, 33, 255, .15)
}

.icon-hex {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  /* grid facilita o centramento absoluto */
  place-items: center;
  /* centro perfeito horizontal/vertical */
  background: linear-gradient(180deg, rgba(107, 33, 255, .2), rgba(42, 0, 114, .35));
  border: 1px solid var(--border);
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Ícone interno levemente maior e central, sem esticar o container */
.icon-hex>i.bi,
.icon-hex>svg {
  font-size: 1.15rem;
  /* tamanho do ícone */
  width: 1.15em;
  height: 1.15em;
  display: inline-grid;
  /* evita baseline estranha */
  place-items: center;
  line-height: 1;
  /* remove deslocamento vertical por line-height */
}

/* Corrige possíveis deslocamentos em ícones de Bootstrap Icons que usam ::before */
.icon-hex>i.bi::before {
  display: block;
  /* trata pseudo como bloco para centramento exato */
  line-height: 1;
  /* evita “subir/descer” pelo line-height padrão */
}


.list-dash li {
  margin: .5rem 0
}

.list-dash li::marker {
  color: var(--clout-accent)
}

/* ===== Sócios & Equipe — mosaic ===== */
.mosaic {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}

.msq {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f16;
  border: 1px solid var(--border);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.msq:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(107, 33, 255, .18);
}

.msq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tamanhos/variações */
.msq-a {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 4/3;
}

.msq-b {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 1/1;
}

.msq-c {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 1/1;
}

.msq-d {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 4/5;
}

@media (max-width: 576px) {
  .mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .msq-d {
    aspect-ratio: 3/4;
  }
}

/* ===== Projects / Media ===== */
.work-thumb {
  aspect-ratio: 16/9;
  background: #0f0f16;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden
}

.reel {
  aspect-ratio: 9/16;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #0f0f16;
  position: relative;
  overflow: hidden
}

.reel::after {
  content: "◀";
  font-size: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: .9;
}

.ig-fake {
  font-size: .85rem;
  color: #c5c6d0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-style: italic;
}

.ig-fake a {
  font-family: inherit;
  font-style: inherit;
}

/* Reels section title in Playfair italic */
#reels h5 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  /* letter-spacing: .2px; */
}

/* ===== Footer ===== */
footer {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .02)
}

/* ===== New Footer ===== */
.site-footer {
  background: #000;
  color: #ddd;
}

.site-footer .old-footer-block {
  display: none !important;
}

.site-footer .footer-logo {
  height: 46px;
  width: auto;
  display: block;
  margin-right: auto;
}

.site-footer a {
  color: #cfd0d7;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-links li {
  margin: .25rem 0;
}

.site-footer .footer-bottom {
  border-color: rgba(255, 255, 255, .08) !important;
}

.site-footer .credit {
  color: #aeb2bd;
}

.site-footer .policy a {
  color: #9aa0b3;
}

.site-footer .policy a:hover {
  color: #fff;
}

.credit {
  color: #9aa0b3
}

/* Utilities */
.bg-soft {
  background: radial-gradient(60% 120% at 120% -10%, rgba(107, 33, 255, .15), rgba(107, 33, 255, 0) 60%)
}

.gradient-text {
  background: linear-gradient(90deg, #cbb9ff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* Contato: remover glow roxo e unificar inputs */
#contato .card-glass {
  box-shadow: none !important;
}

#contato .card-glass:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08) !important;
  border-color: rgba(0, 0, 0, .08) !important;
}

#contato .form-control,
#contato .form-control::placeholder {
  font-size: 1rem !important;
}

/* Nota de envio do formulário */
#contato .form-note {
  display: none;
  margin-top: .75rem;
  padding: .6rem .9rem;
  border-radius: 10px;
  font-weight: 600;
}

#contato .form-note.ok {
  display: block;
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .35);
  color: #1f7a47;
}

#contato .form-note.err {
  display: block;
  background: rgba(220, 53, 69, .10);
  border: 1px solid rgba(220, 53, 69, .30);
  color: #842029;
}

.logo-invert {
  filter: brightness(0) invert(1)
}

:root {
  --header-h: 88px;
}

section[id] {
  scroll-margin-top: var(--header-h);
}

@media (max-width: 576px) {
  :root {
    --header-h: 64px;
  }
}

/* Cabeçalho sempre visível: não zerar a altura do header ao rolar (removida a regra que definia --header-h:0) */

.navbar.fixed-top {
  transition: transform .4s ease, background-color .2s ease;
}

/* Não esconder a navbar ao rolar: manter sempre no topo */
body.scrolled .navbar {
  transform: translateY(0);
}

body.at-top .navbar {
  transform: translateY(0);
}

.mini-menu {
  position: fixed;
  right: 16px;
  bottom: 12px;
  /* encostado embaixo */
  top: auto;
  transform: none;
  z-index: 1030;
  display: none;
}

.mini-menu.show {
  display: block;
}

:root {
  --mini-item-w: 190px;
}

/* largura fixa dos botões (desktop/tablet) */

.mini-items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* alinha pela direita */
  gap: 10px;
  margin-bottom: 12px;
}

.mini-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .55rem .8rem .55rem .7rem;
  /* levemente mais à esquerda */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(107, 33, 255, .14);
  color: var(--clout-white);
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}


.mini-item .label {
  display: none;
}

@media (min-width: 576px) {
  .mini-item {
    width: var(--mini-item-w);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  /* mesma largura para todos */
  .mini-item .label {
    display: inline;
  }
}

.mini-items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.mini-item .label {
  display: none;
}

@media (min-width: 576px) {
  .mini-item .label {
    display: inline;
  }
}

.mini-fab:active {
  transform: scale(.98);
}

.mini-menu .mini-items a {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.mini-menu.open .mini-items a {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Desktop (>=992px): esconder mini menu lateral */
@media (min-width: 992px) {

  /* Desktop: esconder apenas os itens do mini menu, manter botão WhatsApp */
  .mini-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mini-menu .mini-items {
    display: none !important;
  }

  .mini-menu .mini-fab {
    display: none !important;
  }

  .mini-menu .mini-actions {
    display: flex !important;
  }

  .mini-menu .mini-whats {
    display: grid !important;
  }
}

/* grupo de ações do mini menu (FAB + Whats abaixo) */
.mini-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.mini-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #fff;
  box-shadow: 0 12px 32px rgba(107, 33, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}


.mini-whats {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(37, 211, 102, .25);
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.mini-whats:hover {
  filter: brightness(1.05);
}

/* Mini-whats: transição de entrada/saída e oculto no HERO */
.mini-whats {
  transition: opacity .26s ease, transform .26s ease;
}

.mini-whats.is-hidden {
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
}

/* WhatsApp-themed CTA inside Serviços */
/* CTA padrão (Serviços): verde sólido Whats */
.sub-cta.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #25D366, #1ebe5d);
  color: #fff;
  border: 1px solid #1ebe5d;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .22);
  text-align: center;
  text-decoration: none;
}

.sub-cta.btn-modern:hover {
  transform: scale(1.04);
  color: #fff;
  background: linear-gradient(180deg, #25D366, #1ebe5d);
  border-color: #1ebe5d;
  box-shadow: 0 14px 28px rgba(37, 211, 102, .28);
}

.sub-cta.btn-modern:active {
  transform: scale(.98);
}

/* CTA do HERO: vidro translúcido somente no hero */
#hero .sub-cta.btn-modern {
  background: linear-gradient(180deg, rgba(37, 211, 102, .18), rgba(30, 190, 93, .10));
  color: #f2fff6;
  border: 1px solid rgba(37, 211, 102, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  /* sem neon por padrão no hero */
}

#hero .sub-cta.btn-modern:hover {
  transform: scale(1.05);
  color: #f2fff6;
  background: linear-gradient(180deg, rgba(37, 211, 102, .22), rgba(30, 190, 93, .14));
  border-color: rgba(37, 211, 102, .58);
  box-shadow: 0 14px 30px rgba(37, 211, 102, .24);
  /* neon só no hover no hero */
}

.sub-cta .bi-whatsapp {
  font-size: 1.1em;
  line-height: 0;
}

/* === PATCH v23 – Vinheta global mais forte (após-hero) === */
.after-hero-bg {
  background:
    /* topo mais escuro e profundo */
    radial-gradient(140% 120% at 50% -10%, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0) 62%),
    /* brilho central roxo (ligeiramente mais denso) */
    radial-gradient(130% 120% at 50% 30%, #6b21ff 0%, #4c14d6 38%, #2a0072 64%, #0e0a19 84%, #000 100%),
    /* cantos escurecidos mais presentes */
    radial-gradient(120% 120% at -10% -10%, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0) 65%),
    radial-gradient(120% 120% at 110% -10%, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0) 65%),
    radial-gradient(150% 150% at -12% 120%, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(120% 120% at 110% 110%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 65%) !important;
  background-attachment: fixed !important;
}

.after-hero-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .18) 74%, rgba(0, 0, 0, .28) 100%);
}

.bi {
  font-size: 1.05rem;
}

.service-card {
  overflow: hidden;
}

.service-toggle {
  all: unset;
  display: block;
  cursor: pointer;
  width: 100%;
}

.service-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
}

/* Fix: manter o quadradinho do ícone sempre quadrado e sem encolher no flex */
.service-header .icon-hex {
  flex: 0 0 48px;
  /* não encolhe e base fixa */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1 / 1;
  /* garante proporção 1:1 mesmo se algo tentar esticar */
}

.service-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.service-desc {
  margin: 2px 0 0;
  color: #cfd0d7;
}

.service-chevron {
  margin-left: auto;
  transition: transform .2s ease;
}

.service-card .service-toggle[aria-expanded="true"] .service-chevron {
  transform: rotate(180deg);
}

.service-body {
  border-top: 1px solid var(--border);
  padding: 12px 12px 18px;
}

.sub-accordion .sub-toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem .9rem;
  color: var(--clout-white);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}


.sub-accordion .collapse {
  /* Removido o traço vertical que aparecia ao expandir sub-accordions
     - manter espaçamento interno apenas via padding na sub-body quando necessário */
  border-left: none; /* antes: 2px solid rgba(167, 139, 250, .35) */
  margin-left: 0;
  padding-left: 0;
}

.sub-accordion .sub-body {
  color: #cfd0d7;
  padding: .6rem .2rem .2rem;
}

.nav-link {
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}


.mini-item:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(107, 33, 255, .18);
}

.mini-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(107, 33, 255, .28);
}

.mini-whats:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .35);
}

/* ===== Solutions Title Rotator ===== */
.solutions-anim {
  display: inline;
  white-space: nowrap;
}

.solutions-anim .prefix,
.solutions-anim .words,
.solutions-anim .word {
  font-size: 1em;
}

.solutions-anim .prefix {
  line-height: 1em;
}

.solutions-anim .prefix {
  margin-right: 0;
}

.solutions-anim .words {
  overflow: hidden;
  position: relative;
  height: 1em;
  /* lock to one text line */
  line-height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  /* nudge down to align with prefix baseline */
  /* no width tricks; let content size naturally */
}

/* soft clip to hide top/bottom during slide */
/* remove soft-clip overlay to avoid visible top/bottom shadows */
.solutions-anim .words::after {
  content: none;
}

.solutions-anim .word {
  display: block;
  height: 1em;
  line-height: 1em;
  padding-left: 0;
  color: var(--clout-accent);
  animation: solutions_spin 4s infinite;
  will-change: transform;
}

@keyframes solutions_spin {
  10% {
    transform: translateY(-102%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-202%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-302%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-402%);
  }

  100% {
    transform: translateY(-400%);
  }
}

/* Center the title block, keep text left to avoid inner gaps */
#servicos .section-title {
  text-align: left !important;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.sub-accordion .sub-toggle:hover {
  transform: translateX(2px);
}

/* Smoothen bootstrap collapse open/close */
.collapsing {
  transition: height .45s ease, opacity .45s ease;
  opacity: .75;
}

.collapse {
  transition: opacity .45s ease;
}

.collapse.show {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}



/* ====== NAVBAR — centered brand, left/right links, gradient text ====== */
.navbar .nav-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.navbar .left-links,
.navbar .right-links {
  display: flex;
  gap: 18px;
}

.navbar .brand-center {
  height: 54px;
  /* pedido do usuário */
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* glow sutil atrás da logo */
.navbar .navbar-brand {
  position: relative;
}

.navbar .navbar-brand::after {
  content: "";
  position: absolute;
  inset: 10% -30% -10% -30%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(107, 33, 255, .45), rgba(107, 33, 255, 0) 70%);
  filter: blur(24px);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .navbar .brand-center {
    height: 54px;
  }
}

/* links do header */
.navbar .nav-link {
  font-size: 1.3125rem;
  /* ~21px */
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease;
}

.nav-gradient {
  background: linear-gradient(90deg, var(--clout-main), #cbb9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* hover: sem mudar cor, zoom-in leve */
/* esconder offcanvas no desktop (força) */
@media (min-width: 992px) {
  .navbar .offcanvas {
    display: none !important;
  }
}


.navbar .nav-link {
  background: linear-gradient(90deg, #cbb9ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.3125rem;
  /* ~21px */
  transition: transform .2s ease;
}

.navbar .nav-link:hover {
  color: transparent;
  transform: scale(1.06);
}



/* === PATCH: Header logo 54px desktop, responsive; gradient links = "Sucesso"; hover fix & zoom-in === */
.navbar .brand-center {
  height: 54px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .navbar .brand-center {
    height: 46px;
  }
}

/* Gradient EXACTLY like .gradient-text ("Sucesso") */
/* Header links: branco sólido (sem gradient) */
.navbar .nav-link.nav-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 800;
  font-size: 1.3125rem;
  /* ~21px */
  letter-spacing: -.01em;
}

/* Prevent any hover state from turning text black */
.navbar .nav-link.nav-gradient:hover,
.navbar .nav-link.nav-gradient:focus,
.navbar .nav-link.nav-gradient:active {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* Replace hover motion with subtle zoom-in (no y-translate) */
.navbar .nav-link {
  transition: transform .15s ease;
}

.navbar .nav-link:hover {
  transform: scale(1.04);
}


/* ====== NAVBAR layout: center brand, groups close to logo ====== */
.navbar .nav-grid {
  display: grid;
  /* grid-template-columns: 1fr auto 1fr; */
  align-items: center;
  gap: 16px;
}

.navbar .left-links {
  justify-self: end;
}

.navbar .right-links {
  justify-self: start;
}

/* Brand size + subtle purple glow */
.navbar .brand-center {
  height: 54px;
  width: auto;
  object-fit: contain;
}

.navbar .brand-center-wrap {
  position: relative;
}

.navbar .brand-center-wrap::after {
  content: "";
  position: absolute;
  inset: -18px -28px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(107, 33, 255, .24), rgba(42, 0, 114, .0) 70%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .navbar .brand-center {
    height: 46px;
  }
}

/* Header links: same gradient as "Sucesso" and no color flip on hover */
.navbar .nav-link.nav-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 800;
  font-size: 1.3125rem;
}

/* Keep gradient on hover/focus/active */
.navbar .nav-link.nav-gradient:hover,
.navbar .nav-link.nav-gradient:focus,
.navbar .nav-link.nav-gradient:active {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* Zoom-in hover (no translateY) */
.navbar .nav-link {
  transition: transform .15s ease;
}

.navbar .nav-link:hover {
  transform: scale(1.04);
}

/* Offcanvas: hide on desktop; full viewport on mobile */
@media (min-width: 992px) {
  #navOffcanvas {
    display: none !important;
  }
}

#navOffcanvas.offcanvas {
  max-width: 82vw;
}


/* === PATCH v4 === */

/* Tamanho do logo (desktop) e responsivo */
.navbar .brand-center {
  height: 64px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .navbar .brand-center {
    height: 50px;
  }
}

/* Tamanho da fonte dos links do cabeçalho */
.navbar .nav-link,
.navbar .nav-link.nav-gradient {
  font-size: 1.1125rem;
}

/* Offcanvas no topo, cobrindo a tela e rolável */
.clout-offcanvas.offcanvas-top {
  height: 100vh;
  background: linear-gradient(180deg, rgba(9, 9, 15, .96), rgba(9, 9, 15, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: auto;
}

@media (min-width: 992px) {

  /* offcanvas totalmente oculto no desktop */
  #navOffcanvas {
    display: none !important;
  }
}

/* Mini menu dentro do offcanvas: vertical, abre pra baixo */
.mini-items-oc {
  align-items: stretch;
  gap: 12px;
  margin: 8px 0 12px;
}

.mini-items-oc .mini-item {
  width: 100%;
  justify-content: flex-start;
  padding: .8rem 1rem;
}

/* Hover dos links do cabeçalho mantém o degradê + zoom in */
.navbar .nav-link.nav-gradient,
.navbar .nav-link.nav-gradient:hover,
.navbar .nav-link.nav-gradient:focus,
.navbar .nav-link.nav-gradient:active {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.navbar .nav-link {
  transition: transform .15s ease;
}

.navbar .nav-link:hover {
  transform: scale(1.04);
}

/* Margem de segurança responsiva abaixo do header fixo */
body {
  padding-top: calc(var(--header-h) + clamp(6px, 1.8vw, 16px));
}


/* === FIX v6: Offcanvas igual ao mini menu + margem de segurança só no conteúdo === */

/* Zera qualquer padding-top global que possa existir */
body {
  padding-top: 0 !important;
}

/* Offcanvas TOP ocupando a tela inteira e rolável */
.clout-offcanvas.offcanvas-top {
  height: 100vh;
  background: linear-gradient(180deg, rgba(9, 9, 15, .96), rgba(9, 9, 15, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: auto;
}

/* Esconde o offcanvas no desktop */
@media (min-width: 992px) {
  #navOffcanvas {
    display: none !important;
  }
}

/* Mini menu transplantado para dentro do offcanvas */
.mini-items-oc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.mini-items-oc .mini-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-content: flex-start;
  padding: .9rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(107, 33, 255, .25), rgba(42, 0, 114, .35));
  color: var(--clout-white);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mini-items-oc .mini-item:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(107, 33, 255, .18);
}

/* Margem de segurança (50% da anterior) aplicada só no container de conteúdo do HERO */
#hero>.container {
  padding-top: calc(var(--header-h) + clamp(3px, 0.9vw, 8px));
}


/* === FIX PATCH v7: header gradient, sizes, offcanvas = mini menu, safe spacing === */

/* Logo size */
.navbar .brand-center {
  height: 64px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .navbar .brand-center {
    height: 50px;
  }
}

/* Header link font + gradient exactly like "Sucesso" */
.navbar .nav-link,
.navbar .nav-link.nav-gradient {
  font-size: 1.1125rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.navbar .nav-link.nav-gradient,
.navbar .nav-link.nav-gradient:hover,
.navbar .nav-link.nav-gradient:focus,
.navbar .nav-link.nav-gradient:active {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.navbar .nav-link {
  transition: transform .15s ease;
}

.navbar .nav-link:hover {
  transform: scale(1.04);
}

/* Offcanvas TOP full height and hidden on desktop */
.clout-offcanvas.offcanvas-top {
  height: 100vh;
  background: linear-gradient(180deg, rgba(9, 9, 15, .96), rgba(9, 9, 15, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: auto;
}

@media (min-width: 992px) {
  #navOffcanvas {
    display: none !important;
  }
}

/* Mini menu styling INSIDE offcanvas */
.clout-offcanvas .mini-items-oc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.clout-offcanvas .mini-items-oc .mini-item {
  width: 100%;
  justify-content: flex-start;
  padding: .9rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(107, 33, 255, .25), rgba(42, 0, 114, .35));
  color: var(--clout-white);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.clout-offcanvas .mini-items-oc .mini-item:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(107, 33, 255, .18);
}

/* Remove any global body top padding and apply "safe margin" only to the hero content */
body {
  padding-top: 0 !important;
}

#hero>.container {
  padding-top: calc(var(--header-h) + clamp(3px, 0.9vw, 8px));
}


/* === OFFCANVAS MINI MENU & SAFE SPACING (v8) === */

/* Reset any global padding-top on body */
body {
  padding-top: 0 !important;
}

/* Offcanvas at top, full height */
.clout-offcanvas.offcanvas-top {
  height: 100vh;
  background: linear-gradient(180deg, rgba(9, 9, 15, .96), rgba(9, 9, 15, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  overflow: auto;
}

@media (min-width: 992px) {
  #navOffcanvas {
    display: none !important;
  }

  /* never on desktop */
}

/* Use the same capsule style from mini menu inside offcanvas */
.clout-offcanvas .mini-items-oc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.clout-offcanvas .mini-items-oc .mini-item {
  width: 100%;
  justify-content: flex-start;
  padding: .9rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(107, 33, 255, .25), rgba(42, 0, 114, .35));
  color: var(--clout-white);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.clout-offcanvas .mini-items-oc .mini-item:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(107, 33, 255, .18);
}

/* Only pad the foreground content inside HERO (50% of previous) */
#hero>.container {
  padding-top: calc(var(--header-h) + clamp(3px, 0.9vw, 8px));
}



/* === PATCH v9: Offcanvas menu - keep labels, bigger side margins, equal width pills centered === */

/* Always show labels inside offcanvas, even on small screens */
.clout-offcanvas .mini-item .label {
  display: inline !important;
}

/* Increase side margins/padding inside offcanvas (≈10–20% more visual space) */
.clout-offcanvas .offcanvas-body {
  padding-left: clamp(24px, 6vw, 64px);
  padding-right: clamp(24px, 6vw, 64px);
}

/* Stack centered; buttons not full width by default */
.clout-offcanvas .mini-items-oc {
  align-items: center;
}

/* Pills auto-width; center content */
.clout-offcanvas .mini-items-oc .mini-item {
  width: auto;
  /* not 100% */
  align-self: center;
  justify-content: center;
  /* center icon + label */
  padding: .95rem 1.25rem;
  text-align: center;
}

/* When JS sets --oc-pill-w, use it for consistent width across items */
.clout-offcanvas .mini-items-oc {
  --oc-pill-w: auto;
}

.clout-offcanvas .mini-items-oc .mini-item {
  width: var(--oc-pill-w);
  max-width: 100%;
}


/* === PATCH v12 — Hero safe margin DESKTOP only === */
@media (min-width: 992px) {

  /* Mais respiro na lateral direita da coluna de texto (linha azul da sua print) */
  #hero .hero-safe {
    padding-inline-end: clamp(32px, 6vw, 120px);
  }

  /* Opcional: segura um pouco a largura do parágrafo para equilibrar com o card */
  #hero .hero-lead {
    max-width: 62ch;
  }
}


/* === PATCH v12 — HERO desktop safe margin between text and card === */
@media (min-width: 992px) {

  /* aumenta o espaço horizontal entre as colunas do HERO (texto × card) */
  #hero .row.align-items-center {
    --bs-gutter-x: clamp(28px, 4.8vw, 80px);
  }

  /* respiro extra só na coluna de texto (lado direito da coluna) */
  #hero .hero-safe {
    padding-right: clamp(12px, 2vw, 24px);
  }
}


/* === PATCH v13 — Glow roxo sutil no card "Serviço em destaque" do HERO === */
#hero .card-hero-glow {
  position: relative;
  /* brilho externo suave */
  filter: drop-shadow(0 0 22px rgba(107, 33, 255, .22)) drop-shadow(0 0 60px rgba(107, 33, 255, .12));
  border-color: rgba(167, 139, 250, .45);
}

#hero .card-hero-glow::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 24px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(107, 33, 255, .22), rgba(107, 33, 255, 0) 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}


/* === PATCH v14 — Glow apenas nas bordas do card "Serviço em destaque" === */
#hero .card-hero-glow {
  /* remove os drop-shadows gerais do patch anterior e foca na borda */
  filter: none;
  border-color: rgba(167, 139, 250, .55);
  position: relative;
  box-shadow: inset 0 0 18px rgba(107, 33, 255, .18);
  /* brilho interno suave só nas bordas */
}

#hero .card-hero-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  /* criamos um "anel" luminoso roxo apenas nas bordas usando máscara */
  background: radial-gradient(100% 100% at 50% 50%, rgba(107, 33, 255, .35), rgba(107, 33, 255, 0) 60%);
  padding: 10px;
  /* espessura do anel (ajustável) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}


/* === PATCH v15 — Mini menu: pop-in suave + revelação em cascata === */
/* Container: em vez de display:none -> usamos visibilidade/opacidade para animar a entrada */
.mini-menu {
  display: block !important;
  /* sobrepõe o display:none antigo */
  opacity: 0;

  transform: translateY(8px) scale(.96);
  transition: opacity .22s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.mini-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Itens: revelação em cascata quando o menu é aberto */
.mini-menu .mini-items a {
  transition: opacity .22s ease, transform .22s ease;
}

.mini-menu.open .mini-items a:nth-child(1) {
  transition-delay: 0ms;
}

.mini-menu.open .mini-items a:nth-child(2) {
  transition-delay: 40ms;
}

.mini-menu.open .mini-items a:nth-child(3) {
  transition-delay: 80ms;
}

.mini-menu.open .mini-items a:nth-child(4) {
  transition-delay: 120ms;
}

.mini-menu.open .mini-items a:nth-child(5) {
  transition-delay: 160ms;
}

.mini-menu.open .mini-items a:nth-child(6) {
  transition-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .mini-menu {
    transition: none !important;
  }

  .mini-menu .mini-items a {
    transition: none !important;
  }
}


/* === PATCH v16 — Mini menu: pop-in/out mais demorado + cascata na saída === */
/* Container: usa opacity/transform + pointer-events (sem visibility) para permitir animação de saída */
.mini-menu {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.94);
  transition: opacity .42s ease, transform .46s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.mini-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Itens: cascata na entrada e na saída */
.mini-menu .mini-items a {
  transition: opacity .34s ease, transform .34s ease;
}

/* Entrada (menu aberto) */
.mini-menu.open .mini-items a:nth-child(1) {
  transition-delay: 0ms;
}

.mini-menu.open .mini-items a:nth-child(2) {
  transition-delay: 60ms;
}

.mini-menu.open .mini-items a:nth-child(3) {
  transition-delay: 120ms;
}

.mini-menu.open .mini-items a:nth-child(4) {
  transition-delay: 180ms;
}

.mini-menu.open .mini-items a:nth-child(5) {
  transition-delay: 240ms;
}

.mini-menu.open .mini-items a:nth-child(6) {
  transition-delay: 300ms;
}

/* Saída (classe .closing aplica delays invertidos) */
.mini-menu.closing .mini-items a:nth-child(1) {
  transition-delay: 300ms;
}

.mini-menu.closing .mini-items a:nth-child(2) {
  transition-delay: 240ms;
}

.mini-menu.closing .mini-items a:nth-child(3) {
  transition-delay: 180ms;
}

.mini-menu.closing .mini-items a:nth-child(4) {
  transition-delay: 120ms;
}

.mini-menu.closing .mini-items a:nth-child(5) {
  transition-delay: 60ms;
}

.mini-menu.closing .mini-items a:nth-child(6) {
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .mini-menu {
    transition: none !important;
  }

  .mini-menu .mini-items a {
    transition: none !important;
  }
}


/* === PATCH v17 — "Serviços" com box de fundo + partículas 3D e glow nas bordas === */
#servicos .services-astro {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(18px, 3.2vw, 28px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
}

#servicos .services-astro::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: radial-gradient(90% 90% at 50% 50%, rgba(107, 33, 255, .35), rgba(107, 33, 255, 0) 60%);
  padding: 10px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

#servicos .services-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#servicos .services-content {
  position: relative;
  z-index: 1;
}


/* === PATCH v18 — Serviços: aquário centrado, sem transparência + margens internas e título central === */
#servicos .services-astro {
  /* largura controlada: menor que a tela e centralizada */
  --services-box-w: min(1100px, 92vw);
  width: var(--services-box-w);
  max-width: var(--services-box-w);
  margin-inline: auto;
  background: transparent;
  /* só o canvas aparece, sem "cartão" translúcido */
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
}

#servicos .services-astro::after {
  /* mantém o glow apenas nas bordas */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  background: radial-gradient(90% 90% at 50% 50%, rgba(107, 33, 255, .35), rgba(107, 33, 255, 0) 60%);
  padding: 10px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

#servicos .services-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#servicos .services-content {
  position: relative;
  z-index: 1;
  /* margem de respiro generosa para textos e cards */
  padding: clamp(24px, 4vw, 56px);
}

#servicos .section-title {
  text-align: center;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}


/* === PATCH v17-width-only — limitar largura do aquário de Serviços === */
#servicos .services-astro {
  width: min(1100px, 92vw);
  margin-inline: auto;
  max-width: 100%;
}

/* v17 revert: manter fundo do box como no v17 (sem forçar transparente) e título padrão à esquerda */
#servicos .services-astro {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
}

#servicos .section-title {
  text-align: left;
}


/* === PATCH v17-align — largura do aquário igual à .container mais próxima === */
#servicos .services-astro {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}


/* === PATCH v19 — Serviços alinhado à container: box dentro da .container, 100% da largura da .container === */
#servicos .services-astro {
  width: 100%;
  margin-inline: 0;
}

#servicos .services-content {
  padding: clamp(24px, 4vw, 56px);
}


/* === PATCH v20 – Serviços: fundo do aquário 100% transparente (só partículas) === */
#servicos .services-astro {
  background: transparent !important;
  /* remove o "cinza" interno */
}

#servicos .services-content {
  background: transparent !important;
  /* garante que nada dentro pinta o fundo do box */
}

/* mantém borda e glow via ::after já existentes */


/* === PATCH v22 – Serviços: fundo sólido roxo escuro mantendo a galáxia === */
#servicos .services-astro {
  /* Base sólida para o canvas transparente de galáxia */
  background: #1a0b3a !important;
  /* roxo mais claro */
}

/* === PATCH v22d – Serviços: remover galáxia quando desabilitada === */
#servicos .services-astro[data-galaxy="off"] .services-canvas {
  display: none !important;
}

/* === PATCH v21 — Mosaic cinético (repulsão ao mouse) & "fugir do quadrado" === */
#sobre .card-glass {
  overflow: visible;
}

/* permite que os tiles passem da borda do card */
.mosaic-kinetic {
  position: relative;
  margin-top: -12px;
  overflow: visible;
}

.mosaic-kinetic .msq {
  will-change: transform;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}

/* estado de repouso levemente acima/livre */
.mosaic-kinetic .msq[data-base] {
  transform: translate3d(var(--kx, 0), calc(-6px + var(--ky, 0)), 0);
}

/* em telas muito pequenas, suaviza o efeito */
@media (max-width: 480px) {
  .mosaic-kinetic {
    margin-top: -6px;
  }

  .mosaic-kinetic .msq[data-base] {
    transform: translate3d(var(--kx, 0), calc(-3px + var(--ky, 0)), 0);
  }
}


/* Reels hover effect */
.reel {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.reel:hover {
  transform: translateY(-4px);
  /* remove glow roxo; usar sombra neutra discreta */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}


/* Reel anchor wrapper: card inteiro clicável */
.reel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
}

.reel-link:hover .reel {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}


/* Duo title (line 2 in Playfair Display italic) */
.duo-sub {
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
  margin: -0.25rem 0 0.75rem 0;
  font-size: clamp(1.15rem, 1.5vw + .6rem, 1.75rem);
  margin-bottom: 4%;
}

/* Section subtitles: match .display-6 size (except hero) */
#servicos .section-title.display-6+.duo-sub,
#pacotes .section-title.display-6+.duo-sub,
#projetos .section-title.display-6+.duo-sub {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {

  #servicos .section-title.display-6+.duo-sub,
  #pacotes .section-title.display-6+.duo-sub,
  #projetos .section-title.display-6+.duo-sub {
    font-size: 2.5rem;
  }
}

#servicos .duo-sub,
#projetos .duo-sub {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

#sobre .duo-sub {
  margin-bottom: .75rem;
}

#contato .duo-sub {
  color: rgba(255, 255, 255, .88);
  margin-bottom: .25rem;
}


/* Centered section headings + tighter stack */
#hero h1,
#hero .duo-sub,
#hero .sub {
  text-align: center;
}

#servicos .section-title,
#servicos .duo-sub,
#servicos .sub,
#sobre .section-title,
#sobre .duo-sub,
#sobre .sub,
#projetos .section-title,
#projetos .duo-sub,
#projetos .sub,
#contato .section-title,
#contato .duo-sub,
#contato .sub {
  text-align: center;
}

/* Size: keep hero as-is; unify sections' title size */
#servicos .section-title,
#sobre .section-title,
#projetos .section-title,
#contato .section-title {
  font-size: clamp(1.8rem, 2.2vw + .6rem, 2.35rem);
}

/* Duo-sub spacing: closer to the main title on sections */
#servicos .duo-sub,
#sobre .duo-sub,
#projetos .duo-sub,
#contato .duo-sub {
  margin-top: .15rem;
  margin-bottom: .45rem;
  font-size: clamp(1.1rem, 1.1vw + .7rem, 1.55rem);
}

/* The supporting paragraph right under the italic line */
.duo-sub+.sub {
  margin-top: .25rem;
}


/* === Duo titles adjustments (user refinement) === */
/* Revert hero & contact alignment; center ONLY Serviços, Sobre, Projetos */
#hero h1,
#hero .duo-sub,
#hero .sub {
  text-align: left;
}

#contato .section-title,
#contato .duo-sub,
#contato .sub {
  text-align: left;
}

#servicos .section-title,
#servicos .duo-sub {
  text-align: center;
}

#sobre .section-title,
#sobre .duo-sub {
  text-align: center;
}

#projetos .section-title,
#projetos .duo-sub {
  text-align: center;
}

/* Ensure supporting paragraphs stay left in sections (if alguma regra anterior centralizou) */
#servicos .sub,
#sobre .sub,
#projetos .sub {
  text-align: left;
}

/* Make the italic line visually comparable to the title size in sections */
#servicos .duo-sub,
#sobre .duo-sub,
#projetos .duo-sub {
  font-size: clamp(1.8rem, 2.2vw + .6rem, 2.35rem);
  margin-top: .15rem;
  margin-bottom: .45rem;
}

/* Hero: increase italic + give a light bottom spacing */
#hero .duo-sub {
  font-size: clamp(1.45rem, 2.2vw + .5rem, 2.4rem);
  margin-bottom: .75rem;
}

/* Contato: give a light bottom spacing to the italic line */
#contato .duo-sub {
  margin-bottom: .75rem;
}


/* === Duo titles adjustments v4 (revert size + tighter stack) === */
/* Revert italic size to the original base and bring it closer to the main title */
#servicos .duo-sub,
#sobre .duo-sub,
#projetos .duo-sub {
  font-size: clamp(1.15rem, 1.5vw + .6rem, 1.75rem);
  margin-top: -0.20rem;
  /* aproxima do título */
  margin-bottom: .35rem;
  /* leve respiro antes do parágrafo */
}

/* Hero italic back to base size, keep light bottom spacing */
#hero .duo-sub {
  font-size: clamp(1.15rem, 1.5vw + .6rem, 1.75rem);
  margin-bottom: .75rem;
}

/* PATCH v18 — Hero spacing: double space under the italic line */
#hero .duo-sub {
  margin-bottom: 1.5rem !important;
}

#hero .duo-sub+.hero-lead {
  margin-top: 0 !important;
}

/* helpers to replace inline styles */
.btn-no-bg {
  background: transparent !important;
}

.link-main {
  color: var(--clout-main) !important;
}

/* === PATCH v28 — Serviços: reduzir espaço entre título e linha itálica (≈metade) === */
#servicos .section-title+.duo-sub {
  margin-top: -0.45rem !important;
}

/* Sub-accordions: chevron indicator */
.sub-accordion .sub-toggle .sub-chevron {
  margin-left: .5rem;
  transition: transform .2s ease;
}

.sub-accordion .sub-toggle[aria-expanded="true"] .sub-chevron {
  transform: rotate(180deg);
}

/* Sub-CTA button inside service details */
.sub-accordion .sub-body .sub-cta {
  padding-inline: .9rem;
  border-radius: 12px;
}


/* === PATCH v31 — Serviços: título mais colado e 1 aberto por vez (inclui sub-itens) === */
#servicos .section-title+.duo-sub {
  margin-top: -1.7rem !important;
}


/* ================== PACOTES E PRAZOS (v1.2) ================== */
.pkg-grid {
  --pkg-media-w: min(39%, 460px);
  /* Fix text column width on desktop so content doesn't widen */
  --pkg-text-w: 240px;
  --pkg-safe-gap: clamp(80px, 9.5vw, 140px);
  --pkg-closed-lines: 4;
  /* linhas visíveis com card fechado */
  display: flex;
  gap: clamp(16px, 2vw, 24px);
}

.pkg-card {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(360px, 38vw, 460px);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(149, 106, 250, .10) 0%, rgba(40, 40, 60, .18) 35%, rgba(15, 15, 25, .5) 65%),
    linear-gradient(0deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
  border: 1px solid rgba(149, 106, 250, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  overflow: hidden;
  transition: flex .35s ease, border-color .2s ease;
}

/* Mobile: todos os cards sempre "abertos" (sem animação de expansão) */
@media (max-width: 991.98px) {
  #pacotes .pkg-card { flex: 1 1 auto !important; transition: none !important; }
  #pacotes .pkg-card.is-active { flex: 1 1 auto !important; }
  #pacotes .pkg-card .pkg-media { display: block !important; width: 100% !important; opacity: 1 !important; position: relative; inset: 0; }
  #pacotes .pkg-card .pkg-body { padding-right: clamp(18px, 2.4vw, 26px) !important; }
  #pacotes .pkg-card .pkg-media { box-shadow: none; outline: none; }
  /* Remove necessidade de hover para mudar borda */
  #pacotes .pkg-card:hover { border-color: rgba(149, 106, 250, .22) !important; }
}

.pkg-card:hover {
  border-color: rgba(149, 106, 250, .45);
}

.pkg-card.is-active {
  flex: 2.1;
}

.pkg-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* keep inner blocks from stretching */
  padding: clamp(18px, 2.4vw, 26px);
  padding-right: clamp(18px, 2.4vw, 26px);
  width: 100%;
}

/* Keep text block width stable even when card expands */
.pkg-body>.pkg-head,
.pkg-body>.pkg-text,
.pkg-body>.pkg-list,
.pkg-body>.cta-kenny {
  flex: 0 0 auto;
}

.pkg-card.is-active .pkg-body {
  padding-right: calc(var(--pkg-media-w) + var(--pkg-safe-gap));
}

.pkg-head {
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.pkg-head .thin {
  font-weight: 400;
  letter-spacing: .2px;
}

.pkg-meta {
  margin: 6px 0 0;
  color: var(--clout-muted, #a7a7b3);
  font-size: .95rem;
}

.pkg-text {
  text-align: justify;
  hyphens: auto;
}

.pkg-list {
  margin: 14px 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
}

/* Área de mídia (desktop) */
.pkg-media {
  position: absolute;
  top: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  bottom: clamp(12px, 1.6vw, 18px);
  width: 0;
  opacity: 0;
  display: none;
  border-radius: 16px;
  /* Volta a preencher totalmente (evita bordas brancas do contain) */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* revertido de contain */
  background-color: #111;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .36);
  transition: none;
}

.pkg-card.is-active .pkg-media {
  display: block;
  width: var(--pkg-media-w);
  opacity: 1;
  outline: 1px solid rgba(149, 106, 250, .28);
}

/* Imagem que "escapa" do contêiner da mídia */
.pkg-media {
  overflow: visible;
}

.pkg-media .pkg-over {
  position: absolute;
  bottom: 0;
  left: 50%; /* ancora no centro do contêiner */
  right: auto;
  margin: 0;
  width: min(96%, 440px);
  height: auto;
  /* Variável controla o quanto a imagem sobe (negativo = sobe). Ajuste se quiser mais/menos. */
  --pkg-over-shift-y: -30%; /* aumentado ~30% para subir mais o conteúdo visível */
  transform: translate(-50%, var(--pkg-over-shift-y));
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .45));
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .pkg-media .pkg-over {
    width: min(100%, 380px);
    left: 50%;
    transform: translate(-50%, 0);
  }
}

/* Mobile: permitir que as imagens "da frente" (pkg-over) extravasem o card sem serem cortadas */
@media (max-width: 991.98px) {
  #pacotes .pkg-card {
    overflow: visible; /* antes hidden: libera a parte que sai pra fora */
  }
  #pacotes .pkg-card .pkg-media {
    /* Mobile: o fundo deve ficar totalmente DENTRO do card, alinhado sem “escapar” à direita.
       Em vez de deslocar o background dentro do contêiner, ajustamos o próprio contêiner. */
    position: relative; /* deixa de ser absoluto para ocupar fluxo no topo do card */
    inset: 0; /* remove offsets top/right/bottom herdados */
    margin: 0;
    width: 100% !important; /* ocupa toda a largura interna do card */
    height: auto;
  /* Aumenta a altura relativa para mostrar mais do enquadramento vertical */
  aspect-ratio: 16/7.5; /* antes 16/6 */
    border-radius: inherit;
    /* Em vez de overflow hidden (que cortava a figura frontal), usamos pseudo-elemento para o fundo */
    overflow: visible !important; /* permite que .pkg-over ultrapasse */
    z-index: 1; /* base para pseudo-elemento + overlay */
  /* Mantém fallback sólido; imagem também pode ser aplicada diretamente via JS */
  /* Removido fallback roxo para manter a imagem totalmente fiel; usa transparente caso a imagem demore a carregar */
  background: transparent; 
  }
  #pacotes .pkg-card .pkg-media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  /* Preenche sem bordas para evitar áreas brancas (cover) */
  background: var(--pkg-bg) center/cover no-repeat;
    box-shadow: none;
    z-index: 0;
    display: block;
    pointer-events: none;
  }
  /* Centraliza todas as imagens sobrepostas, ignorando offsets de desktop */
  #pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over,
  #pacotes .pkg-grid>.pkg-card:nth-child(2) .pkg-over,
  #pacotes .pkg-grid>.pkg-card:nth-child(3) .pkg-over {
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    width: 60% !important; /* aumentado um pouco (antes 50%) */
    max-width: 260px !important; /* acompanha aumento proporcional */
    z-index: 2; /* acima do pseudo-elemento do fundo */
  }
  /* Caso ainda veja corte na borda inferior, descomente a linha abaixo para aumentar a área vertical */
  /* #pacotes .pkg-card .pkg-media { bottom: -32px; } */
}

/* Específicos: aumentar um pouco as imagens 2 e 3 */
#pacotes .pkg-grid>.pkg-card:nth-child(2) .pkg-over {
  width: min(132%, 640px);
  transform: translateX(-28%);
}

#pacotes .pkg-grid>.pkg-card:nth-child(3) .pkg-over {
  /* Aumentado +20% (antes: 82% / 403px) */
  width: min(98%, 484px);
  /* Mantém leve compensação horizontal */
  transform: translateX(-12%);
}

#pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over {
  /* +10% (antes 108% / 500px) */
#pacotes .pkg-grid>.pkg-card:nth-child(2) .pkg-over {
  width: min(132%, 640px); /* mantém escala maior */
  transform: translate(-50%, var(--pkg-over-shift-y));
}
#pacotes .pkg-grid>.pkg-card:nth-child(3) .pkg-over {
  width: min(98%, 484px);
  transform: translate(-50%, var(--pkg-over-shift-y));
}
#pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over {
  width: min(118%, 550px);
  transform: translate(-50%, var(--pkg-over-shift-y));
}

/* =============================================
   Desktop: restaurar posicionamentos originais
   (remove centralização absoluta e o shift vertical)
   ============================================= */
@media (min-width: 992px) {
  /* Zera o deslocamento vertical no desktop */
  #pacotes .pkg-grid>.pkg-card .pkg-over { --pkg-over-shift-y: 0; }

  /* Volta a âncora para a borda esquerda para permitir offsets percentuais simples */
  #pacotes .pkg-grid>.pkg-card .pkg-over {
    left: 0;
    transform: none; /* será redefinido por card específico */
  }

  /* Offsets horizontais específicos (versão anterior) */
  #pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over { transform: translateX(-6%); }
  #pacotes .pkg-grid>.pkg-card:nth-child(2) .pkg-over { transform: translateX(-28%); }
  #pacotes .pkg-grid>.pkg-card:nth-child(3) .pkg-over { transform: translateX(-12%); }
}
  font-size: clamp(18px, 6vw, 22px);
}

#pacotes .pkg-text {
  text-align: left;
  font-size: clamp(14px, 3.8vw, 16px);
  hyphens: none;
}

#pacotes .pkg-meta {
  font-size: .85rem;
}

#pacotes .pkg-title .pkg-kicker,
#pacotes .pkg-title .pkg-sub {
  display: block;
}

#pacotes .pkg-title .pkg-kicker {
  margin-bottom: 2px;
}

/* Pacotes: sempre mostrar o texto por inteiro (sem clamp) */
#pacotes .pkg-text {
  display: block;
  overflow: visible;
}

.cta-kenny .card {
  --bg-color: #151421;
  background-color: var(--bg-color);
  padding: .9rem 1.2rem;
  border-radius: 1rem;
}

.cta-kenny .loader {
  color: #c7b8ff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 600;
  font-size: 18px;
  height: 38px;
  padding: 6px 8px;
  display: flex;
  border-radius: 8px;
  letter-spacing: .2px;
}

.cta-kenny .words {
  overflow: hidden;
  position: relative;
}

.cta-kenny .words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--bg-color) 10%, transparent 30%, transparent 70%, var(--bg-color) 90%);
  z-index: 20;
}

.cta-kenny .word {
  display: block;
  height: 100%;
  padding-left: 8px;
  color: #a78bfa;
  animation: spin_cta 7.5s infinite;
}

@keyframes spin_cta {
  10% {
    transform: translateY(-102%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-202%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-302%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-402%);
  }

  100% {
    transform: translateY(-400%);
  }
}

/* === Global spacing for italic subtitles === */
/* Ensure every .duo-sub has 4% bottom margin, everywhere */
.duo-sub {
  margin-bottom: 4% !important;
}

/* Include hero specifically to override previous important rule */
#hero .duo-sub {
  margin-bottom: 4% !important;
}

.cta-kenny {
  display: inline-block;
  margin-top: clamp(16px, 2vw, 22px);
  text-decoration: none;
}

@media (max-width: 991px) {
  .pkg-grid {
    flex-direction: column;
    gap: 0; /* vamos controlar o espaçamento manualmente para considerar o overflow das imagens */
  }
  /* Espaço extra acima do primeiro card para afastar dos títulos */
  #pacotes .pkg-grid > .pkg-card:first-child {
    margin-top: clamp(48px, 14vw, 120px);
  }
  /* Espaço real entre cards (após o primeiro) bem maior, evitando que a imagem do próximo encoste no card anterior */
  #pacotes .pkg-grid > .pkg-card + .pkg-card {
    margin-top: clamp(80px, 18vw, 200px); /* ajuste: aumente ou reduza conforme necessário */
  }

  .pkg-card {
    /* Altura maior para dar mais presença a cada card no mobile */
    min-height: 440px;
    /* Se quiser totalmente fluido: use min(520px, 90vh) */
  }

  .pkg-card.is-active {
    flex: 1;
  }

  .pkg-card.is-active .pkg-body {
    padding-right: clamp(18px, 2.4vw, 26px);
  }

  .pkg-media {
    position: relative;
    width: 100% !important;
    /* Faixa de mídia um pouco mais alta para equilibrar a nova altura total */
    height: clamp(180px, 48vw, 260px);
    max-height: 300px;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    margin: 0 clamp(12px, 2vw, 16px) clamp(12px, 2vw, 18px);
  }

  /* Ajusta distância do texto após a faixa da mídia se estiver muito colado */
  .pkg-card .pkg-body { margin-top: 4px; }

  /* On mobile, let the text take full width */
  .pkg-body>.pkg-head,
  .pkg-body>.pkg-text,
  .pkg-body>.pkg-list,
  .pkg-body>.cta-kenny {
    width: 100%;
  }
}

/* On desktop, force a fixed text column width */
@media (min-width: 992px) {

  #pacotes .pkg-body>.pkg-head,
  #pacotes .pkg-body>.pkg-text,
  #pacotes .pkg-body>.pkg-list,
  #pacotes .pkg-body>.cta-kenny {
    width: var(--pkg-text-w);
  }

  /* Lock layout: text stays in a fixed column; media occupies the right side space */
  #pacotes .pkg-body {
    display: grid;
    grid-template-columns: var(--pkg-text-w) 1fr;
    /* rows: title | meta | spacer | text | CTA */
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    align-content: stretch;
    row-gap: clamp(6px, 1vh, 12px);
  }

  /* place all primary content into column 1 */
  #pacotes .pkg-body>* {
    grid-column: 1;
  }

  /* let title and meta participate directly in parent grid */
  #pacotes .pkg-head {
    display: contents;
    margin: 0;
  }

  #pacotes .pkg-head .thin {
    grid-row: 1;
  }

  #pacotes .pkg-meta {
    grid-row: 2;
    align-self: start;
    margin: 4px 0 0;
  }

  /* by default (fechado), o texto fica embaixo, antes do CTA */
  #pacotes .pkg-text {
    grid-row: 4;
  }

  #pacotes .cta-kenny {
    grid-row: 5;
    margin-top: 0;
    align-self: start;
  }

  /* quando ativo, o texto sobe e o prazo desce acima do CTA */
  #pacotes .pkg-card.is-active .pkg-text {
    grid-row: 2;
  }

  #pacotes .pkg-card.is-active .pkg-meta {
    grid-row: 4;
  }

  /* Open state spacing and alignment */
  #pacotes .pkg-card.is-active .pkg-text {
    margin-bottom: clamp(20px, 2vw, 28px);
  }

  #pacotes .pkg-card.is-active .pkg-meta {
    margin-bottom: clamp(8px, 1.2vw, 14px);
    transform: translate(clamp(-32px, -2.4vw, -16px), -2px);
    justify-self: center;
    text-align: center;
  }

  #pacotes .pkg-card.is-active .cta-kenny {
    justify-self: center;
  }

  /* Visual tweaks inspired by the reference design */
  #pacotes .pkg-card {
    border-radius: 22px;
  }

  #pacotes .pkg-media {
    top: clamp(6px, 1vw, 12px);
    right: clamp(6px, 1vw, 12px);
    bottom: clamp(6px, 1vw, 12px);
    border-radius: 18px;
    /* ligeiramente diferente do card */
  }

  #pacotes .pkg-head {
    margin-top: clamp(12px, 1.6vh, 18px);
  }

  #pacotes .pkg-head .thin {
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.15;
    font-weight: 600;
  }

  #pacotes .pkg-meta {
    font-size: .85rem;
    margin-top: 4px;
  }

  #pacotes .pkg-text {
    text-align: left;
    font-size: clamp(14px, 1.0vw, 16px);
    line-height: 1.35;
    hyphens: manual;
  }

  /* Tamanhos diferentes por estado (desktop) */
  #pacotes .pkg-card.is-active {
    --pkg-text-w: 260px;
  }

  #pacotes .pkg-card:not(.is-active) {
    --pkg-text-w: 210px;
  }

  /* tamanho do texto permanece igual; apenas margens/coluna variam por estado */
}

/* ================== /PACOTES E PRAZOS ================== */

/* Animated CTA Button for Pacotes e Prazos */
#pacotes .pkg-card {
  /* PATCH v22b – mesmo fundo do bloco “Soluções”, sem galáxia */
  background: #1a0b3a !important;
  /* roxo mais claro */
}

/* PATCH v22c – Aplicar mesmo fundo em "Soluções" (cards) e "Projetos" (blocos) */
#servicos .card-glass.service-card {
  background: #1a0b3a !important;
}

#projetos .card-glass {
  background: #1a0b3a !important;
}

/* Projetos: redesign com seta (em vez de botão) */
#projetos .project-card {
  position: relative;
  border: none;
  border-radius: 28px;
  /* mais arredondado, como o modelo */
  overflow: visible;
  box-shadow: none;
}

#projetos .project-card .work-thumb {
  border-radius: 16px;
  /* cantos internos mais sutis */
  overflow: hidden;
  border: none;
  background-color: #04060d;
}

#projetos .project-card .work-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#projetos .project-card .pro-body,
#projetos .project-card>.p-3 {
  padding-bottom: 24px;
}

#projetos .project-card .pro-body h5 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
}

#projetos .project-card .pro-desc {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.45;
  color: #cfd0d7;
  display: block;
}

#projetos .project-card .p-3>p.small.sub.mb-2:not(.pro-desc) {
  display: none;
}

/* ===== Projetos: carrossel (descrição + imagem + logos) ===== */
.projetos-carousel .proj-info h5 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
}


.proj-logos {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(10px, 2.4vw, 32px);
  width: 100%;
  margin-top: clamp(16px, 2.6vw, 36px);
  padding: clamp(14px, 2.4vw, 24px) 0 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.proj-logos::-webkit-scrollbar { height: 0; }

.proj-logo-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 5px, transparent 5px 10px);
  pointer-events: none;
  overflow: hidden;
}

.proj-logo-indicator,
.proj-logo-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: transparent;
  transform: translateX(0);
  pointer-events: none;
  z-index: 1;
}

.proj-logo-indicator {
  opacity: .9;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

.proj-logo-indicator.is-muted { opacity: .2; }

.proj-logo-progress {
  opacity: 1;
  transform-origin: left center;
  transform: translateX(var(--proj-progress-x, 0px)) scaleX(0);
  z-index: 2;
}

.proj-logo-progress.is-animating {
  animation: projLogoFill var(--proj-progress-duration, 6500ms) linear forwards;
  animation-delay: var(--proj-progress-delay, .5s);
}

@keyframes projLogoFill {
  from { transform: translateX(var(--proj-progress-x, 0px)) scaleX(0); }
  to { transform: translateX(var(--proj-progress-x, 0px)) scaleX(1); }
}

.proj-logo-btn {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: clamp(64px, 20vw, 180px);
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 6px 14px 0;
  height: clamp(54px, 7vw, 84px);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.proj-logo-btn img {
  max-width: 62%;
  max-height: clamp(32px, 5vw, 58px);
  object-fit: contain;
  display: block;
  filter: grayscale(1) contrast(.85);
  opacity: .58;
  transition: filter .16s ease, opacity .16s ease;
}

.proj-logo-btn.active img,
.proj-logo-btn[aria-pressed="true"] img {
  filter: none;
  opacity: 1;
}

#proj-image {
  transition: opacity .45s ease;
  display: block;
  position: relative;
  z-index: 1;
}

.proj-image-clone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.proj-image-clone-fade {
  animation: projImageFadeOut .45s ease forwards;
}

.proj-info h5,
.proj-info .small.sub,
.proj-overlay-inner h3 {
  display: block;
  overflow: hidden;
}

.proj-info h5,
.proj-info .small.sub {
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.proj-overlay-inner h3 {
  text-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
}

.is-text-animating { will-change: transform, opacity; }

.text-slide-out-left { animation: textSlideOutLeft .35s forwards ease; }
.text-slide-out-right { animation: textSlideOutRight .35s forwards ease; }
.text-slide-in-left { animation: textSlideInLeft .35s forwards ease; }
.text-slide-in-right { animation: textSlideInRight .35s forwards ease; }

@keyframes textSlideOutLeft {
  to { transform: translateX(-36px); opacity: 0; }
}

@keyframes textSlideOutRight {
  to { transform: translateX(36px); opacity: 0; }
}

@keyframes textSlideInLeft {
  from { transform: translateX(-36px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes textSlideInRight {
  from { transform: translateX(36px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.proj-image-fade-in { animation: projImageFadeIn .45s ease forwards; }

@keyframes projImageFadeOut {
  to { opacity: 0; }
}

@keyframes projImageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 991.98px) {
  .projetos-carousel { flex-direction: column-reverse; }
  .proj-logos {
    gap: clamp(12px, 4vw, 24px);
    padding-top: 18px;
  }
  .proj-logo-btn {
    min-width: 120px;
    padding: 8px 12px 0;
    height: 60px;
  }
}

/* Mobile-only: arrange project logo buttons in a 2x2 grid and draw two dashed lines
   (one at the top row and one at the bottom row). This removes the horizontal
   scroll and keeps button animations. */
@media (max-width: 520px) {
  /* Mobile: show the 4 small horizontal lines as a single centered row with a tight gap */
  .proj-logos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px; /* small gap between the 1px lines */
    padding-top: 14px;
    padding-bottom: 6px;
    overflow: visible;
  }

  /* Mobile: show 4 small horizontal lines (1px) instead of logo images */
  .proj-logo-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 1px; /* as requested: 1px lines */
    min-width: 0;
    max-width: none;
    padding: 0;
    border-radius: 1px;
    background: rgba(0,0,0,0.18);
    border: none;
    display: inline-block;
    transition: background-color .28s cubic-bezier(.22,1,.36,1), transform .22s ease, box-shadow .22s ease;
  }

  /* hide logo images on mobile; lines replace them */
  .proj-logo-btn img { display: none !important; }

  /* active/pressed line style (Clout purple) */
  .proj-logo-btn[aria-pressed="true"],
  .proj-logo-btn.active {
    background: linear-gradient(90deg, var(--clout-main), #4c14d6);
    transform: scaleY(1.6);
    box-shadow: 0 6px 18px rgba(107,33,255,0.18);
  }

  .proj-logo-btn:focus-visible {
    outline: 2px solid rgba(107,33,255,0.12);
    outline-offset: 6px;
  }

  /* Remove decorative dotted lines on mobile — we use the 4 line bullets instead */
  .proj-logo-track { display: none; }
  .proj-logos::before,
  .proj-logos::after { display: none; }

  /* ensure desktop indicators don't interfere on mobile */
  .proj-logo-indicator,
  .proj-logo-progress { display: none; }
}

/* Remove moldura/painel roxo apenas para o carrossel de projetos */
#projetos .projetos-carousel .project-card.card-glass {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Work-thumb: imagem maior, sem borda, levemente arredondada */
.projetos-carousel .work-thumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none;
  filter: drop-shadow(0 30px 45px rgba(10, 15, 50, .32));
}

.projetos-carousel .work-thumb img#proj-image {
  display: block;
  width: 100%;
  height: clamp(360px, 46vh, 520px); /* mais "esticada" em desktop */
  object-fit: cover;
  object-position: center center;
  transition: transform .45s ease, opacity .45s ease;
}

/* Projetos: left info blocks styling (two stacked blocks) */
.proj-info .proj-block { margin-bottom: 6px; }
.proj-info .proj-block-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111; /* match section title color */
  margin: 0 0 6px 0;
  text-shadow: none !important;
}

.proj-info .proj-block-title {
  position: relative;
  padding-left: var(--proj-brand-marker-offset);
}

/* alinhar a descrição exatamente abaixo do título (mesma margem esquerda) */
.projetos-carousel .proj-info .proj-block-desc,
.projetos-carousel .proj-info .small.sub {
  padding-left: var(--proj-brand-marker-offset);
}

/* base variables and marker appearance */
.projetos-carousel {
  --proj-brand-marker-w: 1px;
  --proj-brand-marker-offset: clamp(14px, 3vw, 24px);
}

.projetos-carousel .proj-block-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: var(--proj-brand-marker-w);
  border-radius: 0;
  background: rgba(255,255,255,0.12);
}

/* Cores por marca (usadas quando JS aplica a classe no container `.projetos-carousel`) */
.projetos-carousel.brand-fakinville .proj-block-title::before { background: rgba(24,120,255,1); }
.projetos-carousel.brand-fegfaces   .proj-block-title::before { background: rgba(212,171,55,1); }
.projetos-carousel.brand-wuzzy     .proj-block-title::before { background: rgba(12,12,12,1); }
.projetos-carousel.brand-ruzzle    .proj-block-title::before { background: rgba(155,22,32,1); }

/* Slight vertical alignment tweak for very small screens */
@media (max-width: 520px) {
  .projetos-carousel { --proj-brand-marker-w: 1px; --proj-brand-marker-offset: clamp(12px, 4vw, 18px); }
  .projetos-carousel .proj-block-title::before { top: 4px; bottom: 4px; }
}
.proj-info .proj-block-desc {
  margin: 0 0 8px 0;
  color: #546375;
  font-size: 0.95rem;
  line-height: 1.35;
}
.proj-block-sep { height: 18px; }

/* Overlay color tint + headline area */
.proj-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.proj-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent; /* set via brand classes */
  opacity: .35;
  transition: background .3s ease, opacity .3s ease;
  z-index: 0;
}

.proj-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 45%;
  background: transparent;
  transition: background .3s ease, opacity .3s ease;
  opacity: 1;
  z-index: 1;
}

.proj-overlay-inner {
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(18px, 3.2vw, 30px);
  right: 12px;
  color: #fff;
  max-width: min(520px, 60%);
  z-index: 2;
  /* keep normal flow for headline (arrow will be absolutely positioned, so it won't take space) */
}

.proj-overlay-inner h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.15;
  font-weight: 600;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  /* Ensure initial position stays exactly as before (arrow won't occupy space) */
}

.proj-link-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 100%;
  touch-action: pan-y;
}

.proj-link-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 6px;
}

.proj-overlay-arrow {
  /* position relative to the clickable card so bottom distance is from the card border */
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(13px, 2vw, 22px); /* moved arrow lower so it won't be overlapped by text */
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 999; /* ensure arrow renders above text/overlays */
}

.proj-overlay-arrow i {
  font-size: 1.35rem;
  color: #fff;
  /* no border, no background — only the icon */
  display: inline-block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.42));
}

.proj-link-card:hover .proj-overlay-inner h3,
.proj-link-card:focus-visible .proj-overlay-inner h3 {
  transform: translateY(-32px); /* larger lift to avoid overlap with arrow */
}

.proj-link-card:hover .proj-overlay-arrow,
.proj-link-card:focus-visible .proj-overlay-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* Small screens: reduce arrow offset and headline lift to avoid pushing content too far */
@media (max-width: 520px) {
  .proj-overlay-arrow {
    bottom: clamp(28px, 4vw, 40px);
  }

  .proj-link-card:hover .proj-overlay-inner h3,
  .proj-link-card:focus-visible .proj-overlay-inner h3 {
    transform: translateY(-28px);
  }
}

/* Tablets and small desktops: increase lift when hover/active so headline clears the arrow */
@media (max-width: 991.98px) {
  .proj-overlay-arrow {
    bottom: clamp(0px, 4.2vw, 44px);
  }

  .proj-link-card:hover .proj-overlay-inner h3,
  .proj-link-card:focus-visible .proj-overlay-inner h3 {
    transform: translateY(-36px);
  }
}

/* Brand color classes — controla a cor do overlay e possíveis detalhes */
.brand-fakinville .proj-overlay::before { background: linear-gradient(180deg, rgba(24,120,255,0.7) 0%, rgba(24,120,255,0.86) 52%, rgba(24,120,255,0.96) 100%); }
.brand-fegfaces .proj-overlay::before { background: linear-gradient(180deg, rgba(200,150,50,0.7) 0%, rgba(200,150,50,0.88) 52%, rgba(200,150,50,0.97) 100%); }
.brand-wuzzy .proj-overlay::before { background: linear-gradient(180deg, rgba(12,12,12,0.72) 0%, rgba(10,10,10,0.9) 52%, rgba(2,2,2,0.98) 100%); }
.brand-ruzzle .proj-overlay::before { background: linear-gradient(180deg, rgba(155,22,32,0.72) 0%, rgba(140,18,28,0.9) 52%, rgba(120,12,22,0.98) 100%); }

.brand-fakinville .proj-overlay::after { background: linear-gradient(180deg, rgba(24,120,255,0) 0%, rgba(24,120,255,0.6) 48%, rgba(24,120,255,0.9) 100%); }
.brand-fegfaces .proj-overlay::after { background: linear-gradient(180deg, rgba(200,150,50,0) 0%, rgba(200,150,50,0.62) 48%, rgba(200,150,50,0.92) 100%); }
.brand-wuzzy .proj-overlay::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.92) 100%); }
.brand-ruzzle .proj-overlay::after { background: linear-gradient(180deg, rgba(120,12,22,0) 0%, rgba(120,12,22,0.62) 48%, rgba(120,12,22,0.92) 100%); }

/* reduzir opacidade para que a imagem apareça por baixo */
.brand-fakinville .proj-overlay::before,
.brand-fegfaces .proj-overlay::before,
.brand-wuzzy .proj-overlay::before,
.brand-ruzzle .proj-overlay::before {
  opacity: .35;
}

.proj-logo-btn[data-brand="wuzzy"] img {
  filter: grayscale(1) brightness(0.15) !important;
  opacity: .78;
}

.proj-logo-btn[data-brand="wuzzy"].active img,
.proj-logo-btn[data-brand="wuzzy"][aria-pressed="true"] img {
  filter: grayscale(1) brightness(0) !important;
  opacity: 1;
}

/* Left description: tornar texto escuro para contraste */
.projetos-carousel .proj-info,
.projetos-carousel .proj-info .pro-desc,
.projetos-carousel .proj-info .small.sub {
  color: #0b0b0b !important;
}

@media (max-width: 991.98px) {
  .projetos-carousel .work-thumb img#proj-image { height: clamp(220px, 36vh, 340px); }
  .proj-overlay-inner h3 { font-size: 1.05rem; }
}

/* Mobile-specific: make project image taller (more square) and ensure it fills the box */
@media (max-width: 520px) {
  .projetos-carousel .work-thumb {
    /* make the card rectangle match the image height on mobile */
    height: clamp(320px, 50vh, 520px) !important;
    min-height: clamp(320px, 50vh, 520px) !important;
  }

  .projetos-carousel .work-thumb img#proj-image {
    /* image should fill the wrapping rectangle */
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
  }

  /* slightly reduce overlay padding so headline doesn't overlap the taller image */
  .proj-overlay-inner {
    left: clamp(12px, 4vw, 20px);
    bottom: clamp(18px, 4vw, 28px);
    right: 12px;
  }

  /* Prevent the project card from escaping horizontally on narrow screens.
     Force the carousel and card to respect the viewport width and apply
     safe inline padding so the rectangle always fits the device. */
  .projetos-carousel {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(12px, 4vw, 20px);
    box-sizing: border-box;
    overflow: visible; /* keep shadows visible while layout stays inside */
  }

  .projetos-carousel .project-card {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .projetos-carousel .work-thumb {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  /* reduce very large drop-shadow on small screens to avoid apparent clipping */
  .projetos-carousel .work-thumb {
    filter: drop-shadow(0 18px 28px rgba(10, 15, 50, .22));
  }
}

/* Mobile-only overrides: FEGFACES crop and offcanvas mobile menu restyle */
@media (max-width: 991.98px) {

  /* Projetos — FEGFACES: shift crop as far left as possible on mobile */
  /* .projetos-carousel.brand-fegfaces .work-thumb img#proj-image {
    object-position: left center !important;
  } */

  /* Offcanvas (mobile): slide-in from LEFT instead of top, and move logo farther from left edge */
  .clout-offcanvas {
    /* Ensure the panel covers full height and is positioned from the left */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    height: 100vh !important;
    width: min(86%, 420px) !important;
    max-width: 92% !important;
    transform: translateX(-110%) !important;
    transition: transform .36s cubic-bezier(.22,1,.36,1) !important;
    transform-origin: left center !important;
    z-index: 1055; /* above backdrop but consistent with BS */
    box-shadow: 0 18px 40px rgba(0,0,0,0.48);
  }

  /* When visible, bring it to place from the left */
  .clout-offcanvas.show {
    transform: translateX(0) !important;
  }

  /* Keep the textual label for screen readers but hide visually; show logo pulled inward from left */
  .clout-offcanvas .offcanvas-title {
    color: transparent !important;
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep content left-aligned */
    padding-left: 28px; /* increased spacing from left edge for the whole title area */
  }

  /* Place the logo with a comfortable left gap (not centered) */
  .clout-offcanvas .offcanvas-title::before {
    content: "";
    position: absolute;
    left: 28px; /* larger gap from left border as requested */
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 140px;
    height: 34px;
    background-image: url("../images/clout_white.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    pointer-events: none;
  }

  /* Make mini-items full-width, text-only and remove capsule backgrounds/icons */
  .clout-offcanvas .mini-items-oc {
    padding: 0;
  }

  .clout-offcanvas .mini-items-oc .mini-item {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .75rem 0 .75rem 28px !important; /* align text with logo gap */
    display: flex !important;
    align-items: center;
    gap: .75rem;
    justify-content: flex-start;
  }

  .clout-offcanvas .mini-items-oc .mini-item i { display: none !important; }

  .clout-offcanvas .mini-items-oc .mini-item .label {
    display: block !important;
    font-weight: 500;
    color: inherit;
    padding: 0;
  }

  /* Subtle dotted divider between rows */
  .clout-offcanvas .mini-items-oc .mini-item + .mini-item {
    border-top: 1px dotted rgba(255,255,255,0.06);
  }

  /* Ensure backdrop fills entire viewport when panel is fixed */
  .offcanvas-backdrop {
    inset: 0 !important;
  }

  /* Make the offcanvas body a column so items scroll and socials stay at the bottom */
  .clout-offcanvas .offcanvas-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding-bottom: 12px !important;
  }

  /* Allow the menu links to scroll if they overflow the available vertical space */
  .clout-offcanvas .mini-items-oc {
    flex: 1 1 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 12px !important; /* small gutter for scrollbar */
  }

  /* Style the social buttons block inside the offcanvas */
  .clout-offcanvas .offcanvas-socials .footer-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 44px) !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 6px 28px 12px 28px !important;
  }

  .clout-offcanvas .offcanvas-socials .ft-btn {
    width: 44px !important;
    height: 44px !important;
  }

}

#hero .container.position-relative {
  z-index: 2;
}

#pacotes .button {
  position: relative;
  padding: 12px 32px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  display: inline-block;
  z-index: 1;
  transition: transform 0.2s ease;
  text-decoration: none;
  /* evita sublinhado em links */
}

#pacotes .button span {
  position: relative;
  z-index: 15;
}

#pacotes .button:active {
  transform: scale(0.96);
}

/* Hover: leve zoom-in mantendo o efeito interno */
#pacotes .button:hover {
  transform: scale(1.03);
  text-decoration: none;
}

#pacotes .button::before {
  content: "";
  background: rgb(0 0 0);
  border-radius: inherit;
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 12;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s ease;
}

#pacotes .button:hover::before {
  /* revelar o preenchimento/efeito completo do botão no hover */
  opacity: 0;
  transform: scale(1);
}

/* Closed cards: keep the inner fill visible so only the border shows */
#pacotes .pkg-card:not(.is-active) .button::before {
  opacity: 1;
  transform: scale(1);
}

/* Em cards fechados, no hover mostrar o efeito completo (sem overlay preto) */
#pacotes .pkg-card:not(.is-active) .button:hover::before {
  opacity: 0;
  transform: scale(1);
}

/* Button border ring disabled by default (normal border only) */
#pacotes .button::after {
  content: none;
}

/* When card is closed, show animated border ring only */
#pacotes .pkg-card:not(.is-active) .button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(#56008f, #6200ff, #180583, #56008f);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 11;
  pointer-events: none;
  /* animation: spin_border 6s linear infinite; */
}

/* @keyframes spin_border {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
} */

/* When card is open, remove the border ring entirely */
#pacotes .pkg-card.is-active .button::after {
  animation: none !important;
  opacity: 0;
  content: none;
}

/* Slow down bubble animations when the card is open */
#pacotes .pkg-card.is-active .button .bubble-1 {
  animation-duration: 12s;
}

#pacotes .pkg-card.is-active .button .bubble-2 {
  animation-duration: 10s;
}

#pacotes .pkg-card.is-active .button .bubble-3 {
  animation-duration: 8s;
}

#pacotes .pkg-card.is-active .button .bubble-4 {
  animation-duration: 14s;
}

#pacotes .pkg-card.is-active .button .bubble-5 {
  animation-duration: 6s;
}

#pacotes .pkg-card.is-active .button .bubble-6 {
  animation-duration: 16s;
}

#pacotes .pkg-card.is-active .button .bubble-7 {
  animation-duration: 12s;
}

#pacotes .bubble-layer {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(10px);
  z-index: 0;
  /* bubbles animate in ambos estados */
  opacity: 1;
  animation-play-state: running;
}

#pacotes .bubble-1 {
  background: #56008f;
  top: -20%;
  left: -10%;
  animation: moveUpRight 6s ease-in-out infinite;
}

#pacotes .bubble-2 {
  background: #560088;
  top: 0%;
  left: 10%;
  animation: moveDownLeft 5s ease-in-out infinite;
  animation-delay: 1s;
}

#pacotes .bubble-3 {
  background: #4803b8;
  top: 20%;
  left: 50%;
  animation: moveRight 4s ease-in-out infinite;
  animation-delay: 2s;
}

#pacotes .bubble-4 {
  background: #6200ff;
  top: -20%;
  left: 70%;
  animation: moveUpLeft 7s ease-in-out infinite;
  animation-delay: 3s;
}

#pacotes .bubble-5 {
  background: #180583;
  top: 30%;
  left: -10%;
  animation: moveDownRight 3s ease-in-out infinite;
  animation-delay: 4s;
}

#pacotes .bubble-6 {
  background: #0c1f88;
  top: -10%;
  left: 30%;
  animation: moveLeft 8s ease-in-out infinite;
  animation-delay: 0.5s;
}

#pacotes .bubble-7 {
  background: #6200ff;
  top: 40%;
  left: 60%;
  animation: moveUp 6s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* (removed) bubbles já estão ativas por padrão em ambos os estados */

@keyframes moveUpRight {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100%, -100%);
  }

  50% {
    transform: translate(-50%, 50%);
  }

  75% {
    transform: translate(50%, -50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveDownLeft {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-100%, 100%);
  }

  50% {
    transform: translate(50%, -50%);
  }

  75% {
    transform: translate(-50%, 50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveRight {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100%, 0);
  }

  50% {
    transform: translate(-100%, 50%);
  }

  75% {
    transform: translate(50%, -50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveUpLeft {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-100%, -100%);
  }

  50% {
    transform: translate(50%, 50%);
  }

  75% {
    transform: translate(-50%, -50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveDownRight {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100%, 100%);
  }

  50% {
    transform: translate(-50%, -50%);
  }

  75% {
    transform: translate(50%, 50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveLeft {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-100%, 0);
  }

  50% {
    transform: translate(100%, -50%);
  }

  75% {
    transform: translate(-50%, 50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes moveUp {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(0, -100%);
  }

  50% {
    transform: translate(50%, 50%);
  }

  75% {
    transform: translate(-50%, -50%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* revertido: restaura degradê roxo original do after-hero */
/* === PATCH: After-hero branco e títulos/duo-sub pretos (fora das caixas) === */
.after-hero-bg {
  background: #f8f8f8 !important;
  background-attachment: initial !important;
}

.after-hero-bg::before {
  content: none !important;
  background: none !important;
}

/* Títulos das seções e textos de apoio fora das caixas */
.after-hero-bg .section-title,
.after-hero-bg .section-title *,
.after-hero-bg .duo-sub {
  color: #111 !important;
}

/* === PATCH: Restaurar título “Soluções” (Seção Serviços) === */
.after-hero-bg #servicos .section-title {
  color: var(--clout-white) !important;
}

.after-hero-bg #servicos .solutions-anim .word {
  color: var(--clout-accent) !important;
}

/* Prefixo “Soluções pra” claro e subtítulo restaurado */
.after-hero-bg #servicos .solutions-anim .prefix {
  color: var(--clout-white) !important;
}

.after-hero-bg #servicos .duo-sub {
  color: #cfd0d7 !important;
}

/* Remove quaisquer glows/gradientes roxos residuais dentro do pós-hero */
.after-hero-bg .bg-soft {
  background: transparent !important;
}

.after-hero-bg #servicos .services-astro::after {
  background: none !important;
}

/* Soluções/Serviços: galáxia com fundo roxo igual ao HERO */
.after-hero-bg #servicos .services-astro {
  position: relative;
  background: #0e0a19 !important;
  /* base escura como no hero */
}

.after-hero-bg #servicos .services-astro::before {
  /* remover círculo roxo brilhante do centro */
  content: none !important;
  background: none !important;
  filter: none !important;
}

/* garantir ordem das camadas: gradient (0) < canvas (1) < conteúdo (2) */
.after-hero-bg #servicos .services-canvas {
  z-index: 1 !important;
}

.after-hero-bg #servicos .services-content {
  position: relative;
  z-index: 2 !important;
}

/* Mobile: colocar a palavra rotativa abaixo do prefixo, centralizar título e aumentar espaçamento até o subtítulo */
@media (max-width: 520px) {
  /* garantir título centralizado no mobile (só aqui) */
  #servicos .section-title {
    text-align: center !important;
    display: block;
    line-height: 1.02;
    margin-bottom: 0.25rem;
  }

  /* força o prefixo e o bloco de palavras a ocuparem linhas distintas */
  #servicos .solutions-anim {
    display: block;
    width: 100%;
    text-align: center;
  }

  #servicos .solutions-anim .prefix {
    display: block;
    font-weight: 800;
  }

  /* manter a animação, mas garantir que a palavras fiquem numa linha própria abaixo do prefixo */
  #servicos .solutions-anim .words {
    display: block;
    height: 1em; /* mostra apenas uma palavra por vez */
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 50px;
  }

  /* cada palavra mantém o comportamento de bloco para a animação vertical */
  #servicos .solutions-anim .word {
    display: block;
    line-height: 1em;
  }

  /* aumentar o espaçamento entre o título (todas as linhas) e o subtítulo */
  #servicos .duo-sub {
    margin-top: 28px;
    text-align: center;
  }

  /* garantir overflow visível dentro do cartão se houver bordas arredondadas */
  #servicos .services-astro,
  #servicos .services-content {
    overflow: visible;
  }
}


/* (revert) Removido ajuste de largura/escala do container de Soluções no pós-hero */


/* === FOOTER PATCHES APPLIED === */

/* === PATCH: Footer links hover "apagadinha" & no underline === */
.site-footer a {
  color: #cfd0d7;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease, text-decoration-color .2s ease;
}

.site-footer a:hover {
  color: #ffffff;
  opacity: .85;
  text-decoration: none;
}

/* Footer policy links inherit same behavior */
.site-footer .policy a {
  color: #9aa0b3;
}

.site-footer .policy a:hover {
  color: #ffffff;
  opacity: .85;
  text-decoration: none;
}


/* === PATCH: Footer "Mapa de Site" title uses Inter === */
.site-footer .footer-nav h6 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  letter-spacing: .02em;
}


/* === PATCH: Footer brand centered (based on right texts) === */
.site-footer .footer-top .container {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.site-footer .footer-top .container> :first-child {
  flex: 1 1 auto;
  text-align: center;
}

.site-footer .footer-top .container> :first-child .footer-logo {
  display: block;
  margin-inline: auto;
}

/* Keep the nav aligned to the right on lg+ screens */
@media(min-width: 992px) {
  .site-footer .footer-top .footer-nav {
    margin-left: auto;
    text-align: right;
  }
}



/* === PATCH: Footer "Mapa de Site" bold and larger === */
.site-footer .footer-nav h6 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: .02em;
}


/* === FOOTER ACTION BUTTONS (no Tailwind needed) === */
.site-footer .footer-actions {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  /* place between logo and columns */
}

@media (min-width: 992px) {
  .site-footer .footer-actions {
    justify-content: flex-start;
  }
}

.ft-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

.ft-btn .ft-ico {
  width: 28px;
  height: 28px;
}

.ft-btn .ft-shine {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: translateX(-100%);
  transition: transform .7s ease;
}

.ft-btn:hover {
  transform: scale(1.08) rotate(2deg);
  filter: brightness(1.05);
}

.ft-btn:active {
  transform: scale(.96) rotate(0);
}

.ft-btn:hover .ft-shine {
  transform: translateX(100%);
}

.ft-btn-green {
  border-color: rgba(37, 211, 102, .22);
  box-shadow: 0 10px 24px rgba(37, 211, 102, .15);
}

.ft-btn-green .ft-ico {
  color: #25D366;
  fill: currentColor;
}

.ft-btn-green:hover {
  box-shadow: 0 16px 36px rgba(37, 211, 102, .30);
  border-color: rgba(37, 211, 102, .55);
}

.ft-btn-indigo {
  border-color: rgba(99, 102, 241, .22);
  box-shadow: 0 10px 24px rgba(99, 102, 241, .18);
}

.ft-btn-indigo .ft-ico {
  color: #818cf8;
  fill: currentColor;
}

.ft-btn-indigo:hover {
  box-shadow: 0 16px 36px rgba(99, 102, 241, .30);
  border-color: rgba(99, 102, 241, .55);
}

.ft-btn-red {
  border-color: rgba(239, 68, 68, .24);
  box-shadow: 0 10px 24px rgba(239, 68, 68, .20);
}

.ft-btn-red .ft-ico {
  color: #ef4444;
  fill: currentColor;
}

.ft-btn-red:hover {
  box-shadow: 0 16px 36px rgba(239, 68, 68, .34);
  border-color: rgba(239, 68, 68, .55);
}

/* place the actions row between the left logo block and the nav columns */
.site-footer .footer-top .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
}

.site-footer .footer-top .container> :first-child {
  justify-self: start;
}

.site-footer .footer-top .container .footer-actions {
  justify-self: center;
}

.site-footer .footer-top .container .footer-nav {
  justify-self: end;
}

/* Bottom bar: LGPD inline links to the right */
.site-footer .footer-bottom .container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer .footer-bottom .lgpd-inline {
  margin-left: auto;
  display: flex;
  gap: clamp(12px, 3vw, 26px);
}

.site-footer .footer-bottom .lgpd-inline a {
  color: #cfd0d7;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}

.site-footer .footer-bottom .lgpd-inline a:hover {
  color: #fff;
  opacity: .85;
}


.ft-btn-pink {
  border-color: rgba(236, 72, 153, .22);
  box-shadow: 0 10px 24px rgba(236, 72, 153, .18);
}

.ft-btn-pink .ft-ico {
  color: #ec4899;
  fill: currentColor;
}

.ft-btn-pink:hover {
  box-shadow: 0 16px 36px rgba(236, 72, 153, .32);
  border-color: rgba(236, 72, 153, .55);
}

.ft-btn-blue {
  border-color: rgba(59, 130, 246, .22);
  box-shadow: 0 10px 24px rgba(59, 130, 246, .18);
}

.ft-btn-blue .ft-ico {
  color: #3b82f6;
  fill: currentColor;
}

.ft-btn-blue:hover {
  box-shadow: 0 16px 36px rgba(59, 130, 246, .32);
  border-color: rgba(59, 130, 246, .55);
}


/* === PATCH: Social buttons tune === */
.ft-ico {
  width: 28px;
  height: 28px;
  display: block;
}

/* shift actions closer to the right column */
.site-footer .footer-top .container {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  /* logo | actions | nav */
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
}

.site-footer .footer-top .container .footer-actions {
  justify-self: end;
}

/* nudge a bit more to the right */
@media(min-width: 992px) {
  .site-footer .footer-actions {
    margin-right: clamp(20px, 8vw, 160px);
  }
}

/* bottom-right inline LGPD links */
.site-footer .footer-bottom .container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer .footer-bottom .lgpd-inline {
  margin-left: auto;
  display: flex;
  gap: clamp(12px, 3vw, 26px);
}

.site-footer .footer-bottom .lgpd-inline a {
  color: #cfd0d7;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}

.site-footer .footer-bottom .lgpd-inline a:hover {
  color: #fff;
  opacity: .85;
}

.ft-btn-orange .ft-ico {
  width: 44px;
  height: 44px;
}

/* === Footer bottom: social buttons at right, neutral by default; brand color on hover === */
.site-footer .footer-bottom .footer-actions {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: clamp(12px, 2vw, 20px);
}

@media (max-width: 991.98px) {
  .site-footer .footer-bottom .footer-actions {
    margin-left: auto;
  }
}

/* Neutral default (white), only colorize on hover) */
.footer-actions .ft-btn {
  border-color: rgba(255, 255, 255, .12);
}

.footer-actions .ft-btn .ft-ico {
  color: #fff !important;
  fill: currentColor;
}

.footer-actions .ft-btn-green:hover .ft-ico {
  color: #25D366 !important;
}

.footer-actions .ft-btn-orange:hover .ft-ico {
  color: #ff9800 !important;
}

.footer-actions .ft-btn-red:hover .ft-ico {
  color: #ef4444 !important;
}

.footer-actions .ft-btn-blue:hover .ft-ico {
  color: #3b82f6 !important;
}

/* Slightly dim default look to match footer text */
.footer-actions .ft-btn {
  filter: saturate(.85);
}


/* === FIX: Footer bottom layout (credit left, buttons right; policy below-left) === */
.site-footer .footer-bottom .container {
  display: block !important;
}

.site-footer .footer-bottom .bottom-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer .footer-bottom .bottom-row .credit {
  color: #cfd0d7;
}

.site-footer .footer-bottom .bottom-row .footer-actions {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: clamp(12px, 2vw, 20px);
}

/* Policy links under the credit, aligned left */
.site-footer .footer-bottom .policy a {
  color: #9aa0b3;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}

.site-footer .footer-bottom .policy a:hover {
  color: #ffffff;
  opacity: .85;
  text-decoration: none;
}

/* Neutral icons default; color on hover */
.footer-actions .ft-btn .ft-ico {
  color: #ffffff !important;
  fill: currentColor;
}

.footer-actions .ft-btn-green:hover .ft-ico {
  color: #25D366 !important;
}

.footer-actions .ft-btn-orange:hover .ft-ico {
  color: #ff9800 !important;
}

.footer-actions .ft-btn-red:hover .ft-ico {
  color: #ef4444 !important;
}

.footer-actions .ft-btn-blue:hover .ft-ico {
  color: #3b82f6 !important;
}


/* === PATCH: Footer bottom social buttons - no glow by default; WhatsApp icon crisp === */
/* Scope only to footer-bottom actions to avoid affecting other areas */
.site-footer .footer-bottom .footer-actions .ft-btn {
  box-shadow: none !important;
  /* remove glow */
  border-color: rgba(255, 255, 255, .16) !important;
  /* neutral border */
  filter: none !important;
  /* remove dim effect */
  background: radial-gradient(transparent 60%, transparent 61%) !important;
  /* kill any subtle ring */
}

.site-footer .footer-bottom .footer-actions .ft-shine {
  display: none !important;
}

/* disable shine sweep */

/* Icons: solid white by default; ensure opacity is full */
.site-footer .footer-bottom .footer-actions .ft-btn .ft-ico {
  color: #ffffff !important;
  fill: currentColor !important;

  .after-hero-bg #servicos .services-canvas {
    z-index: 1 !important;
  }

  border-color: rgba(59, 130, 246, .6) !important;
}

.site-footer .footer-bottom .footer-actions .ft-btn-green:hover .ft-ico {
  color: #25D366 !important;
}

.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico {
  color: #ff9800 !important;
}

.site-footer .footer-bottom .footer-actions .ft-btn-red:hover .ft-ico {
  color: #ef4444 !important;
}

.site-footer .footer-bottom .footer-actions .ft-btn-blue:hover .ft-ico {
  color: #3b82f6 !important;
}


/* === PATCH v3: Footer bottom fine-tuning === */

/* 1) Row alignment: buttons to the far right */
.site-footer .footer-bottom .bottom-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  /* credit left | actions right */
  gap: 16px;
}

.site-footer .footer-bottom .footer-actions {
  margin-left: auto !important;
  /* stick to the right */
  margin-right: 0 !important;
}

/* Desktop layout: place credit left, actions right, policy under credit */
@media (min-width: 521px) {
  .site-footer .footer-bottom .bottom-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 12px;
  }

  .site-footer .footer-bottom .bottom-row .footer-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0 !important;
  }

  .site-footer .footer-bottom .bottom-row .credit {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-footer .footer-bottom .bottom-row .policy {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Make footer social button borders follow their icon/brand colors (match Instagram behavior) */
.site-footer .footer-bottom .footer-actions .ft-btn-green {
  border-color: rgba(37, 211, 102, .22) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-green:hover {
  border-color: rgba(37, 211, 102, .55) !important;
  box-shadow: 0 12px 28px rgba(37,211,102,.12) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-orange {
  /* fallback single-color border for IG when not showing gradient */
  border-color: rgba(245, 96, 64, .22) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover {
  border-color: rgba(245, 96, 64, .55) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-red {
  border-color: rgba(239, 68, 68, .22) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-red:hover {
  border-color: rgba(239, 68, 68, .55) !important;
  box-shadow: 0 12px 28px rgba(239,68,68,.12) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-blue {
  border-color: rgba(59, 130, 246, .22) !important;
}
.site-footer .footer-bottom .footer-actions .ft-btn-blue:hover {
  border-color: rgba(59, 130, 246, .55) !important;
  box-shadow: 0 12px 28px rgba(59,130,246,.12) !important;
}

/* 2) Buttons smaller (56 -> 52) and icons slightly smaller to keep balance */
.site-footer .footer-bottom .footer-actions .ft-btn {
  width: 52px !important;
  height: 52px !important;
}

.site-footer .footer-bottom .footer-actions .ft-btn .ft-ico {
  width: 26px !important;
  height: 26px !important;
}

/* 3) (removido) Regra vazia para .policy eliminada para evitar linter warning */

.site-footer .footer-bottom .footer-actions .ft-btn-orange .ft-ico {
  width: 38px !important;
  /* ajuste aqui: 30–36px funciona bem */
  height: 38px !important;
}

/* === PATCH: footer fixes === */
.site-footer .footer-logo {
  height: 58px;
  width: auto;
}

.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer .footer-tagline {
  margin-top: .5rem;
  text-align: left;
}

/* Mobile: centralizar todo o conteúdo do rodapé e posicionar redes sociais acima do crédito */
@media (max-width: 520px) {
  .site-footer .footer-top .container,
  .site-footer .footer-bottom .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px;
  }

  /* Footer brand: centralizar logo e tagline */
  .site-footer .footer-brand {
    align-items: center;
  }

  .site-footer .footer-tagline {
    text-align: center;
  }

  /* Footer-top nav: center and full width */
  .site-footer .footer-nav {
    text-align: center !important;
    margin-left: 0 !important;
  }

  /* Footer-bottom: stack actions above credit */
  .site-footer .footer-bottom .bottom-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
  }

  .site-footer .footer-bottom .bottom-row .footer-actions {
    order: 0 !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }

  .site-footer .footer-bottom .bottom-row .credit {
    order: 1 !important;
    width: 100%;
  }

  /* Policy links: place centered under everything */
  .site-footer .footer-bottom .policy {
    margin-top: 8px;
    width: 100%;
    text-align: center;
    justify-content: center !important;
    display: flex !important;
    gap: 28px;
    padding: 0 20px;
    flex-wrap: nowrap; /* avoid wrapping so Cookies doesn't hug the edge */
  }

  .site-footer .footer-bottom .policy a {
    display: inline-block;
    padding: 0 8px;
  }

  /* ensure social icons have breathing room above the LGPD links */
  .site-footer .footer-bottom .footer-actions {
    margin-bottom: 10px !important;
  }

  /* small top spacing before copyright */
  .site-footer .footer-bottom .bottom-row .credit {
    margin-top: 6px;
  }

  /* Reduce size a bit for tight mobile spaces if needed */
  .site-footer .footer-bottom .footer-actions .ft-btn {
    width: 48px !important;
    height: 48px !important;
  }

}

/* Borda do botão do Instagram com degradê (fundo do botão continua transparente) */
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#000, #000) padding-box,
    /* mantém o fundo do botão */
    linear-gradient(135deg, #833AB4, #F56040) border-box !important;
  /* degradê na borda */
}

/* Ícone do Instagram com degradê real no SVG (sem quadrado) */
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico svg * {
  fill: url(#igIcon) !important;
  /* preenche paths/shapes com o degradê */
  stroke: url(#igIcon) !important;
  /* caso o ícone use stroke */
}

/* Remover qualquer cor antiga que force laranja sólido */
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico {
  color: inherit !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

/* Borda com degradê no hover (fundo permanece transparente) */
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#000, #000) padding-box,
    /* fundo do botão */
    linear-gradient(135deg, #833AB4, #F56040) border-box !important;
  /* degradê da borda */
}

/* === Footer top background image (requested) === */
/* Uses rodape_clout.jpg when available; falls back to clout_purple.png */
.site-footer .footer-top {
  position: relative;
  overflow: hidden;
}

/* Use an <img> element as responsive background so the full image can be shown (object-fit)
   The image file must exist at assets/images/rodape_clout.jpg */
.site-footer .footer-top .footer-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the rect entirely (may crop) */
  object-position: center center;
  opacity: .20; /* 70% opacity requested */
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* keep a subtle overlay off by default — content must stay above the image */
.site-footer .footer-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* no overlay; adjust if needed */
  z-index: 1;
  pointer-events: none;
}

.site-footer .footer-top > .container,
.site-footer .footer-top .footer-brand,
.site-footer .footer-top .footer-nav {
  position: relative;
  z-index: 2; /* above image */
}

/* ========== Utilidades (remoção de inline styles) ========== */
/* Honeypot acessível (equivalente a display:none sem inline) */
.hp-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* SVG defs oculto e fora do fluxo, sem inline */
.svg-defs-abs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Garante que o ícone herde a cor padrão quando não estiver em hover */
.site-footer .footer-bottom .footer-actions .ft-btn-orange .ft-ico path,
.site-footer .footer-bottom .footer-actions .ft-btn-orange .ft-ico circle,
.site-footer .footer-bottom .footer-actions .ft-btn-orange .ft-ico rect {
  fill: currentColor !important;
  stroke: none;
}

/* No hover, aplica o degradê DEFINIDO DENTRO DO SVG via url(#igGradientFooter) */
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico path,
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico circle,
.site-footer .footer-bottom .footer-actions .ft-btn-orange:hover .ft-ico rect {
  fill: url(#igGradientFooter) !important;
  stroke: url(#igGradientFooter) !important;
}

/* (removido) Override que forçava links brancos sólidos no header para voltar ao gradient do design novo */

/* === Fix: footer brand/logo left aligned (undo centering) === */
.site-footer .footer-top .container> :first-child {
  text-align: left !important;
}

.site-footer .footer-top .container> :first-child .footer-logo {
  margin-inline: 0 !important;
}

/* Ensure the footer items align to the left on stacked/mobile layout */
.site-footer .footer-top .container {
  align-items: flex-start !important;
}

.site-footer .container.footer-top {
  align-items: flex-start !important;
}

.site-footer .container.footer-top> :first-child {
  text-align: left !important;
}

.site-footer .container.footer-top> :first-child .footer-logo {
  margin-inline: 0 !important;
}

/* === Active link underline in navbar === */
.navbar .nav-link {
  position: relative;
  padding-bottom: 2px;
  /* espaço para o tracinho */
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  /* branco sólido */
  background: rgba(255, 255, 255, .95);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform;
}

.navbar .nav-link.is-active::after,
.navbar .nav-link.active::after {
  transform: scaleX(1);
}

/* ===== Overrides finais para reposicionar imagens dos cards (desktop) ===== */
@media (min-width: 992px) {
  /* remove centralização e shift vertical aplicados antes */
  #pacotes .pkg-grid>.pkg-card .pkg-over { left: 0 !important; --pkg-over-shift-y: 0 !important; }
  /* Card 1: leve deslocamento original */
  #pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over { transform: translateX(-6%) !important; }

  /* Aumenta levemente a imagem frontal do primeiro card */
  #pacotes .pkg-grid>.pkg-card:nth-child(1) .pkg-over { width: min(125%, 570px) !important; }
  /* Card 2: maior deslocamento (volta enquadramento anterior) */
  #pacotes .pkg-grid>.pkg-card:nth-child(2) .pkg-over { transform: translateX(-28%) !important; }
  /* Card 3: compensação moderada */
  #pacotes .pkg-grid>.pkg-card:nth-child(3) .pkg-over { transform: translateX(-12%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link::after {
    transition: none;
  }
}

/* ===== Hero (mobile) redução adicional + ~20% respiro geral ===== */
@media (max-width: 575.98px) {
  /* Respiro vertical maior (aprox 18–20% da altura em telas menores) */
  #hero { padding-top: clamp(60px, 18vh, 120px); padding-bottom: clamp(54px, 18vh, 110px); }
  /* Margem interna lateral um pouco maior para afastar das bordas */
  #hero > .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* Gap geral entre blocos internos */
  #hero .hero-safe { display: flex; flex-direction: column; gap: clamp(1.4rem, 8vw, 4.5rem); }
  /* Tipografia mais compacta */
  #hero h1 { font-size: clamp(1.55rem, 5.2vw + .25rem, 2.0rem); line-height: 1.12; letter-spacing: -.35px; }
  #hero .duo-sub { font-size: clamp(.9rem, 2.8vw + .3rem, 1.05rem); margin-top: .4rem; margin-bottom: .65rem; }
  #hero .sub { font-size: clamp(.82rem, 2.4vw + .3rem, .95rem); max-width: 40ch; line-height: 1.38; }
  /* Espaçamento vertical entre elementos diretos da lead */
  #hero .hero-lead > * + * { margin-top: clamp(.75rem, 2.4vw, 1.35rem); }
  #hero .hero-lead { padding-left: .15rem; padding-right: .15rem; }
  /* Botões menores e com wrap */
  #hero .btn-group, #hero .hero-ctas { gap: .65rem; flex-wrap: wrap; }
  #hero .btn-group .btn, #hero .hero-ctas .btn { padding: .48rem .85rem; font-size: .78rem; border-radius: 14px; line-height: 1.15; }
  /* Card destacado mais compacto e espaçado do bloco acima */
  #hero .card-hero-glow { margin-top: clamp(1rem, 4vw, 1.8rem); padding: .8rem .75rem .85rem; border-radius: 16px; }
  #hero .card-hero-glow h5, #hero .card-hero-glow .h5 { font-size: .95rem; margin-bottom: .42rem; }
  #hero .card-hero-glow p { font-size: .78rem; line-height: 1.34; margin-bottom: .7rem; }
  #hero .card-hero-glow .sub-cta.btn-modern { padding: .55rem .8rem; font-size: .74rem; border-radius: 28px; }
  /* Espaçamentos solicitados: mais distância entre logo+selo, título e subtítulo */
  #hero .hero-topline { display:flex; gap:.9rem 1.1rem; margin-bottom: 1.15rem; transform: translateY(-46px); }
  #hero .hero-topline .hero-logo-top { max-width: 132px; height:auto; }
  #hero .hero-topline .chip { font-size:.72rem; padding:.45rem .85rem; border-radius:38px; line-height:1.1; }
  #hero h1 { margin-top: 0; margin-bottom: 1.05rem !important; }
  /* Compensa a subida da topline diminuindo um pouco o padding top global */
  #hero { padding-top: max(16px, calc(clamp(60px, 18vh, 120px) - 40px)); }
  #hero .duo-sub { margin-top: 0; margin-bottom: 1.15rem !important; }
  #hero .d-flex.gap-3 { margin-top: .4rem; gap: .9rem !important; }

  /* ===== Largura reduzida para criar margens laterais (~20% cada) =====
     A ideia: limitar o bloco principal a 60% da largura da viewport (60vw) mantendo mínimo legível.
     clamp(280px, 60vw, 620px) evita ficar estreito demais em telas muito pequenas e não cresce demais em telas largas. */
  #hero > .container > .row:not(.no-narrow) {
    /* Menos margem lateral: antes 60vw (≈20% cada lado). Agora 72vw (≈14% cada lado). */
    width: clamp(280px, 72vw, 680px);
    margin-left: auto;
    margin-right: auto;
  }
  /* Garantir que elementos internos não forcem overflow horizontal */
  #hero > .container > .row:not(.no-narrow) > [class*="col"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Caso algum componente precise ocupar largura total, adicione .no-narrow na .row via HTML */
}

/* Correct selector for element with both classes */
.site-footer .container.footer-top {
  align-items: flex-start !important;
}

.site-footer .container.footer-top> :first-child {
  text-align: left !important;
}

.site-footer .container.footer-top> :first-child .footer-logo {
  margin-inline: 0 !important;
}

/* Strong override: ensure footer-top content is fully centered on small screens */
@media (max-width: 520px) {
  .site-footer .footer-top.position-relative .container,
  .site-footer .footer-top .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-footer .footer-top .container > * {
    width: 100% !important;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-footer .footer-top .footer-brand {
    align-items: center !important;
  }

  .site-footer .footer-top .container .footer-logo {
    margin-inline: auto !important;
  }

  .site-footer .footer-top .container .footer-nav {
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
  }
}

/* ===== Mobile: adicionar margem/gutter ao cabeçalho para não encostar na borda ===== */
@media (max-width: 520px) {
  .navbar {
    padding-inline: clamp(10px, 4vw, 16px);
    box-sizing: border-box;
  }

  /* garante que a grade interna mantenha um padding consistente */
  .navbar .container.nav-grid,
  .navbar .nav-grid {
    padding-left: clamp(6px, 3.5vw, 12px);
    padding-right: clamp(6px, 3.5vw, 12px);
    box-sizing: border-box;
  }

  /* evita que o conteúdo do header ultrapasse a área visível */
  .navbar .left-links,
  .navbar .right-links,
  .navbar .brand-center-wrap {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* reduz gaps se necessário para evitar overflow em telas muito estreitas */
  .navbar .nav-grid {
    gap: clamp(8px, 4vw, 12px);
  }
}

/* Mobile tweak: aumentar o ícone do WhatsApp no mini menu sem afetar desktop */
@media (max-width: 576px) {
  .mini-whats {
    width: 64px;
    height: 64px;
  }

  .mini-whats i,
  .mini-whats .bi,
  .mini-whats .bi-whatsapp {
    font-size: 2rem; /* aumenta o ícone */
    line-height: 1;
  }

  /* garantir que o ícone fique centralizado no botão maior */
  .mini-whats { display: grid; place-items: center; }
}

/* Mobile: remover borda/contorno ao redor do botão hamburguer e deixar o ícone branco
   Aplica em telas onde o toggler está visível (abaixo de 992px) */
@media (max-width: 991.98px) {
  .navbar-toggler {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px !important;
  }

  .navbar-toggler:focus,
  .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Força o ícone hamburguer a usar SVG com traço branco */
  .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Mobile: slightly larger hamburger icon for small screens */
@media (max-width: 575.98px) {
  .navbar-toggler .navbar-toggler-icon {
    /* a bit thicker and larger for better tap target */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
    background-size: 28px 28px !important;
    background-position: center;
  }
  .navbar-toggler { padding: 8px !important; }
}

/* Desktop: aumentar espaçamento entre links de LGPD no rodapé (Termos, Privacidade, Cookies) */
@media (min-width: 992px) {
  .site-footer .footer-bottom .policy {
    display: flex !important;
    gap: clamp(20px, 3.2vw, 48px) !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .site-footer .footer-bottom .policy a {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
}