/* ==========================================================================
   MALKHAT GLOBAL — Design tokens
   ========================================================================== */
:root{
  --cream:      #efeae1;
  --cream-2:    #e5dccc;
  --ink:        #241f1b;
  --ink-soft:   #4a4038;
  --taupe:      #7c6d5e;
  --taupe-2:    #a7957f;
  --oxblood:    #4a201c;
  --oxblood-2:  #351512;
  --gold:       #c6a15b;
  --gold-light: #e6cd9a;
  --gold-deep:  #8a6a2f;
  --line:       #d6cbb6;

  --serif: 'Playfair Display', Georgia, serif;
  --accent-serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Poppins', 'Segoe UI', sans-serif;

  --section-pad: clamp(4rem, 9vw, 9rem);
  --edge-pad: clamp(1.5rem, 6vw, 6rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:700; letter-spacing:.02em; }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Subtle film-grain / paper texture overlay for warmth */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Arch motif (brand signature — recurring nested-arch device)
   ========================================================================== */
.arch{
  position:absolute;
  width:clamp(140px, 18vw, 280px);
  height:clamp(140px, 18vw, 280px);
  color:var(--gold);
  opacity:.5;
  z-index:1;
  pointer-events:none;
}
.arch--tl{ top:-4%; left:-4%; }
.arch--br{ bottom:-4%; right:-4%; transform:rotate(180deg); }
.arch--muted{ color:var(--taupe-2); opacity:.22; }
.arch--muted.arch--tl{ top:1.5rem; left:1.5rem; width:clamp(100px,12vw,180px); height:clamp(100px,12vw,180px); }
.arch--muted.arch--br{ bottom:1.5rem; right:1.5rem; width:clamp(100px,12vw,180px); height:clamp(100px,12vw,180px); }
.arch--footer{ color:var(--gold); opacity:.22; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.1rem var(--edge-pad);
  display:flex; justify-content:center;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled{
  background:rgba(239,234,225,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding-top:.7rem; padding-bottom:.7rem;
}
.nav-inner{
  width:100%; max-width:1400px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{ width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 2px var(--gold); }
.brand-name{ font-family:var(--serif); font-size:1.05rem; letter-spacing:.06em; color:var(--cream); transition:color .4s ease; }
.brand-name em{ font-style:normal; color:var(--gold-light); }

.links{ display:flex; gap:clamp(1rem,2vw,2.4rem); align-items:center; }
.links a{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(239,234,225,.85); position:relative; padding-bottom:4px;
  transition:color .3s ease;
}
.links a span{ color:var(--gold-light); font-family:var(--accent-serif); font-style:italic; margin-right:.35rem; font-size:.85rem; }
.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-light);
  transition:width .35s ease;
}
.links a:hover{ color:var(--cream); }
.links a:hover::after{ width:100%; }
.cta-link{
  border:1px solid var(--gold-light); padding:.5rem 1rem !important; border-radius:2px;
}

.burger span{ background:var(--cream); }

/* Once the nav has a solid cream background (scrolled past hero), switch to dark ink tones */
.nav.scrolled .brand-name{ color:var(--ink); }
.nav.scrolled .brand-name em{ color:var(--gold-deep); }
.nav.scrolled .links a{ color:var(--ink-soft); }
.nav.scrolled .links a span{ color:var(--gold-deep); }
.nav.scrolled .links a::after{ background:var(--gold-deep); }
.nav.scrolled .links a:hover{ color:var(--ink); }
.nav.scrolled .cta-link{ border-color:var(--gold-deep); }
.nav.scrolled .burger span{ background:var(--ink); }

/* On mobile the dropdown panel always has a cream background, so its links stay dark regardless of nav state */
@media (max-width:960px){
  .links a{ color:var(--ink-soft); }
  .links a span{ color:var(--gold-deep); }
  .links a::after{ background:var(--gold-deep); }
  .links a:hover{ color:var(--ink); }
  .cta-link{ border-color:var(--gold-deep); }
}

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:110;
}
.burger span{ width:24px; height:1.5px; transition:background .4s ease, transform .3s ease, opacity .3s ease; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.08);
  animation:heroZoom 22s ease-in-out infinite alternate;
  z-index:-2;
}
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1);} }
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(36,31,27,.35), rgba(20,16,13,.78) 70%),
    linear-gradient(180deg, rgba(20,16,13,.55) 0%, rgba(20,16,13,.72) 60%, rgba(20,16,13,.92) 100%);
}

.hero-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:7rem 1.5rem 3rem;
  color:var(--cream);
}
.eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-light);
  margin-bottom:2.2rem;
}

/* --- 3D floating crest --- */
.crest{
  position:relative;
  width:clamp(130px,16vw,200px); height:clamp(130px,16vw,200px);
  margin-bottom:2rem;
  perspective:900px;
}
.crest-inner{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  transform-style:preserve-3d;
  animation:crestFloat 7s ease-in-out infinite;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(198,161,91,.5);
  will-change:transform;
}
.crest-inner img{ width:100%; height:100%; object-fit:cover; }
@keyframes crestFloat{
  0%,100%{ transform:translateY(0) rotateX(0deg) rotateY(0deg); }
  50%{ transform:translateY(-14px) rotateX(4deg) rotateY(-6deg); }
}
.crest-ring{
  position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(198,161,91,.45);
  animation:ringSpin 18s linear infinite;
}
.crest-ring--2{ inset:-28px; border-color:rgba(198,161,91,.22); animation-duration:26s; animation-direction:reverse; }
@keyframes ringSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.hero-title{
  font-size:clamp(2.6rem, 8vw, 6rem);
  letter-spacing:.06em;
  line-height:1;
  color:var(--cream);
}
.hero-title span{ color:var(--gold-light); }
.hero-tagline{
  font-family:var(--accent-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--gold-light);
  margin:1.6rem 0 2.6rem;
  max-width:32ch;
}

.btn{
  display:inline-block; padding:.95rem 2.2rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:2px; transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
}
.btn--gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  color:#241a0d; font-weight:500;
  box-shadow:0 12px 30px -10px rgba(138,106,47,.55);
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(138,106,47,.7); }
.btn--ghost{
  border:1px solid var(--gold-light); color:var(--gold-light);
}
.btn--ghost:hover{ background:rgba(198,161,91,.12); }

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:2; width:22px; height:36px; border:1px solid rgba(230,205,154,.6); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:3px; height:6px; margin-left:-1.5px;
  background:var(--gold-light); border-radius:2px;
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:20px;} 100%{ opacity:0; top:6px;} }

.mobile-only{ display:none; }

/* ==========================================================================
   Sections — shared
   ========================================================================== */
.section{ position:relative; padding:var(--section-pad) 0; overflow:hidden; scroll-margin-top:84px; }
.footer{ scroll-margin-top:0; }
.section-inner{
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; padding:0 var(--edge-pad);
}
.kicker{
  font-family:var(--accent-serif); font-style:italic; font-size:1.05rem;
  color:var(--gold-deep); margin-bottom:.6rem;
}
.kicker--light{ color:var(--gold-light); }
h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:1.6rem; color:var(--ink); }
h2.light{ color:var(--cream); }
.lead{ font-size:1.15rem; color:var(--ink-soft); margin-bottom:1.1rem; font-weight:400; }

/* Split (media + copy) layout */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.split--reverse .split-copy{ order:1; }
.split--reverse .split-media{ order:2; }

.split-media{ position:relative; }
.split-media img{ border-radius:6px; width:100%; height:clamp(300px,38vw,460px); object-fit:cover; }
.media-frame{
  position:absolute; inset:16px -16px -16px 16px; z-index:-1;
  border:1.5px solid var(--gold); border-radius:6px;
}
[data-tilt]{ transition:transform .25s ease-out; transform-style:preserve-3d; will-change:transform; }

.split-media--seal{
  display:flex; align-items:center; justify-content:center;
  height:clamp(280px,32vw,420px);
}
.split-media--seal img{
  width:clamp(220px,22vw,320px); height:clamp(220px,22vw,320px);
  border-radius:50%; object-fit:cover;
  box-shadow:0 30px 60px -25px rgba(74,32,28,.4), 0 0 0 1px var(--line);
}
.seal-glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(198,161,91,.25), transparent 70%);
  filter:blur(10px); z-index:-1;
}

/* Dark (oxblood) section — Misión & Visión */
.section--dark{
  background:linear-gradient(160deg, var(--oxblood) 0%, var(--oxblood-2) 100%);
  color:var(--cream);
}
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.5rem; }
.mv-card{
  background:rgba(239,234,225,.05);
  border:1px solid rgba(198,161,91,.28);
  border-radius:8px;
  padding:clamp(2rem,3vw,2.8rem);
  backdrop-filter:blur(3px);
}
.mv-card--gold{ background:rgba(198,161,91,.09); border-color:rgba(198,161,91,.5); }
.mv-num{
  display:block; font-family:var(--serif); font-size:1.4rem; letter-spacing:.05em;
  color:var(--gold-light); margin-bottom:1.1rem;
}
.mv-card p{ color:rgba(239,234,225,.85); font-size:1rem; }

/* Values */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2.5rem; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:2.4rem 2rem; text-align:left;
  box-shadow:0 20px 40px -30px rgba(36,31,27,.25);
}
.value-icon{ width:48px; height:48px; color:var(--gold-deep); margin-bottom:1.4rem; }
.value-icon svg{ width:100%; height:100%; }
.value-card h3{ font-size:1.3rem; margin-bottom:.7rem; color:var(--ink); }
.value-card p{ color:var(--ink-soft); font-size:.98rem; }

/* Offer section */
.section--offer{ background:var(--cream-2); }
.offer-list{ margin-top:1.8rem; display:flex; flex-direction:column; gap:1.1rem; }
.offer-list li{
  display:flex; align-items:center; gap:1.1rem;
  font-size:1.05rem; color:var(--ink-soft);
  padding-bottom:1.1rem; border-bottom:1px solid var(--line);
}
.offer-mark{
  font-family:var(--accent-serif); font-style:italic; color:var(--gold-deep);
  font-size:1.1rem; width:2.2rem; flex-shrink:0;
}

/* ==========================================================================
   Footer / Contact
   ========================================================================== */
.footer{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--oxblood-2), #21100e);
  color:var(--cream);
  padding:var(--section-pad) var(--edge-pad) 2.5rem;
  text-align:center;
}
.footer-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.footer-mark{ width:56px; height:56px; border-radius:50%; margin:0 auto 1.6rem; box-shadow:0 0 0 2px var(--gold); }
.footer h2{ color:var(--cream); font-size:clamp(1.8rem,3.6vw,2.6rem); }
.footer-tagline{
  font-family:var(--accent-serif); font-style:italic; color:var(--gold-light);
  font-size:1.15rem; margin:1rem 0 2.4rem;
}
.footer-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:2.6rem; }
.footer-meta{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
  font-size:.82rem; letter-spacing:.06em; color:rgba(239,234,225,.55);
  margin-bottom:1.6rem;
}
.footer-copy{ font-size:.78rem; color:rgba(239,234,225,.4); }

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width:960px){
  .links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    background:var(--cream); flex-direction:column; align-items:flex-start;
    padding:6.5rem 2rem 2rem; gap:1.6rem;
    transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.15);
  }
  .links.open{ transform:translateX(0); }
  .burger{ display:flex; }
  .burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .split, .split--reverse .split-copy, .split--reverse .split-media{ order:initial; }
  .split{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .mobile-only{ display:inline; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width:600px){
  .values-grid{ grid-template-columns:1fr; }
  .brand-name{ font-size:.92rem; }
  .footer-actions{ flex-direction:column; width:100%; }
  .footer-actions .btn{ width:100%; }
  .arch{ width:110px; height:110px; }
  .split-media img{ height:280px; }
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  z-index:210; box-shadow:0 0 8px rgba(198,161,91,.6);
  transition:width .08s linear;
}

/* ==========================================================================
   Nav — active link state
   ========================================================================== */
.links a.active{ color:var(--ink); }
.links a.active::after{ width:100%; }
.links a.cta-link.active{ background:var(--gold); color:#241a0d; }

/* ==========================================================================
   Side dot navigation
   ========================================================================== */
.dot-nav{
  position:fixed; right:1.8rem; top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; gap:1.05rem;
}
.dot-nav button{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:rgba(124,109,94,.35); border:1px solid rgba(124,109,94,.5);
  cursor:pointer; padding:0; transition:background .3s ease, transform .3s ease, border-color .3s ease;
}
.dot-nav button.active{
  background:var(--gold); border-color:var(--gold); transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(198,161,91,.2);
}
.dot-nav.on-dark button{ background:rgba(239,234,225,.3); border-color:rgba(239,234,225,.5); }
.dot-nav.on-dark button.active{ background:var(--gold-light); border-color:var(--gold-light); }
.dot-nav button em{
  position:absolute; right:22px; top:50%; transform:translateY(-50%) translateX(6px);
  font-style:normal; font-family:var(--sans); font-size:.72rem; letter-spacing:.04em;
  white-space:nowrap; background:var(--ink); color:var(--cream);
  padding:.35rem .7rem; border-radius:3px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.dot-nav button:hover em{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:960px){ .dot-nav{ display:none; } }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float{
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#31d67a,#1fae5f);
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 14px 30px -8px rgba(31,174,95,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ transform:translateY(-4px) scale(1.05); box-shadow:0 18px 36px -8px rgba(31,174,95,.7); }
.wa-pulse{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(31,174,95,.6);
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (max-width:600px){
  .wa-float{ width:52px; height:52px; bottom:1.2rem; right:1.2rem; }
}

/* ==========================================================================
   Hero — sparkles / particles
   ========================================================================== */
.sparkles{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-light);
  opacity:0; box-shadow:0 0 6px 1px rgba(230,205,154,.8);
  animation:sparkFloat linear infinite;
}
@keyframes sparkFloat{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  10%{ opacity:.9; }
  90%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-120px) scale(1); }
}

/* Crest shine sweep */
.crest-shine{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none;
}
.crest-shine::after{
  content:''; position:absolute; top:-50%; left:-180%; width:60%; height:200%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:crestShine 5s ease-in-out infinite;
}
@keyframes crestShine{
  0%{ left:-180%; } 35%{ left:200%; } 100%{ left:200%; }
}

/* Hero title letter-in animation */
.hero-title .letter{
  display:inline-block;
  opacity:0; transform:translateY(.5em) rotateX(40deg);
  animation:letterIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes letterIn{
  to{ opacity:1; transform:translateY(0) rotateX(0deg); }
}
.reveal-fade{ opacity:0; animation:fadeInUp 1s ease forwards; animation-delay:1.1s; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* Magnetic buttons */
.btn{ will-change:transform; }

/* Value card + media hover polish */
.value-card{ transition:transform .3s ease, box-shadow .3s ease; }
.value-card:hover{ box-shadow:0 26px 50px -28px rgba(36,31,27,.35); }
.value-card:hover .value-icon{ color:var(--oxblood); transform:scale(1.1) rotate(-4deg); }
.value-icon{ transition:transform .35s ease, color .35s ease; }

.split-media{ overflow:hidden; border-radius:6px; }
.split-media img{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
.split-media:hover img{ transform:scale(1.06); }

.mv-card{ transition:border-color .35s ease, background .35s ease; }
.mv-card:hover{ border-color:var(--gold); }

/* Offer list hover */
.offer-list li{ transition:padding-left .3s ease, color .3s ease, border-color .3s ease; cursor:default; }
.offer-list li:hover{ padding-left:.6rem; color:var(--ink); border-color:var(--gold); }