:root {
  --ink: #241A12;
  --umber: #3A2A1C;
  --umber2: #4F3B27;
  --gold: #C89A4B;
  --goldlt: #E4C583;
  --parch: #F3E9D6;
  --taupe: #B3A38C;
  --stone: #F7F3EA;
  --stone2: #EDE6D5;
  --clay: #8A5A3B;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', sans-serif;
  background: #F7F3EA;
  color: var(--ink);
}

.font-display {
  font-family: 'Fraunces', serif;
}

::selection {
  background: #C89A4B;
  color: #241A12;
}

.grain {
  position: relative;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  mix-blend-mode: overlay;
}

.glow-radial {
  background: radial-gradient(circle at 22% 28%, rgba(200, 154, 75, 0.16), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(200, 154, 75, 0.10), transparent 50%);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 60px rgba(200, 154, 75, 0.15); }
  50% { box-shadow: 0 0 120px rgba(200, 154, 75, 0.35); }
}

@keyframes floatParticle {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0; }
  100% { transform: translateY(-200px) scale(0.5); opacity: 0; }
}

.animate-hero-logo {
  animation: float 6s ease-in-out infinite, subtleGlow 6s ease-in-out infinite;
}

.particle {
  position: absolute;
  background: #E4C583;
  border-radius: 50%;
  pointer-events: none;
  animation: floatParticle 6s ease-in infinite;
  box-shadow: 0 0 8px rgba(228, 197, 131, 0.8);
  z-index: 0;
}

.p1 { width: 4px; height: 4px; left: 10%; top: 80%; animation-delay: 0s; animation-duration: 6s; }
.p2 { width: 6px; height: 6px; left: 25%; top: 90%; animation-delay: 2s; animation-duration: 8s; }
.p3 { width: 3px; height: 3px; left: 45%; top: 75%; animation-delay: 1s; animation-duration: 5s; }
.p4 { width: 5px; height: 5px; left: 60%; top: 85%; animation-delay: 4s; animation-duration: 7s; }
.p5 { width: 7px; height: 7px; left: 85%; top: 80%; animation-delay: 1.5s; animation-duration: 9s; }
.p6 { width: 4px; height: 4px; left: 95%; top: 95%; animation-delay: 3s; animation-duration: 6.5s; }
.p7 { width: 3px; height: 3px; left: 15%; top: 60%; animation-delay: 5s; animation-duration: 7.5s; }
.p8 { width: 5px; height: 5px; left: 35%; top: 50%; animation-delay: 0.5s; animation-duration: 6s; }
.p9 { width: 6px; height: 6px; left: 75%; top: 65%; animation-delay: 2.5s; animation-duration: 8.5s; }
.p10 { width: 4px; height: 4px; left: 55%; top: 40%; animation-delay: 4.5s; animation-duration: 5.5s; }

.cord-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.cord-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.35;
}

.card-lift {
  transition: transform 0.4s cubic-bezier(.2, .7, .3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -18px rgba(36, 26, 18, 0.35);
}

.btn-flame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}

.btn-flame:hover::before {
  opacity: 1;
}

.whatsapp-pulse {
  animation: pulse-wa 2.6s infinite;
}

@keyframes pulse-wa {
  0% { box-shadow: 0 0 0 0 rgba(200, 154, 75, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(200, 154, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 154, 75, 0); }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dropcap::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 3.4em;
  float: left;
  line-height: 0.8;
  padding-right: 0.08em;
  padding-top: 0.05em;
  color: #C89A4B;
  font-weight: 600;
}

.progress-cord {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-cord-fill {
  position: absolute;
  inset: 0;
  width: var(--fill, 62%);
  background: linear-gradient(90deg, #8A5A3B, #C89A4B);
  border-radius: 999px;
}

.modal-overlay {
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transform: scale(0.95) translateY(15px);
  opacity: 0;
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.video-card-img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-card:hover .video-card-img {
  transform: scale(1.06);
}

.video-play-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

.video-card:hover .video-play-btn {
  transform: scale(1.1);
  background-color: #C89A4B;
  color: #241A12;
}

#siteHeader {
  background: transparent;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
}

#siteHeader.scrolled {
  background-color: rgba(36, 26, 18, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 154, 75, 0.12);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #E4C583;
  transition: width 0.3s ease;
}

.nav-link:hover .nav-underline,
.nav-link.active .nav-underline {
  width: 100%;
}

.nav-link.active {
  color: #E4C583 !important;
}

.mobile-link.active {
  color: #E4C583;
  border-left: 3px solid #C89A4B;
  padding-left: 8px;
}

.hero-cross-3d {
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 -5px 12px rgba(228, 197, 131, 0.10));
}

@media (min-width: 640px) {
  .hero-cross-3d {
    filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.55)) drop-shadow(0 -6px 16px rgba(228, 197, 131, 0.10));
  }
}

#mobileMenu nav {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

#menuBtn.menu-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#menuBtn.menu-open span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

#menuBtn.menu-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}