/* =========================================================
   Cota Perfeita — camada visual profissional (2026-10)
   Acabamento, microinterações e animações de entrada.
   Carregada por último em todas as páginas públicas.
   ========================================================= */
:root {
  --cpp-navy: #0a2540;
  --cpp-blue: #0b5ed7;
  --cpp-red: #d30721;
  --cpp-red-dark: #aa0016;
  --cpp-ease: cubic-bezier(.2, .75, .2, 1);
  --cpp-shadow-sm: 0 2px 6px rgba(10, 37, 64, .06), 0 8px 24px rgba(10, 37, 64, .06);
  --cpp-shadow-lg: 0 10px 24px rgba(10, 37, 64, .10), 0 24px 60px rgba(10, 37, 64, .12);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(211, 7, 33, .14); color: inherit; }
[id] { scroll-margin-top: 96px; }
h1, h2, h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
img { height: auto; }

/* ---------- Acessibilidade: foco visível consistente ---------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(11, 94, 215, .55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Cabeçalho: sombra ao rolar ---------- */
.site-header { transition: box-shadow .3s var(--cpp-ease), background-color .3s var(--cpp-ease); }
.site-header.cpp-scrolled { box-shadow: 0 10px 30px rgba(10, 37, 64, .10); }

/* ---------- Cartões: elevação suave ---------- */
:where(.side-card, .brand-card, .press-card, .opp-card, .guide-card, .criteria-grid > *, .trust-row > *, .related a, .card, .feature-card, .page-card, .ranking-box) {
  transition: transform .35s var(--cpp-ease), box-shadow .35s var(--cpp-ease), border-color .35s var(--cpp-ease);
}
@media (hover: hover) {
  :where(.brand-card, .press-card, .opp-card, .guide-card, .criteria-grid > *, .related a, .card, .feature-card, .page-card):hover {
    transform: translateY(-4px);
    box-shadow: var(--cpp-shadow-lg);
  }
}

/* ---------- Botões: brilho e resposta ao toque ---------- */
:where(.btn, .nav-cta, .button, button[type="submit"]) {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--cpp-ease), box-shadow .25s var(--cpp-ease), filter .2s;
}
:where(.btn.primary, .nav-cta, button[type="submit"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .28) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--cpp-ease);
  pointer-events: none;
}
@media (hover: hover) {
  :where(.btn, .nav-cta, .button, button[type="submit"]):hover { transform: translateY(-1px); }
  :where(.btn.primary, .nav-cta, button[type="submit"]):hover { box-shadow: 0 10px 24px rgba(211, 7, 33, .28); }
  :where(.btn.primary, .nav-cta, button[type="submit"]):hover::after { transform: translateX(120%); }
}
:where(.btn, .nav-cta, .button, button[type="submit"]):active { transform: translateY(0) scale(.98); }

/* ---------- Heróis: luz ambiente animada ---------- */
:where(.article-hero, .page-hero, .opp-hero, .editorial-hero, .press-article-hero) { position: relative; isolation: isolate; overflow: hidden; }
:where(.article-hero, .page-hero, .opp-hero, .editorial-hero, .press-article-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  right: -18vmax;
  top: -26vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 62%);
  animation: cpp-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cpp-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.12); } }

/* ---------- Tabelas ---------- */
:where(.table-wrap, .content, .article-main) table { border-collapse: separate; border-spacing: 0; }
:where(.table-wrap, .content, .article-main) tbody tr { transition: background-color .2s; }
@media (hover: hover) { :where(.table-wrap, .content, .article-main) tbody tr:hover { background: rgba(11, 94, 215, .045); } }

/* ---------- FAQ ---------- */
details > summary { cursor: pointer; transition: color .2s; }
details > summary:hover { color: var(--cpp-red); }
details[open] > :not(summary) { animation: cpp-open .35s var(--cpp-ease); }
@keyframes cpp-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Passos numerados ---------- */
.steps li > span { transition: transform .35s var(--cpp-ease), box-shadow .35s; }
@media (hover: hover) { .steps li:hover > span { transform: scale(1.08); box-shadow: 0 6px 16px rgba(11, 94, 215, .3); } }

/* ---------- Imagens: entrada suave ---------- */
.cpp-img-fade { opacity: 0; transition: opacity .6s var(--cpp-ease); }
.cpp-img-fade.cpp-loaded { opacity: 1; }

/* ---------- Animação de entrada (só com JS e sem "reduzir movimento") ---------- */
.cpp-anim .cpp-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .75s var(--cpp-ease) var(--cpp-d, 0s), transform .75s var(--cpp-ease) var(--cpp-d, 0s);
  will-change: opacity, transform;
}
.cpp-anim .cpp-reveal.cpp-in { opacity: 1; transform: none; will-change: auto; }

/* ---------- Barra de progresso de leitura ---------- */
.cpp-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--cpp-red), #ff5a6e 45%, var(--cpp-blue));
  pointer-events: none;
}

/* ---------- Voltar ao topo ---------- */
.cpp-top {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 2vw, 26px);
  bottom: 96px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--cpp-navy);
  box-shadow: var(--cpp-shadow-lg);
  font: 800 18px/1 Inter, Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--cpp-ease), transform .3s var(--cpp-ease);
}
.cpp-top.cpp-show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 720px) { .cpp-top { width: 40px; height: 40px; bottom: 84px; } }

/* ---------- WhatsApp flutuante: pulso discreto ---------- */
.float-wa { animation: cpp-pulse 3.2s ease-in-out 2s infinite; }
@keyframes cpp-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(18, 140, 74, .28); } 50% { box-shadow: 0 10px 26px rgba(18, 140, 74, .28), 0 0 0 10px rgba(37, 211, 102, .12); } }

/* ---------- Respeito a "reduzir movimento" ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cpp-anim .cpp-reveal, .cpp-img-fade { opacity: 1 !important; transform: none !important; }
}

/* ---------- Impressão ---------- */
@media print { .cpp-progress, .cpp-top, .float-wa, .cp-ai-mascot { display: none !important; } }