/* ============================================================
   KEDMA · TECH MYSTIC — Camada de Direção de Arte
   "O ouro é luz sagrada atravessando uma interface de precisão."
   Tradição (relicário · geometria sagrada · película)
   + Tecnologia (HUD · dados · glow neural)
   ============================================================ */

/* ------------------------------------------------------------
   1. SISTEMA DE OURO COM HIERARQUIA DE LUZ (uma só lógica)
   ------------------------------------------------------------ */
:root {
  --gold-deep:    #9C7B3F;   /* traços, símbolos, molduras (o tradicional) */
  --gold:         #C8A96E;   /* UI: botões, links, ícones, bordas */
  --gold-lume:    #E8CC7A;   /* destaque vivo */
  --gold-incand:  #FBF0C4;   /* ápice de luz — só glow/clímax */

  --gold-hi: #E8CC7A;

  /* Gradiente metálico CANÔNICO — usado SÓ no clímax de cada seção */
  --gold-grad: linear-gradient(112deg,
      #9C7B3F 0%, #C8A96E 20%, #FBF0C4 44%,
      #E8CC7A 58%, #C8A96E 76%, #9C7B3F 100%);

  --glow-gold: 0 0 22px rgba(232, 204, 122, 0.42);

  /* rgbas derivados do ouro base #C8A96E = 200,169,110 */
  --line-gold:   rgba(200, 169, 110, 0.30);
  --line-gold-2: rgba(200, 169, 110, 0.55);
  --gold-soft:   rgba(200, 169, 110, 0.10);
}

/* ------------------------------------------------------------
   2. ATMOSFERA — grão de película + vinheta (cinema místico)
   ------------------------------------------------------------ */
body { position: relative; background: #000 !important; }

/* Grão de película — textura analógica sobre o digital */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vinheta — foco cinematográfico ao centro */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9997;
  background: radial-gradient(125% 90% at 50% 28%, transparent 52%, rgba(0,0,0,0.45) 100%);
}

/* ------------------------------------------------------------
   3. CAMADA SIMBÓLICA — uma marca mística por seção
   geometria sagrada · constelação · sinapse · ECG · espiral
   ------------------------------------------------------------ */
.section { overflow: clip; }

/* Luz volumétrica: halo dourado nascendo atrás do conteúdo */
.section::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(56% 44% at 50% -4%,
      rgba(200, 169, 110, 0.10), transparent 68%);
}

/* Símbolo decorativo: grande, no respiro da seção — sentido, não gritado */
.section::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  top: 50%; right: -110px; transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  opacity: 0.09;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 34px rgba(200,169,110,0.3));
}
/* mantém conteúdo acima das camadas */
.section > * { position: relative; z-index: 1; }

/* Cicla os 5 símbolos e alterna o lado para criar ritmo */
.section:nth-of-type(5n+1)::after { background-image: url("assets/symbols/sacred-geometry.svg"); }
.section:nth-of-type(5n+2)::after { background-image: url("assets/symbols/synapse.svg"); left: -130px; right: auto; }
.section:nth-of-type(5n+3)::after { background-image: url("assets/symbols/constellation.svg"); width: 560px; }
.section:nth-of-type(5n+4)::after { background-image: url("assets/symbols/golden-spiral.svg"); left: -110px; right: auto; }
.section:nth-of-type(5n+5)::after { background-image: url("assets/symbols/ecg.svg"); width: 620px; height: 200px; opacity: 0.05; }

/* ------------------------------------------------------------
   4. CLÍMAX TIPOGRÁFICO — gradiente metálico só nos destaques
   ------------------------------------------------------------ */
.h-display .gold-mark, .h-1 .gold-mark, .h-2 .gold-mark,
.hero__title .gold-mark, .hero__title em,
.founder__name .gold-mark, .quote__text .gold-mark,
.story__name .gold-mark {
  background: var(--gold-grad);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(232,204,122,0.28));
}

/* Eyebrow: vira instrumento de precisão (HUD) */
.eyebrow { color: var(--gold-lume); }
.eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }

/* ------------------------------------------------------------
   5. MOLDURA DE PRECISÃO — cantoneiras (HUD ∩ relicário)
   ------------------------------------------------------------ */
.card, .pillar, .quote, .tier, .podium__card, .founder, .team__card {
  position: relative;
}
.card::before, .pillar::before, .quote::before,
.tier::before, .podium__card::before, .founder::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      var(--line-gold-2), transparent 30%, transparent 70%, var(--line-gold-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5; transition: opacity 0.3s ease;
}
.card:hover::before, .pillar:hover::before, .quote:hover::before,
.tier:hover::before, .podium__card:hover::before, .founder:hover::before {
  opacity: 1;
}

/* Letras do método P.L.A.N.O.R — relicário iluminado */
.pillar__letter {
  background: var(--gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px rgba(232,204,122,0.35));
}

/* ------------------------------------------------------------
   6. CTAs — botão de ouro com brasa interna
   ------------------------------------------------------------ */
.btn--primary {
  background: linear-gradient(180deg, var(--gold-lume), var(--gold)) !important;
  color: #1a1206 !important;
  box-shadow: 0 0 0 1px rgba(232,204,122,0.5),
              0 14px 34px -12px rgba(200,169,110,0.6),
              0 0 26px -2px rgba(232,204,122,0.5),
              inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--gold-incand), var(--gold-lume)) !important;
  box-shadow: 0 0 0 1px rgba(251,240,196,0.6),
              0 16px 40px -10px rgba(232,204,122,0.7),
              0 0 36px 0 rgba(232,204,122,0.55),
              inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* ------------------------------------------------------------
   7. TRATAMENTO DE IMAGEM — médicos cinematográficos
   integra a foto ao breu dourado (duotone sutil + contraste)
   ------------------------------------------------------------ */
.hero img, .page-hero img, .founder img, .hero--banner img {
  filter: contrast(1.06) saturate(0.92) brightness(0.96) sepia(0.12) hue-rotate(-8deg);
}

/* ------------------------------------------------------------
   8. ACESSIBILIDADE / MOVIMENTO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn--primary, .card::before, .pillar::before { transition: none; }
}
@media (max-width: 720px) {
  .section::after { width: 300px; height: 300px; opacity: 0.05; right: -90px; }
  .section:nth-of-type(5n+2)::after,
  .section:nth-of-type(5n+4)::after { left: -90px; }
}

/* ============================================================
   9. MANIFESTO — fade-in sequencial, nitidez crescente
   "Sem direção..." → "Sem estratégia..." → "...RESULTADO."
   ============================================================ */
.mf-reveal { display: grid; gap: 6px; }
.mf-line {
  display: block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1),
              filter 1s cubic-bezier(.2,.7,.2,1),
              transform 1s cubic-bezier(.2,.7,.2,1);
}
/* Estados-alvo: cada frase mais nítida e mais intensa que a anterior */
.mf-reveal.mf-in .mf-line--1 { opacity: 0.50; filter: blur(0.8px); transform: none; transition-delay: 0s;    color: var(--text-muted); }
.mf-reveal.mf-in .mf-line--2 { opacity: 0.78; filter: blur(0.3px); transform: none; transition-delay: 0.5s;  color: var(--text-soft); }
.mf-reveal.mf-in .mf-line--3 { opacity: 1;    filter: blur(0);     transform: none; transition-delay: 1.05s; color: var(--paper);
  text-shadow: 0 0 22px rgba(232,204,122,0.18); }

@media (prefers-reduced-motion: reduce) {
  .mf-line { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   10. ECOSSISTEMA — pacotes com hierarquia e entregáveis vivos
   ============================================================ */
/* Reveal de entrada (stagger) */
.tier { opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease, border-color .3s ease; }
.tier.tier-in { opacity: 1; transform: none; transition-delay: var(--tier-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .tier { opacity: 1 !important; transform: none !important; }
}

/* Entregáveis — coluna com marca d'água do logo do produto */
.tier__list {
  list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 6px;
  position: relative;
}
/* Logo oficial do produto — canto superior direito do box */
.tier::after {
  content: ""; position: absolute; top: 22px; right: 22px; z-index: 3;
  width: 50px; height: 50px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.95;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
  pointer-events: none;
}
.tier--plano-r::after   { background-image: url("assets/logos/logo-plano-r.png"); }
.tier--r1::after        { background-image: url("assets/logos/logo-r1.png"); }
.tier--exclusive::after { background-image: url("assets/logos/logo-exclusive.png"); }

.tier__list li {
  position: relative; z-index: 1;
  padding: 7px 10px 7px 34px;
  border-radius: 9px;
  line-height: 1.45; color: var(--text-soft);
  transition: background .25s ease, transform .25s ease,
              color .25s ease, box-shadow .25s ease;
}
.tier__list li::before {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 19px; height: 19px; border-radius: 5px;
  background-color: var(--gold-soft);
  border: 1px solid var(--line-gold-2);
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8CC7A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
/* HOVER — o entregável ressalta */
.tier__list li:hover {
  background: linear-gradient(90deg, rgba(200,169,110,0.14), rgba(200,169,110,0.02));
  box-shadow: inset 2px 0 0 var(--gold);
  color: var(--paper);
  transform: translateX(5px);
}
.tier__list li:hover::before {
  background-color: rgba(232,204,122,0.22);
  border-color: var(--gold-lume);
  box-shadow: 0 0 10px rgba(232,204,122,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .tier__list li, .tier__list li::before { transition: none; }
}

/* Divisor "Tudo do X, mais:" — vira marco de upgrade */
.tier__list li.tier__divider {
  padding: 16px 0 4px 0; margin-top: 10px;
  border-top: 1px solid var(--line-gold);
  font: 700 11px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-lume);
  border-radius: 0;
}
.tier__list li.tier__divider::before { display: none; }
.tier__list li.tier__divider::after { content: " ↑"; color: var(--gold); }
/* divisor é rótulo, não item clicável → sem hover de item */
.tier__list li.tier__divider:hover {
  background: none; transform: none; box-shadow: none; color: var(--gold-lume);
}

/* Bônus — estrela dourada, item premium */
.tier__list li.tier__bonus { color: var(--gold-lume); font-weight: 500; }
.tier__list li.tier__bonus::before {
  background-color: rgba(232,204,122,0.14);
  background-size: 13px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8CC7A' stroke='%23E8CC7A' stroke-width='1'%3E%3Cpath d='M12 2l2.9 6.3L22 9.2l-5 4.9 1.2 7L12 17.8 5.8 21l1.2-7-5-4.9 7.1-.9z'/%3E%3C/svg%3E");
}

/* Badge de destaque */
.tier__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; z-index: 4;
  font: 700 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: #1a1206; padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-lume), var(--gold));
  box-shadow: 0 8px 20px -8px rgba(232,204,122,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tier__badge--top {
  color: #1a1206;
  background: linear-gradient(180deg, #FFF7DF, var(--gold-lume));
  box-shadow: 0 8px 24px -6px rgba(251,240,196,0.7), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Pacote em destaque (meio) — elevação e moldura mais viva */
.tier--featured {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,169,110,0.10), transparent 60%),
    var(--ink-3);
  transform: translateY(20px) scale(1.0);
}
.tier--featured.tier-in { transform: scale(1.03); }
.tier--featured::before { opacity: 1 !important;
  background: linear-gradient(135deg, var(--gold), var(--line-gold) 35%, var(--line-gold) 65%, var(--gold)) !important; }

/* Pacote topo (Exclusive) — banho de ouro premium */
.tier--top {
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(232,204,122,0.10), transparent 58%),
    linear-gradient(180deg, rgba(200,169,110,0.05), transparent 40%),
    var(--ink-2);
}
.tier--top .tier__name { background: var(--gold-grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

@media (max-width: 900px) {
  .tier--featured.tier-in { transform: none; }
  .tier--featured { transform: translateY(20px); }
}

/* ============================================================
   11. FAIXA DOURADA — ticker de aprovados (topo da página)
   ============================================================ */
.ticker-bar {
  position: sticky; top: 0; z-index: 70; overflow: hidden;
  background: linear-gradient(90deg,
      #9C7B3F 0%, #C8A96E 22%, #FBF0C4 50%, #C8A96E 78%, #9C7B3F 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.28),
              0 2px 16px -6px rgba(232,204,122,0.55);
}
/* navbar gruda logo ABAIXO da faixa (altura medida via JS) */
.header { top: var(--ticker-h, 31px) !important; }
.ticker-viewport { overflow: hidden; }
.ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 9px 0;
  animation: ticker-scroll 75s linear infinite;
  will-change: transform;
}
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 4px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase;
  color: #1a1206;
}
.ticker-item strong { font-weight: 800; }
.ticker-item .det {
  font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.72;
}
/* separador em losango (sem emoji, no espírito do brandbook) */
.ticker-item::before {
  content: ""; width: 5px; height: 5px; margin: 0 14px 0 8px;
  background: #1a1206; opacity: 0.35; transform: rotate(45deg);
  align-self: center; flex: none;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 600px) {
  .ticker-item { font-size: 11px; }
  .ticker-track { animation-duration: 55s; }
}