/* ============================================
   NO CAMINHO DA LUZ · RABINO RONY
   Complete Production Stylesheet
   ============================================ */

@font-face {
  font-family: 'PPSupply';
  src: url('assets/fonts/PPSupplyMono-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #FAFAFA;
  color: #171717;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announcement-bar {
  position: relative;
  z-index: 1100;
  height: 32px;
  overflow: hidden;
  background: #A7791F;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
}

.announcement-track {
  display: flex;
  flex-direction: column;
  animation: announcementCycle 12s infinite;
}

.announcement-track span {
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
}

@keyframes announcementCycle {
  0%, 28% { transform: translateY(0); }
  34%, 61% { transform: translateY(-32px); }
  67%, 94% { transform: translateY(-64px); }
  100% { transform: translateY(0); }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: all 0.3s ease;
}

ul, ol {
  list-style: none;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.highlight {
  color: #9F0000;
  font-weight: 700;
}

.text-center {
  text-align: center;
}

/* ---------- STICKY HEADER ---------- */
.site-header {
  position: fixed;
  top: 32px;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 16px 24px;
  transition: all 0.35s ease;
}

.site-header.scrolled { top: 0; }
.site-header .hamburger-btn { display: flex !important; }

.site-header .header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

.site-header .header-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.site-header .hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 20px;
  transition: color 0.3s;
}

.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header .header-actions button,
.site-header .header-actions a {
  color: #fff;
  font-size: 18px;
  transition: color 0.3s;
}

.site-header .nav-links {
  display: none;
  gap: 32px;
  align-items: center;
}

.site-header .nav-links a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: #fff;
  transition: color 0.3s;
}

.site-header .nav-links a:hover {
  color: #9F0000;
}

/* Scrolled state */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 12px 24px;
}

.site-header.scrolled .header-logo {
  color: #171717;
}

.site-header.scrolled .hamburger-btn,
.site-header.scrolled .header-actions button,
.site-header.scrolled .header-actions a {
  color: #171717;
}

.site-header.scrolled .nav-links a {
  color: #171717;
}

.site-header.scrolled .nav-links a:hover {
  color: #9F0000;
}

/* ---------- MOBILE MENU ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.97);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 0;
}

.mobile-menu a:hover {
  color: #9F0000;
}

.mobile-menu .close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #fff;
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 750px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 35%,
    rgba(0, 0, 0, 0.3) 65%,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 24px 48px;
  max-width: 960px;
  width: 100%;
}

.hero-subtitle {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  opacity: 0.75;
}

/* Reviews Carousel */
.reviews-carousel {
  margin-bottom: 28px;
  overflow: hidden;
  height: 50px;
  position: relative;
}

.review-slide {
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

.review-slide.active {
  opacity: 1;
}

.review-stars {
  color: #f59e0b;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 2px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 24px;
}

.hero h1 .outline-text {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.65);
}

.hero-description {
  font-size: 15px;
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto 28px;
  opacity: 0.8;
}

/* CTA Buttons */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #9F0000;
  color: #fff;
  padding: 16px 40px;
  border: none;
  border-radius: 0.375rem;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: inherit;
}

.cta-primary:hover {
  background: #b30000;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(159, 0, 0, 0.4);
}

.cta-primary .arrow {
  transition: transform 0.3s ease;
  font-size: 14px;
}

.cta-primary:hover .arrow {
  transform: translateX(4px);
}

.cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #171717;
  color: #fff;
  padding: 16px 40px;
  border: none;
  border-radius: 0.375rem;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: inherit;
}

.cta-dark:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.sub-cta {
  font-size: 12px;
  margin-top: 14px;
  opacity: 0.6;
  color: #fff;
  line-height: 1.5;
}

.hero-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.callout {
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.75;
  color: #fff;
}

.callout strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
  opacity: 1;
}

/* ---------- SCROLLSPY NAV ---------- */
.scrollspy-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #FAFAFA;
  border-bottom: 1px solid #e5e5e5;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scrollspy-nav::-webkit-scrollbar {
  display: none;
}

.scrollspy-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollspy-nav-inner {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.scrollspy-nav a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a3a3;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.scrollspy-nav a:hover {
  color: #171717;
}

.scrollspy-nav a.active {
  color: #fff;
  background: #000;
  font-weight: 700;
}

/* ---------- WHY THIS SECTION ---------- */
.why-this-section {
  padding: 140px 0 80px;
}

.why-this-paragraph {
  max-width: 880px;
  margin: 0 auto;
  padding: 100px 24px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.why-this-paragraph:first-child {
  padding-top: 0;
}

.why-this-paragraph.visible {
  opacity: 1;
  transform: translateY(0);
}

.why-this-paragraph p {
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #171717;
}

.book-image-center {
  max-width: 480px;
  margin: 100px auto 0;
  text-align: center;
}

.book-image-center img {
  width: 100%;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.25));
}

/* ---------- MENTAL HEALTH WARNING ---------- */
.warning-section {
  background: #9F0000;
  color: #fff;
  padding: 72px 24px 100px;
  text-align: center;
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 24px;
  display: inline-block;
}

.warning-section h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.warning-section p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.85;
  opacity: 0.92;
}

/* ---------- SECTION HEADER (shared) ---------- */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

.section-header h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 20px;
}

.section-header p {
  font-size: 15px;
  line-height: 1.75;
  color: #525252;
}

/* ---------- THE LOOP SECTION ---------- */
.loop-section {
  padding: 120px 0;
}

.loop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.loop-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 32px;
  transition: all 0.35s ease;
}

.loop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}

.loop-card-number {
  font-size: 12px;
  font-weight: 700;
  color: #9F0000;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.loop-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.25;
}

.loop-card p {
  font-size: 14px;
  line-height: 1.75;
  color: #525252;
}

/* ---------- PROTOCOL SECTION ---------- */
.protocol-section {
  padding: 120px 0 80px;
  text-align: center;
}

.protocol-section .section-header {
  margin-bottom: 48px;
}

/* ---------- SPLIT SECTIONS (Image + Text) ---------- */
.split-section {
  padding: 80px 0;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-image {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.6s ease;
}

.split-image:hover img {
  transform: scale(1.03);
}

.split-content .overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9F0000;
  margin-bottom: 12px;
}

.split-content h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.split-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #525252;
  margin-bottom: 24px;
}

.split-grid.reverse .split-image {
  order: 2;
}

.split-grid.reverse .split-content {
  order: 1;
}

/* ---------- HOW IT WORKS ---------- */
.how-it-works-section {
  padding: 100px 0 40px;
  text-align: center;
}

/* ---------- PARTS / PORTFOLIO ---------- */
.parts-section {
  padding: 0 0 120px;
}

.parts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.part-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
}

.part-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.part-card:hover img {
  transform: scale(1.05);
}

.part-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    transparent 100%
  );
}

.part-card-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  color: #fff;
}

.part-card-content .part-number {
  font-size: 11px;
  font-weight: 700;
  color: #9F0000;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}

.part-card-content h3 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1.1;
}

.part-card-content p {
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.75;
}

/* ---------- BENEFITS SECTION ---------- */
.benefits-section {
  padding: 120px 0;
}

.benefits-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.benefits-sticky {
  position: sticky;
  top: 160px;
  align-self: start;
}

.benefits-sticky h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.benefits-sticky p {
  font-size: 15px;
  line-height: 1.8;
  color: #525252;
  margin-bottom: 32px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.benefit-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.benefit-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.benefit-card:hover img {
  transform: scale(1.05);
}

.benefit-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    transparent 100%
  );
}

.benefit-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
}

.benefit-card-content h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ---------- RED DIVIDER ---------- */
.red-divider {
  background: #9F0000;
  padding: 12px 0;
}

/* ---------- COMMUNITY SECTION ---------- */
.community-section {
  background: #EBEBEB;
  padding: 120px 24px;
  text-align: center;
}

.privacy-note {
  font-size: 13px;
  color: #737373;
  margin-top: 20px;
  font-style: italic;
}

/* ---------- REVIEWS COLLAGE ---------- */
.reviews-collage {
  background: #EBEBEB;
  padding: 0 24px 80px;
}

.visual-gallery {
  max-width: 1400px;
  margin: 0 auto;
}

.visual-gallery-landscapes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.visual-gallery-books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.review-image {
  border-radius: 8px;
  overflow: hidden;
  background: #071f52;
}

.visual-gallery-landscapes .review-image {
  aspect-ratio: 16 / 9;
}

.visual-gallery-books .review-image {
  aspect-ratio: 2 / 3;
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.review-image:hover img {
  transform: scale(1.02);
}

/* ---------- OKENDO REVIEWS SUMMARY ---------- */
.okendo-section {
  padding: 80px 24px;
  background: #FAFAFA;
}

.okendo-container {
  max-width: 900px;
  margin: 0 auto;
}

.okendo-header {
  text-align: center;
  margin-bottom: 48px;
}

.okendo-rating-big {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.okendo-stars-big {
  color: #f59e0b;
  font-size: 24px;
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.okendo-count {
  font-size: 14px;
  color: #737373;
}

.okendo-bars {
  max-width: 400px;
  margin: 32px auto;
}

.okendo-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.okendo-bar-label {
  width: 24px;
  text-align: right;
  font-weight: 600;
}

.okendo-bar-track {
  flex: 1;
  height: 8px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}

.okendo-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 4px;
  transition: width 1s ease;
}

.okendo-bar-count {
  width: 36px;
  font-size: 12px;
  color: #737373;
}

.okendo-recommend {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0;
  color: #171717;
}

.okendo-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.okendo-tag {
  padding: 6px 16px;
  border: 1px solid #d4d4d4;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: #525252;
}

.okendo-summary {
  background: #f5f5f5;
  padding: 24px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: #525252;
  margin-bottom: 48px;
}

.okendo-summary strong {
  color: #171717;
}

/* Featured Reviews */
.featured-review {
  border-bottom: 1px solid #e5e5e5;
  padding: 32px 0;
}

.featured-review:last-child {
  border-bottom: none;
}

.featured-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.featured-review-author {
  font-weight: 600;
  font-size: 15px;
}

.featured-review-date {
  font-size: 12px;
  color: #a3a3a3;
}

.featured-review-stars {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 8px;
}

.featured-review-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.featured-review-body {
  font-size: 14px;
  line-height: 1.8;
  color: #525252;
}

/* ---------- REVIEW CTA SECTION ---------- */
.review-cta-section {
  padding: 120px 24px;
  text-align: center;
  background: #FAFAFA;
}

.review-cta-section .review-cta-paragraphs {
  max-width: 800px;
  margin: 0 auto;
}

.review-cta-paragraph {
  padding: 120px 0;
}

.review-cta-paragraph:first-child {
  padding-top: 0;
}

.review-cta-paragraph h3 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.review-cta-paragraph p {
  font-size: 15px;
  line-height: 1.8;
  color: #525252;
  max-width: 640px;
  margin: 0 auto;
}

.ends-the-lie {
  padding: 80px 0;
  text-align: center;
}

.ends-the-lie h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 32px;
}

/* Guarantee Box */
.guarantee-box {
  max-width: 700px;
  margin: 48px auto 0;
  padding: 48px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  text-align: center;
}

.guarantee-icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: #9F0000;
}

.guarantee-box h3 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.guarantee-box p {
  font-size: 14px;
  line-height: 1.8;
  color: #525252;
}

/* ---------- PRODUCT SECTION ---------- */
.product-section {
  padding: 120px 0;
  background: #FAFAFA;
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.product-gallery {
  position: relative;
}

.product-gallery-main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f0f0f0;
}

.product-gallery-main img {
  width: 100%;
  display: none;
}

.product-gallery-main img.active {
  display: block;
}

.look-inside-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

.look-inside-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.product-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.product-gallery-thumbs button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4d4d4;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.product-gallery-thumbs button.active {
  background: #9F0000;
  transform: scale(1.2);
}

.product-info h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  margin-bottom: 16px;
  line-height: 1.05;
}

.product-info > p {
  font-size: 14px;
  line-height: 1.75;
  color: #525252;
  margin-bottom: 24px;
}

/* Feature Showcase Row */
.feature-showcase {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.feature-showcase::-webkit-scrollbar {
  display: none;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
}

.feature-item img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.feature-item span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  color: #737373;
  line-height: 1.2;
}

/* Product Reviews Bar */
.product-reviews-bar {
  overflow: hidden;
  height: 24px;
  position: relative;
  margin-bottom: 24px;
}

.product-review-slide {
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  font-size: 12px;
  font-style: italic;
  color: #737373;
}

.product-review-slide.active {
  opacity: 1;
}

.product-review-slide .review-stars {
  font-size: 11px;
}

/* Variant Cards */
.variant-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.variant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: #fff;
  gap: 12px;
}

.variant-card:hover {
  border-color: #c4c4c4;
}

.variant-card.selected {
  border-color: #9F0000;
  box-shadow: 0 0 0 1px #9F0000;
}

.variant-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.variant-badge {
  font-size: 10px;
  background: #9F0000;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.variant-name {
  font-size: 14px;
  font-weight: 600;
}

.variant-detail {
  font-size: 11px;
  color: #a3a3a3;
  margin-top: 2px;
}

.variant-price {
  font-size: 20px;
  font-weight: 700;
  color: #9F0000;
  white-space: nowrap;
}

.installment-text {
  font-size: 12px;
  color: #a3a3a3;
  text-align: center;
  margin-bottom: 16px;
}

.add-to-cart-btn {
  width: 100%;
  padding: 18px;
  background: #9F0000;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.add-to-cart-btn:hover {
  background: #b30000;
  box-shadow: 0 8px 25px rgba(159, 0, 0, 0.3);
}

/* Offer Block */
.offer-block {
  margin-top: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.offer-checking {
  padding: 14px 20px;
  background: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a3a3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offer-checking .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #d4d4d4;
  border-top-color: #9F0000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.offer-found {
  padding: 14px 20px;
  background: rgba(159, 0, 0, 0.05);
  border-bottom: 1px solid #e5e5e5;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9F0000;
  display: none;
}

.offer-found.show {
  display: block;
}

.offer-details {
  padding: 20px;
  display: none;
}

.offer-details.show {
  display: block;
}

.offer-details p {
  font-size: 14px;
  line-height: 1.7;
  color: #525252;
}

.offer-details strong {
  color: #171717;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- DETAILS / ACCORDION SECTION ---------- */
.details-section {
  padding: 80px 0;
  background: #FAFAFA;
}

.accordion {
  max-width: 820px;
  margin: 0 auto;
}

.accordion-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: #171717;
  background: #fff;
  border: none;
  font-family: inherit;
  transition: color 0.2s;
}

.accordion-header:hover {
  color: #9F0000;
}

.accordion-header .emoji {
  margin-right: 10px;
}

.accordion-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
  color: #a3a3a3;
  flex-shrink: 0;
}

.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.accordion-item.open .accordion-content {
  max-height: 2000px;
}

.accordion-content-inner {
  padding: 0 24px 24px;
}

.accordion-content-inner p {
  font-size: 14px;
  line-height: 1.8;
  color: #525252;
  margin-bottom: 12px;
}

.accordion-content-inner p:last-child {
  margin-bottom: 0;
}

.accordion-content-inner ul {
  padding: 0;
}

.accordion-content-inner li {
  padding: 10px 0;
  font-size: 14px;
  color: #525252;
  border-bottom: 1px solid #f5f5f5;
  line-height: 1.6;
}

.accordion-content-inner li:last-child {
  border-bottom: none;
}

.accordion-content-inner li strong {
  color: #171717;
}

.accordion-content-inner h4 {
  font-size: 14px;
  font-weight: 700;
  color: #9F0000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 8px;
}

.accordion-content-inner h4:first-child {
  margin-top: 0;
}

/* ---------- PRE-FAQ RICH TEXT ---------- */
.pre-faq-section {
  padding: 120px 24px;
  background: #FAFAFA;
}

.pre-faq-block {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center;
}

.pre-faq-block:first-child {
  padding-top: 0;
}

.pre-faq-block h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.pre-faq-block p {
  font-size: 15px;
  line-height: 1.85;
  color: #525252;
}

/* ---------- FAQ SECTION ---------- */
.faq-section {
  padding: 120px 0;
  background: #FAFAFA;
}

.faq-answer {
  font-size: 14px;
  line-height: 1.85;
  color: #525252;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: #1F1F1F;
  color: #fff;
  padding: 80px 24px 0;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.footer-social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #fff;
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  opacity: 0.5;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 0;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: #fff;
}

.footer-signoff {
  text-align: center;
  padding: 48px 0;
}

.footer-signoff-text {
  font-size: 15px;
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 24px;
}

.footer-signature img {
  max-width: 180px;
  margin: 0 auto;
}

.footer-copyright-bar {
  background: #171717;
  margin: 0 -24px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright-bar p {
  font-size: 12px;
  opacity: 0.4;
}

.footer-copyright-bar .footer-policies {
  display: flex;
  gap: 16px;
}

.footer-copyright-bar .footer-policies a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s;
}

.footer-copyright-bar .footer-policies a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-payments {
  font-size: 11px;
  opacity: 0.35;
}

/* ---------- SCROLL ANIMATIONS ---------- */

/* Hero entrance — sequential reveal */
.hero-subtitle,
.reviews-carousel,
.hero h1,
.hero-description,
.hero .cta-primary,
.hero .sub-cta,
.hero-callouts {
  opacity: 0;
  transform: translateY(28px);
  animation: heroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-subtitle       { animation-delay: 0.2s; }
.reviews-carousel    { animation-delay: 0.4s; }
.hero h1             { animation-delay: 0.6s; }
.hero-description    { animation-delay: 0.85s; }
.hero .cta-primary   { animation-delay: 1.05s; }
.hero .sub-cta       { animation-delay: 1.2s; }
.hero-callouts       { animation-delay: 1.4s; }

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Fade up (default) */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade from right */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up reveal (for images & cards) */
.scale-reveal {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.scale-reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children — applied via JS with transition-delay */
.stagger-child {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-child.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image zoom on enter */
.img-reveal {
  overflow: hidden;
}
.img-reveal img {
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.visible img {
  transform: scale(1);
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 769px) {
  .site-header .nav-links {
    display: flex;
  }
  .site-header .hamburger-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-callouts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .loop-grid {
    grid-template-columns: 1fr;
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .split-grid.reverse .split-image {
    order: 0;
  }

  .split-grid.reverse .split-content {
    order: 0;
  }

  .parts-grid {
    grid-template-columns: 1fr;
  }

  .benefits-layout {
    grid-template-columns: 1fr;
  }

  .benefits-sticky {
    position: relative;
    top: 0;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-copyright-bar {
    flex-direction: column;
    text-align: center;
  }

  .visual-gallery-landscapes {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .visual-gallery-books {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .why-this-paragraph {
    padding: 80px 24px;
  }

  .review-cta-paragraph {
    padding: 80px 0;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 48px);
  }

  .scrollspy-nav {
    top: 0;
  }

  .scrollspy-nav-inner {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-bottom: 32px;
  }

  .cta-primary {
    padding: 14px 28px;
    font-size: 12px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .product-layout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .feature-showcase {
    flex-wrap: wrap;
  }

  .reviews-collage {
    padding-inline: 10px;
  }
}

/* ---------- INTERACTIVE STUDY MAP ---------- */
.study-map-section {
  padding: 32px 0 120px;
  background: #0e0e0e;
  color: #fff;
}

.study-map-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: radial-gradient(circle at 80% 20%, rgba(167,121,31,.18), transparent 34%), #121212;
}

.study-map-copy { max-width: 720px; }
.study-state, .offer-kicker {
  color: var(--gold-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 12px;
}
.study-map-copy h2 {
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.study-description { color: #bdbdbd; max-width: 650px; font-size: 15px; }
.study-legend { display:flex; gap:24px; margin-top:22px; color:#a3a3a3; font-size:12px; }
.study-legend span { display:flex; align-items:center; gap:8px; }
.study-legend i { width:24px; height:2px; display:block; }
.legend-gold { background:#C49A3A; }
.legend-white { background:#f5f5f5; }
.study-chart { position:relative; height:310px; margin:38px 0 20px; overflow:hidden; border-block:1px solid rgba(255,255,255,.1); }
.chart-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:60px 52px; }
.study-chart svg { position:absolute; inset:24px 0 0; width:100%; height:260px; overflow:visible; }
.chart-line { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:1300; stroke-dashoffset:0; transition:d .55s ease; }
.chart-light { stroke:#C49A3A; filter:drop-shadow(0 0 8px rgba(196,154,58,.45)); }
.chart-vessel { stroke:#f5f5f5; opacity:.86; }
.study-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 32px; }
.study-tab { padding:16px 10px; border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#a3a3a3; text-align:left; }
.study-tab strong { display:block; color:#fff; font-size:12px; margin-bottom:4px; }
.study-tab span { font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.study-tab.active { background:var(--gold-primary); color:#fff; border-color:var(--gold-primary); }

/* ---------- COMPARISON ---------- */
.comparison-section { padding:120px 0; background:#f2f0eb; }
.comparison-head, .comparison-row { display:grid; grid-template-columns:1.05fr 1.25fr 1.25fr; }
.comparison-head { border-bottom:2px solid #171717; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.comparison-head > div { padding:18px 22px; }
.comparison-brand { background:#171717; color:#fff; }
.comparison-group { border-bottom:1px solid #cfcac0; }
.comparison-group h3 { padding:30px 22px 12px; text-transform:uppercase; font-size:20px; letter-spacing:-.025em; }
.comparison-row { border-top:1px solid #d9d4ca; }
.comparison-row > * { padding:20px 22px; font-size:13px; line-height:1.5; }
.comparison-row > strong { background:#fff; color:#171717; }
.comparison-row > strong::before { content:'✓'; color:var(--gold-primary); margin-right:10px; }
.comparison-row > span:last-child { color:#737373; }

/* ---------- THREE OFFER CARDS ---------- */
.offer-heading { margin-bottom:52px; }
.offer-heading .offer-kicker { margin-bottom:10px; }
.offer-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.offer-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #ddd; border-radius:14px; padding:18px; overflow:hidden; }
.offer-card.featured { border:2px solid var(--gold-primary); transform:translateY(-12px); box-shadow:0 24px 60px rgba(0,0,0,.1); }
.offer-ribbon { position:absolute; top:16px; right:-38px; z-index:2; width:150px; padding:7px; transform:rotate(45deg); background:var(--gold-primary); color:#fff; text-align:center; font-size:9px; font-weight:800; letter-spacing:.12em; }
.offer-image { aspect-ratio:16/9; overflow:hidden; border-radius:9px; background:#eee; margin-bottom:24px; }
.offer-image img { width:100%; height:100%; object-fit:cover; }
.offer-label { color:var(--gold-primary); font-size:10px; font-weight:800; letter-spacing:.16em; }
.offer-card h3 { font-size:28px; text-transform:uppercase; line-height:1; margin:7px 0 10px; }
.offer-price { font-size:22px; font-weight:800; margin-bottom:18px; }
.offer-card ul { flex:1; margin-bottom:22px; }
.offer-card li { position:relative; padding:9px 0 9px 24px; border-bottom:1px solid #eee; color:#525252; font-size:13px; }
.offer-card li::before { content:'✓'; position:absolute; left:0; color:var(--gold-primary); font-weight:800; }
.offer-secondary { display:block; border:1px solid #c8c8c8; border-radius:6px; padding:13px 10px; margin-bottom:9px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.offer-card .add-to-cart-btn { display:block; width:100%; border-radius:6px; padding:15px 12px; color:#fff; text-align:center; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.offer-guarantee { margin-top:10px; color:#737373; text-align:center; font-size:11px; }

@media (max-width: 768px) {
  .study-map-shell { padding:30px 20px; }
  .study-chart { height:230px; }
  .study-chart svg { height:190px; }
  .study-tabs { grid-template-columns:1fr; }
  .study-tab { display:flex; gap:12px; align-items:center; }
  .study-tab strong { margin:0; }
  .comparison-section { padding:80px 0; }
  .comparison-head, .comparison-row { grid-template-columns:1fr; }
  .comparison-head > div:first-child { display:none; }
  .comparison-head > div { text-align:center; }
  .comparison-row { padding:14px 0; }
  .comparison-row > * { padding:8px 18px; }
  .comparison-row > span:first-child { font-weight:800; text-transform:uppercase; font-size:11px; }
  .offer-cards { grid-template-columns:1fr; }
  .offer-card.featured { transform:none; order:-1; }
}

/* ---------- NO CAMINHO DA LUZ · GOLD PALETTE ---------- */
:root {
  --gold-primary: #A7791F;
  --gold-hover: #8B6216;
  --gold-soft: rgba(167, 121, 31, 0.08);
  --gold-shadow: rgba(167, 121, 31, 0.32);
}

.highlight,
.site-header .nav-links a:hover,
.site-header.scrolled .nav-links a:hover,
.mobile-menu a:hover,
.loop-card-number,
.split-content .overline,
.part-card-content .part-number,
.guarantee-icon,
.variant-price,
.offer-found,
.accordion-header:hover,
.accordion-content-inner h4 {
  color: var(--gold-primary);
}

.cta-primary,
.warning-section,
.red-divider,
.product-gallery-thumbs button.active,
.variant-badge,
.add-to-cart-btn {
  background: var(--gold-primary);
}

.cta-primary:hover,
.add-to-cart-btn:hover {
  background: var(--gold-hover);
  box-shadow: 0 8px 30px var(--gold-shadow);
}

.variant-card.selected {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 1px var(--gold-primary);
}

.offer-checking .spinner {
  border-top-color: var(--gold-primary);
}

.offer-found {
  background: var(--gold-soft);
}

.okendo-bar-fill {
  background: #C49A3A;
}

/* ---------- TEXTURED GOLD FINISH ---------- */
:root {
  --gold-metal:
    linear-gradient(rgba(91, 57, 8, .27), rgba(91, 57, 8, .27)),
    url("assets/images/textura-folha-de-ouro.webp");
  --gold-metal-hover:
    linear-gradient(rgba(86, 52, 5, .19), rgba(86, 52, 5, .19)),
    url("assets/images/textura-folha-de-ouro.webp");
}

.announcement-bar,
.warning-section,
.red-divider,
.cta-primary,
.add-to-cart-btn,
.study-tab.active,
.offer-ribbon,
.variant-badge {
  background-color: #A7791F;
  background-image: var(--gold-metal);
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(56,31,0,.1);
}

.cta-primary:hover,
.add-to-cart-btn:hover,
.study-tab.active:hover {
  background-color: #B5892B;
  background-image: var(--gold-metal-hover);
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: multiply, normal;
}

.highlight,
.study-state,
.offer-kicker,
.offer-label,
.offer-price,
.variant-price,
.guarantee-icon,
.offer-found {
  color: #A7791F;
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

.legend-gold,
.chart-light,
.okendo-bar-fill {
  filter: drop-shadow(0 0 5px rgba(196,154,58,.25));
}

.offer-card.featured {
  border-color: #A7791F;
  box-shadow: 0 24px 60px rgba(79,48,4,.14), inset 0 0 0 1px rgba(218,179,91,.28);
}

/* ---------- LAPIS LAZULI + GOLD PALETTE ---------- */
:root {
  --lapis-texture:
    linear-gradient(rgba(2, 14, 47, .34), rgba(2, 14, 47, .34)),
    url("assets/images/textura-lapis-lazuli.webp");
  --lapis-deep: #071a48;
  --lapis-blue: #12377f;
}

.warning-section,
.study-map-section,
.site-footer,
.mobile-menu {
  background-color: var(--lapis-deep);
  background-image: var(--lapis-texture);
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  color: #fff;
}

.study-map-section {
  background-attachment: fixed;
}

.study-map-shell {
  background: linear-gradient(135deg, rgba(3, 14, 42, .9), rgba(11, 34, 78, .82));
  border-color: rgba(204, 168, 78, .3);
  box-shadow: 0 28px 80px rgba(0, 7, 27, .3), inset 0 0 0 1px rgba(255,255,255,.035);
}

.comparison-brand,
.offer-ribbon {
  background-color: var(--lapis-deep);
  background-image: var(--lapis-texture);
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  color: #fff;
}

.offer-card.featured {
  border-color: #A7791F;
  box-shadow: 0 24px 60px rgba(7,26,72,.18), inset 0 0 0 1px rgba(218,179,91,.3);
}

.site-footer::before,
.warning-section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,171,78,.7), transparent);
}

@media (max-width: 768px) {
  .study-map-section { background-attachment: scroll; }
}

/* Lápis-lazúli substitui os fundos pretos; o ouro permanece como luz. */
.hero-overlay {
  background:
    linear-gradient(to top, rgba(2, 12, 39, .97) 0%, rgba(4, 22, 65, .78) 38%, rgba(5, 25, 73, .38) 68%, rgba(2, 12, 39, .16) 100%),
    linear-gradient(rgba(5, 22, 61, .12), rgba(5, 22, 61, .12));
}

.cta-dark,
.scrollspy-nav a.active,
.footer-copyright-bar {
  background-color: var(--lapis-deep);
  background-image: var(--lapis-texture);
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  color: #fff;
}

.cta-dark:hover,
.scrollspy-nav a.active:hover {
  background-color: var(--lapis-blue);
  filter: brightness(1.12);
  box-shadow: 0 8px 30px rgba(7, 26, 72, .26);
}

.part-card-overlay {
  background: linear-gradient(to top, rgba(3, 14, 45, .96) 0%, rgba(7, 31, 82, .5) 52%, rgba(7, 31, 82, .04) 100%);
}

.benefit-card-overlay {
  background: linear-gradient(to top, rgba(3, 14, 45, .93) 0%, rgba(7, 31, 82, .34) 58%, rgba(7, 31, 82, .02) 100%);
}

.footer-copyright-bar {
  border-top: 1px solid rgba(205, 168, 78, .22);
}

/* ---------- ORIGINAL STAN TAYLOR TYPOGRAPHY ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
button,
.cta-primary,
.cta-dark,
.add-to-cart-btn,
.offer-secondary,
.scrollspy-nav a,
.header-logo,
.mobile-menu a,
.overline,
.hero-subtitle,
.part-number,
.study-state,
.study-tab,
.offer-kicker,
.offer-label,
.variant-badge,
.footer-col h4 {
  font-family: 'PPSupply', 'Courier New', monospace;
}

h1,
h2 {
  font-weight: 400 !important;
  letter-spacing: -0.045em;
}

h3,
h4,
h5,
h6 {
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

button,
.cta-primary,
.cta-dark,
.add-to-cart-btn,
.offer-secondary,
.scrollspy-nav a,
.mobile-menu a {
  font-weight: 500;
  letter-spacing: .04em;
}