/* =====================================================================
   ADESTEC · SISTEMA DE DESIGN COMPARTILHADO (tokens + componentes)
   Carregado em todas as páginas. Fonte única para tipografia, cor,
   espaçamento, cabeçalho, rodapé, dropdowns e efeito de cursor.
   ===================================================================== */

:root {
  /* ── Paleta da marca ── */
  --brand:        #2BADA0;   /* teal primário */
  --brand-deep:   #1e8a7f;   /* teal escuro (hover/CTA) */
  --brand-700:    #15756b;
  --brand-50:     #e8f7f5;   /* teal claro (fundos) */
  --brand-ink:    #0b3d37;   /* texto sobre claro / títulos */

  --accent:       #F5A623;   /* âmbar acento */
  --accent-deep:  #e8920a;

  --ink:          #0f172a;   /* texto principal */
  --muted:        #475569;   /* texto secundário (contraste AA em branco) */

  /* Gradientes reutilizáveis */
  --grad-brand:   linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  --grad-accent:  linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  --grad-line:    linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);

  /* Tipografia / motion */
  --ease:         cubic-bezier(.22,1,.36,1);
  --header-h:     5rem;       /* 80px */
}

/* ─────────────────────────────────────────────────────────────────────
   TIPOGRAFIA GLOBAL — texto maior e mais legível em todo o site.
   Sobe a base e reescala os utilitários de texto mais usados.
   (mantém spacing intacto; espaçamento é tratado à parte) */
html { -webkit-text-size-adjust: 100%; }
body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }

.text-xs   { font-size: .82rem  !important; line-height: 1.55 !important; }
.text-sm   { font-size: .95rem  !important; line-height: 1.65 !important; }
.text-base { font-size: 1.0625rem !important; line-height: 1.7 !important; }
.text-lg   { font-size: 1.2rem  !important; }
.text-xl   { font-size: 1.4rem  !important; }
/* Texto secundário um pouco mais escuro = melhor contraste AA */
.text-gray-500 { color: #5b6573 !important; }
.text-gray-400 { color: #8a93a3 !important; }

/* ─────────────────────────────────────────────────────────────────────
   ITEM 5 · TÍTULOS DE SEÇÃO — maiores e com verde legível (WCAG AA)
   Regra central: vale para todas as páginas, sem ajustes pontuais.
   • Títulos <h2> de seção sobem de tamanho (text-3xl/4xl).
   • O verde de TEXTO passa de #2BADA0 (contraste ~2.4:1, reprova AA)
     para #15756b (~4.7:1, aprova AA). Fundos/bordas teal seguem #2BADA0. */
/* Só os <h2> de seção (text-3xl md:text-4xl). Os <h1> de hero ficam intactos. */
h2.text-3xl { font-size: 2.05rem !important; line-height: 1.18 !important; }
@media (min-width: 768px) {
  h2.text-4xl { font-size: 2.55rem !important; line-height: 1.16 !important; }
}
/* "olho" verde acima do título (ex.: QUEM SOMOS, CURSOS, SERVIÇOS, LINHA DO TEMPO):
   maior e com mais peso, para quem tem baixa visão. */
.text-teal.tracking-widest.uppercase { font-size: .92rem !important; letter-spacing: .14em !important; font-weight: 700 !important; }
/* Verde de texto com contraste AA em fundos CLAROS (não afeta bg-teal/border-teal). */
.text-teal { color: #15756b !important; }
a.text-teal:hover, .hover\:text-teal:hover { color: #0f5d55 !important; }
/* Exceção: em fundos ESCUROS o verde precisa permanecer claro p/ manter contraste. */
.bg-gray-900 .text-teal { color: #2BADA0 !important; }

/* ─────────────────────────────────────────────────────────────────────
   ESPAÇAMENTO — ritmo vertical mais compacto entre seções.
   Escopo em `section` para não afetar cards/inputs. (element+class vence
   a especificidade da utilitária do Tailwind, sem !important) */
section.py-8  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
section.py-10 { padding-top: 2rem;    padding-bottom: 2rem; }
section.py-12 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
section.py-14 { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
section.py-16 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
section.py-20 { padding-top: 3rem;    padding-bottom: 3rem; }
section.py-24 { padding-top: 3.5rem;  padding-bottom: 3.5rem; }

/* ─────────────────────────────────────────────────────────────────────
   CARDS DAS ACADEMIAS — 3 cards iguais; hover vira verde (cor da marca) */
.academia-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  border: 1px solid #eef1f4;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease),
              background-color .9s var(--ease), border-color .8s var(--ease);
}
/* conteúdo sempre acima das camadas de efeito */
.academia-card > * { position: relative; z-index: 2; }

/* ── camada 1: blob "líquido" verde que cresce devagar (gooey suave) ── */
.academia-card::before {
  content: '';
  position: absolute; z-index: 0;
  left: 50%; bottom: -30%;
  width: 150%; aspect-ratio: 1;
  transform: translateX(-50%) scale(0);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.18), transparent 45%),
    conic-gradient(from 130deg, #2BADA0, #29b0a3, #1e8a7f, #2fbcad, #2BADA0);
  border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
  filter: blur(4px);
  opacity: 0;
  transition: transform 1.3s var(--ease), opacity .9s var(--ease);
  animation: liquid-morph 16s ease-in-out infinite;
  animation-play-state: paused;
}
.academia-card:hover::before {
  transform: translateX(-50%) scale(1.7);
  opacity: 1;
  animation-play-state: running;
}

/* ── camada 2: reflexo de vidro bem suave (varredura lenta) ── */
.academia-card::after {
  content: '';
  position: absolute; z-index: 1; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
              transparent 30%, rgba(255,255,255,.18) 48%,
              rgba(255,255,255,.05) 56%, transparent 72%);
  transform: translateX(-140%) skewX(-12deg);
  opacity: 0;
  transition: transform 1.5s var(--ease), opacity .6s var(--ease);
}
.academia-card:hover::after { transform: translateX(140%) skewX(-12deg); opacity: 1; }

/* ── estado verde + levitação suave + brilho de vidro discreto ── */
.academia-card:hover {
  transform: translateY(-6px);
  background: var(--grad-brand);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 20px 44px rgba(43,173,160,.26),
              inset 0 1px 0 rgba(255,255,255,.22);
}

@keyframes liquid-morph {
  0%, 100% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; }
  33%      { border-radius: 52% 48% 44% 56% / 50% 56% 44% 50%; }
  66%      { border-radius: 50% 50% 54% 46% / 44% 52% 48% 56%; }
}

/* ── logo num "vidro" que ganha leve brilho no hover ── */
.academia-logo {
  width: 100%; height: 5.5rem; padding: .85rem 1.25rem;
  border-radius: 1.25rem; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(15,23,42,.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.academia-card:hover .academia-logo {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.academia-logo img { max-width: 100%; max-height: 3.25rem; width: auto; object-fit: contain; }
.academia-card .academia-title { transition: color .8s var(--ease); }
.academia-card .academia-desc  { color: #5b6573; transition: color .8s var(--ease); }
.academia-card:hover .academia-title { color: #fff; }
.academia-card:hover .academia-desc  { color: rgba(255,255,255,.92); }

/* acessibilidade: sem movimento contínuo p/ quem pediu menos animação */
@media (prefers-reduced-motion: reduce) {
  .academia-card::before { animation: none; transition: transform .3s ease, opacity .3s ease; }
  .academia-card::after  { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   SERVIÇOS — badge da logo (Hackerspace · Microcrédito · Ação em Rede) */
.servico-logo {
  width: 7rem; height: 7rem; margin-bottom: 1.5rem;
  padding: .7rem; border-radius: 1.5rem;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.04);
  position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* halo suave na cor do serviço */
.servico-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #2BADA0) 22%, transparent);
  opacity: 0; transition: opacity .45s var(--ease);
}
.servico-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.servico-card:hover .servico-logo {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c, #2BADA0) 22%, rgba(15,23,42,.10));
}
.servico-card:hover .servico-logo::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   MISSÃO · VISÃO · VALORES — cards com ícone, gradiente e brilho no hover */
.mvv-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: stretch;
}
.mvv-cell { position: relative; }

.mvv-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--mvv-c) 22%, #e5e7eb);
  border-radius: 22px;
  padding: 2.6rem 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), border-color .4s var(--ease);
}
/* faixa de gradiente no topo */
.mvv-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--mvv-c), color-mix(in srgb, var(--mvv-c) 45%, #fff));
}
/* halo de cor que cresce no hover (profundidade) */
.mvv-card::after {
  content: '';
  position: absolute; top: -38%; left: 50%;
  width: 130%; aspect-ratio: 1;
  transform: translateX(-50%) scale(.6);
  background: radial-gradient(circle, color-mix(in srgb, var(--mvv-c) 16%, transparent) 0%, transparent 60%);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mvv-cell:hover .mvv-card {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--mvv-c) 50%, #fff);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--mvv-c) 28%, transparent);
}
.mvv-cell:hover .mvv-card::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* cor de cada card */
/* todas as peças no mesmo tom de amarelo */
.mvv-green  { --mvv-c: #EC9A14; }
.mvv-yellow { --mvv-c: #EC9A14; }
.mvv-gray   { --mvv-c: #EC9A14; }

/* ícone em badge com gradiente */
.mvv-icon {
  position: relative; z-index: 1;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  margin-bottom: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--mvv-c), color-mix(in srgb, var(--mvv-c) 58%, #fff));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--mvv-c) 35%, transparent);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.mvv-icon svg { width: 30px; height: 30px; }
.mvv-cell:hover .mvv-icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }

/* tipografia */
.mvv-title   { position: relative; z-index: 1; font-size: clamp(1.35rem, 1rem + 1.4vw, 1.7rem); font-weight: 800; line-height: 1.1; margin: 0 0 .55rem; letter-spacing: -.01em; color: #1f2937; }
.mvv-eyebrow { position: relative; z-index: 1; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--mvv-c); }
.mvv-desc    { position: relative; z-index: 1; font-size: .96rem; line-height: 1.55; margin: 0; color: #6b7280; }
.mvv-tags    { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.mvv-tags li { font-size: .8rem; font-weight: 600; padding: .24rem .72rem; border-radius: 999px; color: var(--mvv-c); background: color-mix(in srgb, var(--mvv-c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--mvv-c) 22%, #fff); }

@media (max-width: 767px) {
  .mvv-row { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mvv-card, .mvv-icon { transition: none; }
  .mvv-cell:hover .mvv-card { transform: none; }
  .mvv-cell:hover .mvv-icon { transform: none; }
  .mvv-card::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   ITEM 7 · CARDS DA "AÇÃO EM REDE" — estilo VAZADO (contorno na cor da
   instituição, fundo claro). Cada card usa sua própria cor (--c1). */
.parceiro-card {
  background: #fff;
  border: 2px solid var(--c1);
  color: var(--c1);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.parceiro-card:hover {
  background: color-mix(in srgb, var(--c1) 8%, #fff);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--c1) 22%, transparent);
  transform: translateY(-4px);
}
.parceiro-logo {
  width: 100%; height: 5.5rem; margin: 0 auto 1.25rem;
  border-radius: 1rem; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: .8rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--c1) 28%, #fff);
}
.parceiro-logo img { max-width: 100%; max-height: 3.6rem; width: auto; object-fit: contain; }
/* logo HSA: PNG já colorido em #2271B1 (com transparência) — sem filtro/mask */
.parceiro-card h3 { color: var(--c1); }
.parceiro-card p  { color: #475569; }   /* corpo em cinza escuro = legível (AA) */

/* ─────────────────────────────────────────────────────────────────────
   CABEÇALHO compartilhado */
#site-header { display: block; }
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #eef1f4;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
/* fina faixa de gradiente da marca no topo — dá "vida" ao header */
.site-nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-line);
}
.site-nav__inner {
  max-width: 72rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
/* LOGO — elemento de destaque do cabeçalho (item 1: maior e mais visível) */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img {
  height: 3.7rem;                /* ~59px — logo ampliada, ainda dentro da barra de 80px */
  width: auto; max-width: 56vw;  /* trava p/ não encostar no menu em telas pequenas */
  object-fit: contain;
  transition: transform .3s var(--ease);
}
@media (max-width: 480px) { .site-logo img { height: 3.1rem; } }
.site-logo:hover img { transform: scale(1.04); }

.site-menu { display: none; align-items: center; gap: .35rem; }
@media (min-width: 900px) { .site-menu { display: flex; } }

.site-link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .8rem; border-radius: .65rem;
  font-weight: 600; font-size: .98rem; color: #334155;
  background: transparent; border: none; cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.site-link:hover { color: var(--brand-deep); background: var(--brand-50); }
.site-link svg { width: .8rem; height: .8rem; transition: transform .25s var(--ease); }
.site-link.is-active {
  color: #fff; background: var(--grad-brand);
  box-shadow: 0 6px 16px rgba(43,173,160,.32);
}
.site-link.is-active:hover { color:#fff; }

/* Dropdown desktop */
.site-dd { position: relative; }
.site-dd__panel {
  position: absolute; top: calc(100% + .55rem); left: 0; min-width: 13rem;
  background: #fff; border: 1px solid #eef1f4; border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15,23,42,.14);
  padding: .45rem; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 60;
}
.site-dd:hover .site-dd__panel,
.site-dd:focus-within .site-dd__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.site-dd:hover .site-link svg { transform: rotate(180deg); }
.site-dd__item {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem; border-radius: .6rem;
  font-size: .95rem; font-weight: 500; color: #475569;
  transition: color .2s, background .2s;
}
.site-dd__item:hover { color: var(--brand-deep); background: var(--brand-50); }
.site-dd__item::before {
  content: ''; width: .35rem; height: .35rem; border-radius: 50%;
  background: var(--brand); opacity: .55; flex: 0 0 auto;
}

/* Botões de ação do header */
.site-actions { display: none; align-items: center; gap: .6rem; }
@media (min-width: 900px) { .site-actions { display: flex; } }
.btn-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .92rem; font-weight: 600; transition: all .25s var(--ease);
}
.btn-outline { border: 1.5px solid var(--brand); color: var(--brand-deep); }
.btn-outline:hover { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(43,173,160,.3); }
.btn-solid { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 16px rgba(43,173,160,.3); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,173,160,.42); }
.btn-pill svg { width: 1.05rem; height: 1.05rem; }

/* Botão hambúrguer + menu mobile */
.site-burger { display: inline-flex; padding: .55rem; border-radius: .6rem; color: #334155; border: none; background: transparent; cursor: pointer; }
.site-burger:hover { color: var(--brand-deep); background: var(--brand-50); }
@media (min-width: 900px) { .site-burger { display: none; } }

.site-mobile { display: none; background: #fff; border-top: 1px solid #eef1f4; padding: 1rem 1.5rem 1.5rem; }
.site-mobile.open { display: block; }
.site-mobile a, .site-mobile button { font-size: 1.05rem; }
.site-mobile__link { display: block; padding: .7rem .25rem; font-weight: 600; color: #334155; }
.site-mobile__link:hover, .site-mobile__link.is-active { color: var(--brand-deep); }
.site-mobile__group > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .25rem; font-weight: 600; color: #334155; background: none; border: none; cursor: pointer;
}
.site-mobile__sub { display: none; padding: .15rem 0 .35rem .9rem; border-left: 2px solid var(--brand-50); margin-left: .25rem; }
.site-mobile__sub.open { display: block; }
.site-mobile__sub a { display: block; padding: .5rem .25rem; color: #5b6573; font-weight: 500; }
.site-mobile__sub a:hover { color: var(--brand-deep); }
.site-mobile__arrow { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.site-mobile__arrow.open { transform: rotate(180deg); }
.site-mobile__cta { display: flex; gap: .6rem; margin-top: 1rem; }
.site-mobile__cta .btn-pill { flex: 1; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────
   RODAPÉ compartilhado — enxuto (~1/3 do anterior) */
.site-footer { background: #0c1322; color: #e2e8f0; position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-line); opacity: .9; z-index: 2;
}
/* ITEM 10 · onda no topo do rodapé — SVG leve, na cor do rodapé, responsivo */
.site-footer__wave { line-height: 0; margin-top: -56px; margin-bottom: -1px; position: relative; z-index: 1; }
.site-footer__wave svg { display: block; width: 100%; height: 56px; }
@media (max-width: 640px) { .site-footer__wave { margin-top: -36px; } .site-footer__wave svg { height: 36px; } }
.site-footer__wave path { fill: #0c1322; }
.site-footer__inner {
  max-width: 72rem; margin: 0 auto; padding: 2.25rem 1.5rem 1.5rem;
  display: grid; gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .site-footer__inner { grid-template-columns: 1.2fr 1fr 1.3fr; align-items: start; }
}
.site-footer__logo { height: 2.4rem; width: auto; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: .9rem; }
.site-footer h4 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; margin-bottom: .85rem; }
.site-footer a { color: #cbd5e1; transition: color .2s; }
.site-footer a:hover { color: var(--brand); }
.site-footer__contact li { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; font-size: .95rem; color: #cbd5e1; }
.site-footer__tag { font-size: .72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.site-footer__social { display: flex; gap: .6rem; margin-top: 1rem; }
.site-footer__social a { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; background: rgba(255,255,255,.08); }
.site-footer__social a:hover { background: var(--brand); transform: translateY(-2px); }
.site-footer__social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.site-map { border-radius: .9rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); aspect-ratio: 16 / 9; background: #16213a; }
.site-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.site-footer__bottom {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  font-size: .85rem; color: #7c889b;
}

/* ─────────────────────────────────────────────────────────────────────
   EFEITO DE CURSOR (halo que segue o mouse + ponto preciso) */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; will-change: transform; }
.cursor-dot  { width: 7px; height: 7px; background: var(--brand); transform: translate(-50%, -50%); }
.cursor-ring {
  width: 34px; height: 34px; border: 2px solid rgba(43,173,160,.55);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-hot { width: 56px; height: 56px; border-color: rgba(245,166,35,.9); background: rgba(245,166,35,.1); }
.cursor-hidden .cursor-dot, .cursor-hidden .cursor-ring { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none !important; } }

/* Foco visível acessível em toda a navegação */
.site-link:focus-visible, .site-dd__item:focus-visible, .btn-pill:focus-visible,
.site-footer a:focus-visible, .site-mobile a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: .5rem;
}

/* ─────────────────────────────────────────────────────────────────────
   COR DE FUNDO (global) — um campo de cor único e contínuo
   Sem faixas/bordas: o site inteiro respira sobre o mesmo gradiente suave,
   fixo na viewport, sem cortes entre seções. */

/* 1 · campo de cor contínuo, fixo atrás de TUDO (não se move ao rolar) */
html {
  background-color: #f4f8f7;
  background-image:
    radial-gradient(60vw 60vw at 8% 2%,   rgba(43,173,160,.20), transparent 60%),
    radial-gradient(55vw 55vw at 95% 22%, rgba(245,166,35,.12), transparent 60%),
    radial-gradient(62vw 62vw at 12% 68%, rgba(43,173,160,.14), transparent 62%),
    radial-gradient(58vw 58vw at 96% 96%, rgba(245,166,35,.11), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* deixa o fundo do html aparecer através do body e das seções */
body.bg-white { background-color: transparent; }

/* 2 · as faixas que antes eram cinza/mint ficam transparentes:
   nada de banda retangular cortando o gradiente */
section.bg-gray-50 { background-color: transparent; }
/* …e sem linhas divisórias entre seções (também "cortam" o fundo) */
section.border-b { border-bottom-color: transparent; }

/* 3 · acento de cor nos cards: sombra com tinta teal no hover
   (especificidade body … vence as definições inline, mantendo o "subir") */
body .card-hover:hover { box-shadow: 0 18px 42px rgba(43,173,160,.20); }