:root {
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --dark: #0a0908;
  --dark2: #111009;
  --cream: #f5f0e8;
  --muted: rgba(245,240,232,0.45);
  --border: rgba(245,240,232,0.08);
  --accent-soft: rgba(201,168,76,0.1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--cream);font-family:'Montserrat',sans-serif;font-weight:300;overflow-x:hidden;cursor:none;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* CURSOR */
.cursor{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .15s ease-out,width .3s,height .3s}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:1000;opacity:.4}

/* PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:1000;width:0%;box-shadow:0 0 10px rgba(201,168,76,.5)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:24px 60px;display:flex;justify-content:space-between;align-items:center;background:rgba(10,9,8,0);backdrop-filter:blur(0px);border-bottom:1px solid transparent;transition:all .4s}
.nav.scrolled{background:rgba(10,9,8,.95);backdrop-filter:blur(16px);border-bottom-color:var(--border);padding:16px 60px}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;letter-spacing:4px}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:36px;list-style:none;align-items:center}
.nav-links a{color:var(--muted);font-size:10px;letter-spacing:3px;text-transform:uppercase;transition:color .3s;position:relative}
.nav-links a:hover, .nav-links a.active{color:var(--gold)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-links a:hover::after, .nav-links a.active::after{width:100%}
.nav-cta{background:var(--gold)!important;color:#0a0908!important;padding:10px 22px;font-weight:400!important;transition:all .3s!important;letter-spacing:2px!important;border:none}
.nav-cta:hover{background:var(--gold-light)!important;transform:translateY(-2px);box-shadow:0 10px 20px rgba(201,168,76,0.2)}

/* UTILS */
.container{max-width:1100px;margin:0 auto;padding:0 40px}
.section{padding:140px 0}
.section-dark{background:var(--dark2)}
.sec-label{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px}
.sec-h2{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4vw,54px);font-weight:300;line-height:1.1}
.sec-h2 em{font-style:italic;color:var(--gold)}
.gold-line{width:44px;height:1px;background:var(--gold);margin:22px 0 30px}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* BUTTONS */
.btn-gold{display:inline-block;background:var(--gold);color:#0a0908;padding:18px 44px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:400;transition:all .3s;font-family:'Montserrat',sans-serif;cursor:none;border:none}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-3px);box-shadow:0 15px 30px rgba(201,168,76,0.3)}
.btn-ghost{display:inline-block;background:transparent;color:var(--muted);padding:18px 32px;font-size:11px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--border);transition:all .3s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.05)}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:80px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(201,168,76,.07) 0%,transparent 70%)}
.hero-line-l,.hero-line-r{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(201,168,76,.12) 30%,rgba(201,168,76,.12) 70%,transparent)}
.hero-line-l{left:10%} .hero-line-r{right:10%}

.hero-tag{display:flex;align-items:center;gap:10px;margin-bottom:28px;position:relative;z-index:2}
.hero-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero-tag span{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold)}

.hero-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,72px);font-weight:300;line-height:1.1;text-align:center;letter-spacing:-1px;position:relative;z-index:2;max-width:900px;padding:0 24px}
.hero-h1 em{font-style:italic;color:var(--gold)}
.hero-sub{margin-top:24px;font-size:14px;color:var(--muted);text-align:center;max-width:600px;padding:0 24px;line-height:1.8;position:relative;z-index:2}
.hero-actions{display:flex;gap:16px;align-items:center;margin-top:48px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}

/* PROBLEM SECTION */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.problem-list {
  list-style: none;
  margin-top: 32px;
}
.problem-item {
  padding: 24px;
  background: var(--dark2);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  transition: all 0.3s;
  display: flex;
  gap: 20px;
}
.problem-item:hover {
  border-color: rgba(201,168,76, 0.3);
  transform: translateX(10px);
}
.problem-item i {
  color: var(--gold);
  font-size: 18px;
  margin-top: 2px;
}
.problem-item p {
  font-size: 13px;
  color: var(--muted);
}

/* STICKY KEY SECTION (LLAVE EN MANO) */
.sticky-key-container {
  height: 300vh;
  position: relative;
  background: var(--dark);
}
.sticky-key-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.theMinimalKey {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  width: 120px;
  height: 240px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 40px rgba(201,168,76, 0.35));
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.key-head {
  width: 70px;
  height: 70px;
  border: 4px solid var(--gold);
  border-radius: 50%;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(201,168,76, 0.2);
}

/* El hueco de rombo en el centro que sale en tu foto */
.key-head::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 2px;
}

.key-shaft {
  width: 8px;
  height: 140px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  position: relative;
  margin-top: -3px;
  border-radius: 0 0 4px 4px;
}

.key-tooth {
  position: absolute;
  right: -12px;
  bottom: 35px;
  width: 16px;
  height: 6px;
  background: var(--gold-light);
  border-radius: 1px;
}

.key-tooth.second {
  bottom: 18px;
  width: 12px;
  right: -8px;
}
.reveal-text {
  position: absolute;
  max-width: 320px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  padding: 20px;
}
.reveal-text.left { left: 15%; text-align: right; }
.reveal-text.right { right: 15%; text-align: left; }
.reveal-text.active { opacity: 1; transform: translateY(0); }
.reveal-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--gold); margin-bottom: 12px; }
.reveal-text p { font-size: 14px; color: var(--muted); }

/* PROPUESTA BOX */
.propuesta-box {
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.propuesta-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at top right, rgba(201,168,76, 0.1), transparent);
}

/* TARGET CARDS */
.target-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.target-card {
  padding: 40px;
  background: var(--dark2);
  border: 1px solid var(--border);
  transition: all 0.4s;
}
.target-card:hover {
  border-color: var(--gold);
  transform: translateY(-10px);
}
.target-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  margin-bottom: 20px;
}
.target-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}

/* FRENTES SECTION */
.frentes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  margin-top: 60px;
}
.frente-col {
  padding: 60px;
  background: var(--dark);
}
.frente-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  margin-bottom: 24px;
}

/* STEPS SECTION */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}
.step-card {
  position: relative;
}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
  margin-bottom: -30px;
}
.step-content {
  position: relative;
  z-index: 2;
  padding-left: 20px;
}
.step-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  margin-bottom: 12px;
}
.step-content p {
  font-size: 13px;
  color: var(--muted);
}

/* INCLUDES SECTION */
.includes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.include-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.include-item::before {
  content: '✓';
  color: var(--gold);
}

/* FOOTER */
footer{padding:80px 0;border-top:1px solid var(--border);background: var(--dark2);}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:24px;letter-spacing:4px;margin-bottom:20px}
.footer-logo span{color:var(--gold)}
.footer-links h4 {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--gold);
}
.footer-links ul {
  list-style: none;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  font-size: 12px;
  color: var(--muted);
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-bottom {
  padding-top: 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}

/* REVEAL */
.fi{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.fi.in{opacity:1;transform:translateY(0)}
.fi-d1{transition-delay:.1s}
.fi-d2{transition-delay:.2s}
.fi-d3{transition-delay:.3s}

@media(max-width:900px){
  .problem-grid, .target-grid, .frentes-grid, .steps-grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .nav-links { display: none; }
  .section { padding: 80px 0; }
  .propuesta-box { padding: 40px 24px; }
  .hero-h1 { font-size: 40px; }
}