/* ============================================================
   COMPONENTES — cada botão, cartão e input tem UMA implementação
   reutilizada em todas as secções (Parte E.3: sem duplicação).
   ============================================================ */

/* ---------- Botões (Fase 5) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  min-height: 48px; /* alvo de toque >= 44px, Fase 10 */
  border-radius: var(--r-md);
  font-weight: 600; font-size: var(--fs-label);
  cursor: pointer; border: none;
  transition: all var(--dur-fast) var(--ease-premium);
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--color-navy); color: #fff; }
.btn-primary:hover { background: #14166B; transform: translateY(-2px); box-shadow: var(--sh-2); }

.btn-gold { background: var(--color-gold); color: var(--color-navy); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }

.btn-outline { background: transparent; border: 1.5px solid var(--color-navy); color: var(--color-navy); }
.btn-outline:hover { background: rgba(10,11,77,0.06); }
.btn-outline.on-dark { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-outline.on-dark:hover { background: rgba(255,255,255,0.08); }

.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

.btn .spinner {
  display: none; width: 15px; height: 15px;
  border: 2px solid rgba(10,11,77,0.25); border-top-color: var(--color-navy);
  border-radius: 50%; animation: sup-spin .6s linear infinite;
}
.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-label { display: none; }
@keyframes sup-spin { to { transform: rotate(360deg); } }

.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.55);
  transform: scale(0); animation: sup-ripple .6s ease-out; pointer-events: none;
}
@keyframes sup-ripple { to { transform: scale(3); opacity: 0; } }

.magnetic { position: relative; transition: transform .2s var(--ease-premium); }
@media (hover: none) { .magnetic { transition: none; } }

/* Full width em mobile para botões isolados de formulário/CTA — Fase 10 */
@media (max-width: 480px) {
  .hero-ctas .btn, .cta-form .btn { width: 100%; }
}

/* ---------- Cards (Fase 5) ---------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow .25s ease, transform .3s var(--ease-premium), background .4s ease, border-color .4s ease;
}
.card:hover { box-shadow: var(--sh-2); }
.card.lift:hover { transform: translateY(-4px); }

.glass-sweep { position: relative; overflow: hidden; }
.glass-sweep::after {
  content: ""; position: absolute; top: 0; left: -160%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .8s ease; pointer-events: none;
}
.glass-sweep:hover::after { left: 160%; }
@media (prefers-reduced-motion: reduce) { .glass-sweep::after { display: none; } }

.grad-border { position: relative; }
.grad-border::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from 0deg, var(--color-gold), transparent 30%, transparent 70%, var(--color-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
  animation: sup-rotate-border 3.5s linear infinite; animation-play-state: paused;
  pointer-events: none;
}
.grad-border:hover::before { opacity: 1; animation-play-state: running; }
@keyframes sup-rotate-border { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .grad-border::before { animation: none; opacity: .6; } }

/* ---------- Header / navegação principal ----------
   O header fica sempre sobre o Hero (fundo Navy) na posição inicial,
   e sobre um vidro Navy ao fazer scroll — nunca sobre uma superfície
   clara — para que o logótipo e a navegação possam usar sempre a
   variante clara, em qualquer tema (claro/escuro) e em qualquer
   estado de scroll. Resolve a falta de contraste identificada
   (logótipo e nav "desapareciam" sobre o hero/tema escuro). */
header#siteHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  padding: 16px 0; transition: all .3s ease;
}
header#siteHeader.scrolled {
  background: rgba(10,11,77,0.82); backdrop-filter: blur(14px);
  box-shadow: var(--sh-2); padding: 12px 0;
}
html.dark header#siteHeader.scrolled { background: rgba(5,5,48,0.88); }

nav.main-nav { display: flex; align-items: center; justify-content: space-between; }
.logo-wrap img {
  height: 30px;
  filter: brightness(0) invert(1); /* logótipo sempre na variante branca no header */
}
@media (min-width: 768px) { .logo-wrap img { height: 34px; } }

.nav-links { display: none; align-items: center; gap: 24px; }
.nav-links a { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); padding: 8px 0; }
.nav-links a:hover { color: var(--color-gold); }

@media (min-width: 900px) { .nav-links { display: flex; } }

.dark-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: #fff; transition: all .25s ease;
}
.dark-toggle:hover { border-color: var(--color-gold); color: var(--color-gold); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta-persistent { padding: 10px 16px; font-size: 13.5px; min-height: 40px; }
@media (min-width: 640px) { .nav-cta-persistent { padding: 13px 24px; font-size: var(--fs-label); min-height: 48px; } }

/* ---------- Menu mobile — painel de ecrã inteiro (Fase 10) ---------- */
.hamburger {
  display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-sm);
  cursor: pointer; color: #fff;
}
@media (min-width: 900px) { .hamburger { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-mobile-menu);
  background: var(--color-navy);
  display: flex; flex-direction: column;
  padding: 20px;
  transform: translateY(-100%);
  transition: transform .4s var(--ease-premium);
}
.mobile-menu[data-open="true"] { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }
@media (min-width: 900px) { .mobile-menu { display: none; } }

.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-sm);
  color: #fff; cursor: pointer;
}
.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-8); flex: 1; }
.mobile-menu-links a {
  color: #fff; font-family: var(--font-display); font-size: 30px; font-weight: 500;
  padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,0.1);
  min-height: 44px; display: flex; align-items: center;
}
.mobile-menu-cta { margin-top: auto; padding-top: var(--sp-4); display: flex; flex-direction: column; gap: 12px; }
.mobile-menu-cta .btn { width: 100%; }

/* ---------- Cursor personalizado — só com rato real ---------- */
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none;
  z-index: var(--z-cursor); transform: translate(-50%,-50%);
}
#cursor-dot { width: 6px; height: 6px; background: var(--color-gold); }
#cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(245,180,0,0.5);
  transition: width .25s var(--ease-premium), height .25s var(--ease-premium), background .25s ease, border-color .25s ease;
}
#cursor-ring.active { width: 60px; height: 60px; background: rgba(245,180,0,0.08); border-color: var(--color-gold); }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor .tilt { cursor: none; }
@media (hover: none) { #cursor-dot, #cursor-ring { display: none !important; } }
#trail-canvas { position: fixed; inset: 0; z-index: var(--z-trail); pointer-events: none; }
@media (hover: none) { #trail-canvas { display: none; } }

/* ---------- Navegação por capítulos (desktop apenas) ---------- */
#chapter-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: var(--z-chapter-nav); display: none; flex-direction: column; gap: 16px;
}
@media (min-width: 1100px) { #chapter-nav { display: flex; } }
#chapter-nav .dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(10,11,77,0.2);
  cursor: pointer; transition: all .3s ease; position: relative;
  border: none; padding: 0;
}
#chapter-nav .dot.active { background: var(--color-gold); transform: scale(1.5); }
#chapter-nav .dot .label {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--color-ink);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  background: var(--color-card); border: 1px solid var(--color-border); padding: 5px 12px; border-radius: 6px; box-shadow: var(--sh-2);
}
#chapter-nav .dot:hover .label, #chapter-nav .dot:focus-visible .label { opacity: 1; }

/* ---------- WhatsApp fixo (Fase 10 — canal preferencial) ---------- */
.sticky-wa {
  position: fixed; bottom: 20px; right: 20px; z-index: var(--z-whatsapp);
  background: #1E8E5A; color: #fff; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-2);
}
.sticky-wa:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }

/* ---------- Formulário (Fase 9 — Chamada Final) ---------- */
.field { position: relative; margin-bottom: 16px; }
.field input, .field textarea {
  width: 100%; padding: 20px 16px 8px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
  color: #fff; font-family: var(--font-body); font-size: 14px;
  transition: box-shadow .3s ease, border-color .3s ease;
  min-height: 48px;
}
.field textarea { padding-top: 22px; min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 4px rgba(245,180,0,0.14);
}
.field label {
  position: absolute; left: 16px; top: 16px; font-size: 14px; color: rgba(255,255,255,0.55);
  pointer-events: none; transition: all .2s ease;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: 7px; font-size: 10px; color: var(--color-gold);
}
.field .check {
  position: absolute; right: 14px; top: 18px; color: var(--color-success);
  opacity: 0; transform: scale(.6); transition: all .25s var(--ease-premium);
}
.field.valid .check { opacity: 1; transform: scale(1); }
.field .field-error {
  display: none; font-size: 12.5px; color: #FF9B9B; margin-top: 6px;
}
.field.invalid input, .field.invalid textarea { border-color: var(--color-error); }
.field.invalid .field-error { display: block; }

.form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
.form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-gold); flex-shrink: 0; }
.form-consent label { font-size: 12.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.form-consent a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }

.cta-form-fields { transition: opacity .3s ease; }
.cta-form-fields.hidden { display: none; }
.form-success { display: none; text-align: center; padding: 16px 0 4px; }
.form-success.show { display: block; }
.form-success svg { margin: 0 auto 14px; }
.form-success .circle { stroke-dasharray: 70; stroke-dashoffset: 70; animation: sup-draw-circle .6s ease forwards; }
.form-success .check-mark { stroke-dasharray: 20; stroke-dashoffset: 20; animation: sup-draw-check .3s ease forwards .5s; }
@keyframes sup-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes sup-draw-check { to { stroke-dashoffset: 0; } }
.form-success h4 { color: #fff; font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.form-success p { color: rgba(255,255,255,0.7); font-size: 14px; }

/* ---------- Cookie consent (Parte E.5) ---------- */
#cookieBanner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1900;
  max-width: 480px; margin: 0 auto;
  background: var(--color-card); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 20px;
  transform: translateY(140%); transition: transform .5s var(--ease-premium);
}
#cookieBanner[data-visible="true"] { transform: translateY(0); }
#cookieBanner p { font-size: 13px; color: var(--color-grey); margin-bottom: 14px; }
#cookieBanner a { color: var(--color-navy); text-decoration: underline; }
html.dark #cookieBanner a { color: var(--color-gold); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 10px 18px; font-size: 13px; min-height: 40px; }
/* .btn-outline por defeito assume sobre superfície clara; dentro do banner de
   cookies a superfície (var(--color-card)) inverte com o tema, por isso o
   botão "Recusar" precisa da sua própria adaptação — mesmo bug do header. */
html.dark .cookie-actions .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; }
html.dark .cookie-actions .btn-outline:hover { background: rgba(255,255,255,0.1); }