/* Corrida do Faturamento — camada visual premium (carregada depois de styles-*.css) */

:root {
  --font-display: "Playfair Display", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --background: oklch(12.5% .006 60);
  --card: oklch(16% .008 70);
  --muted-foreground: oklch(74% .02 85);
  --border: oklch(80% .08 85 / .14);

  --champagne: oklch(93% .05 92);
  --gold-line: oklch(85% .12 88 / .5);
  --gradient-gold: linear-gradient(100deg, #8f6a25 0%, #d8b766 18%, #fbeec4 36%, #d6ad57 54%, #f1d993 72%, #a37a2e 100%);
  --gradient-dark: linear-gradient(165deg, oklch(18.5% .01 75), oklch(12.5% .006 60) 72%);
  --hairline-gold: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  --shadow-deep: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 60px -34px rgb(0 0 0 / .85);
  --glow-gold: 0 0 0 1px oklch(83% .13 88 / .2), 0 30px 90px -45px oklch(83% .15 88 / .4);
  --ease-lux: cubic-bezier(.22, 1, .36, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  letter-spacing: .005em;
  background-image:
    radial-gradient(1200px 620px at 50% -18%, oklch(83% .15 88 / .11), transparent 62%),
    radial-gradient(800px 520px at 100% 8%, oklch(68% .2 40 / .05), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, oklch(83% .15 88 / .045), transparent 60%);
}

/* Grão de filme + vinheta: dá textura e profundidade ao fundo escuro */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  background: radial-gradient(130% 90% at 50% 30%, transparent 55%, rgb(0 0 0 / .55));
}

::selection {
  background: oklch(83% .15 88 / .32);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: oklch(70% .1 80 / .45) transparent;
}

/* ---------- Tipografia ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

.text-gold.font-black,
.tabular-nums,
li .w-9.font-black,
li .w-8.font-black {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

.text-gold {
  color: transparent;
  background-image: var(--gradient-gold);
  background-size: 200% 100%;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Títulos de seção com filete dourado */
main section > h2.text-xl {
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.95rem);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.15;
}
main section > h2.text-xl::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 1px;
  margin-bottom: .9rem;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}
main section > h2.text-xl + p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  margin-top: .35rem;
  color: var(--muted-foreground);
}

main section.mt-10 {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

/* ---------- Cabeçalho e navegação ---------- */

header.sticky {
  background: rgb(10 9 7 / .7);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: transparent;
}
header.sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--hairline-gold);
  opacity: .6;
}
header.sticky > div {
  padding-top: .9rem;
  padding-bottom: .9rem;
}
header.sticky a img {
  box-shadow: 0 0 0 1px oklch(85% .12 88 / .35), 0 8px 24px -10px oklch(83% .15 88 / .6);
}
header.sticky .tracking-\[0\.2em\] {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .24em;
}

header nav a {
  position: relative;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: color .4s var(--ease-lux);
}
header nav a::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .3rem;
  height: 1px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s var(--ease-lux);
}
header nav a:hover::after,
header nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
header nav a[aria-current="page"] {
  color: var(--champagne);
}

nav.fixed.bottom-0 {
  background: rgb(10 9 7 / .85);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-top-color: oklch(85% .12 88 / .16);
}
nav.fixed.bottom-0 a {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 9px;
}

/* ---------- Superfícies ---------- */

.card-gold,
.card-silver,
.card-bronze {
  background:
    linear-gradient(90deg, transparent 10%, var(--edge, oklch(85% .12 88 / .55)) 50%, transparent 90%) top / 100% 1px no-repeat,
    var(--gradient-dark);
}
.card-gold {
  border-color: oklch(85% .12 88 / .26);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 40px 80px -42px rgb(0 0 0 / .95), 0 0 90px -45px oklch(83% .15 88 / .45);
}
.card-silver {
  --edge: oklch(92% .01 250 / .45);
  border-color: oklch(86% .01 250 / .2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 40px 80px -42px rgb(0 0 0 / .95), 0 0 70px -45px oklch(86% .01 250 / .35);
}
.card-bronze {
  --edge: oklch(75% .1 55 / .5);
  border-color: oklch(68% .11 55 / .24);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 40px 80px -42px rgb(0 0 0 / .95), 0 0 70px -45px oklch(68% .11 55 / .35);
}

.surface-glass {
  background: linear-gradient(170deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012));
  border-color: rgb(255 255 255 / .07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 24px 50px -32px rgb(0 0 0 / .85);
}
.surface-glass.divide-y > * {
  border-color: rgb(255 255 255 / .06);
}

.shine::after {
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .14) 50%, transparent 62%);
  animation-duration: 7s;
}

/* Linhas do ranking */
li.animate-rise {
  transition: translate .5s var(--ease-lux), border-color .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
li.animate-rise:hover {
  translate: 0 -2px;
  border-color: oklch(85% .12 88 / .32);
}
.h-1\.5.bg-secondary {
  height: 3px;
  background: rgb(255 255 255 / .07);
}

/* ---------- Hero ---------- */

main > section.relative.card-gold {
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 50% 0%, oklch(83% .15 88 / .13), transparent 65%),
    var(--gradient-dark);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
}
main > section.relative.card-gold::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid oklch(85% .12 88 / .12);
  border-radius: calc(1.5rem - 4px);
  pointer-events: none;
}
main > section.relative.card-gold > img {
  box-shadow: 0 0 0 1px oklch(85% .12 88 / .4), 0 0 0 8px oklch(85% .12 88 / .05), 0 24px 60px -18px oklch(83% .15 88 / .55);
}
main > section.relative.card-gold h1 {
  font-size: clamp(2.7rem, 1.4rem + 5.2vw, 5.4rem);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.02;
  margin-top: 2rem;
  animation: lux-sheen 10s ease-in-out infinite;
}
main > section.relative.card-gold h1 + p {
  margin-top: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5em;
  color: var(--champagne);
  opacity: .75;
}
main > section.relative.card-gold p.mt-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, .8rem + 1.6vw, 2rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .14em;
}
main > section.relative.card-gold p.mt-6::before,
main > section.relative.card-gold p.mt-6::after {
  content: "";
  flex: 0 0 clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
main > section.relative.card-gold p.mt-6::after {
  background: linear-gradient(270deg, transparent, var(--gold-line));
}
@media (max-width: 480px) {
  main > section.relative.card-gold p.mt-6 {
    gap: .6rem;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  main > section.relative.card-gold p.mt-6::before,
  main > section.relative.card-gold p.mt-6::after {
    flex-basis: .9rem;
  }
}

/* ---------- Botões e campos ---------- */

.bg-gold {
  background-image: var(--gradient-gold);
  background-size: 200% 100%;
  background-position: 20% 0;
}
a.bg-gold,
button.bg-gold {
  color: #1c1508;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .25), 0 14px 34px -14px oklch(83% .15 88 / .65);
  transition: background-position .9s var(--ease-lux), translate .4s var(--ease-lux), box-shadow .4s var(--ease-lux);
}
a.bg-gold {
  padding: 1rem 2.1rem;
}
a.bg-gold:hover,
button.bg-gold:hover:not(:disabled) {
  background-position: 85% 0;
  translate: 0 -1px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(0 0 0 / .25), 0 20px 44px -14px oklch(83% .15 88 / .8);
}

input,
select,
textarea {
  background-color: rgb(255 255 255 / .035) !important;
  border-color: rgb(255 255 255 / .1) !important;
  border-radius: .85rem !important;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
input:focus,
select:focus,
textarea:focus {
  border-color: oklch(83% .15 88 / .6) !important;
  background-color: rgb(255 255 255 / .05) !important;
  box-shadow: 0 0 0 4px oklch(83% .15 88 / .12);
}
input::placeholder {
  color: oklch(70% .015 85 / .7);
}

/* ---------- Detalhes ---------- */

.border-success\/40.rounded-full {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  letter-spacing: .14em;
  font-size: .66rem;
  background: oklch(75% .17 150 / .06);
}
.border-success\/40.rounded-full::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: lux-live 2.4s ease-out infinite;
}

main img.rounded-2xl {
  box-shadow: 0 0 0 1px oklch(85% .12 88 / .2), 0 30px 60px -30px rgb(0 0 0 / .9);
}

main > footer {
  border-top-color: transparent;
  background: var(--hairline-gold) top / 100% 1px no-repeat;
  letter-spacing: .04em;
  line-height: 1.8;
}

/* ---------- Movimento ---------- */

@keyframes lux-sheen {
  0%, 100% { background-position: 10% 0; }
  50% { background-position: 90% 0; }
}

@keyframes lux-live {
  0% { box-shadow: 0 0 0 0 oklch(75% .17 150 / .55); }
  70%, 100% { box-shadow: 0 0 0 7px oklch(75% .17 150 / 0); }
}

@keyframes lux-reveal {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section.mt-10 {
      animation: lux-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main > section.relative.card-gold h1,
  .shine::after,
  .border-success\/40.rounded-full::before {
    animation: none;
  }
}