/* ============ KHALADI ADVISORY · styles.css ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{
  --navy:#0E2238; --navy-deep:#08182A; --navy-mid:#1B3A57;
  --gold:#C9A86A; --gold-2:#E4D2AC;
  --ivory:#F6F2EA; --bone:#FCFAF5; --white:#fff;
  --muted:#6E7681; --muted-on-dark:#A9B4C0;
  --ink:#16202B; --hair:#DED5C4; --hair-dark:rgba(201,168,106,.22);

  --ff-display:'Cormorant Garamond',Georgia,serif;
  --ff-body:'Inter',system-ui,sans-serif;

  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; --sp-32:8rem;
  --pad-sec:clamp(4.5rem,3rem + 8vw,9rem);

  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:20px;
  --sh-sm:0 1px 2px rgba(8,24,42,.04),0 2px 8px rgba(8,24,42,.04);
  --sh-md:0 6px 24px rgba(8,24,42,.07),0 2px 6px rgba(8,24,42,.05);
  --sh-lg:0 24px 60px rgba(8,24,42,.12);
  --sh-gold:0 10px 40px rgba(201,168,106,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.25s; --t:.45s; --t-slow:.8s;
  --container:1240px; --gutter:clamp(1.25rem,5vw,3rem);
}

body{
  font-family:var(--ff-body);font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.7;color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.nav-lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}

h1,h2,h3{font-family:var(--ff-display);font-weight:500;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,1.6rem + 5.4vw,6rem);line-height:1.02}
h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);line-height:1.08}
h3{font-size:clamp(1.45rem,1.15rem + 1.2vw,1.95rem);font-weight:600;line-height:1.15}
h4{font-family:var(--ff-body);font-weight:600;font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.3}
p{max-width:62ch}

/* layout helpers */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1400px}
.section{padding-block:var(--pad-sec);position:relative}
.section--ivory{background:var(--ivory)}
.section--bone{background:var(--bone)}
.section--navy{background:var(--navy);color:var(--gold-2)}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--bone)}
.section--navy p{color:var(--muted-on-dark)}
.grid{display:grid;gap:var(--sp-8)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* eyebrow + section title */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--ff-body);font-size:.78rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.section--navy .eyebrow{color:var(--gold-2)}
.section-title{margin-bottom:1.4rem}
.lead{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.6;color:var(--muted);max-width:54ch}
.section--navy .lead{color:var(--muted-on-dark)}

/* hairline / meridian accents */
.rule-gold{height:1px;background:linear-gradient(90deg,var(--gold) 0%,transparent 70%);border:0}
.coord{font-family:var(--ff-body);font-size:.74rem;letter-spacing:.22em;color:var(--gold);
  text-transform:uppercase;font-weight:500}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-body);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  padding:1rem 1.8rem;border-radius:var(--r-xs);cursor:pointer;border:1px solid transparent;
  transition:transform var(--t-fast) var(--ease),background var(--t) var(--ease),
             color var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  will-change:transform}
.btn svg{width:18px;height:18px;transition:transform var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:var(--bone);box-shadow:var(--sh-md)}
.btn-primary:hover{background:var(--navy-deep);box-shadow:var(--sh-lg)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-2);box-shadow:var(--sh-gold)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--gold);color:var(--navy)}
.section--navy .btn-ghost{color:var(--bone);border-color:var(--hair-dark)}
.section--navy .btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}

/* premium card */
.card{position:relative;background:var(--bone);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:clamp(1.6rem,1rem + 1.5vw,2.4rem);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);
  transform-origin:left;transition:transform var(--t-slow) var(--ease-out)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--gold)}
.card:hover::before{transform:scaleX(1)}

/* reveal animation utility (keyframes + fill:forwards = repaint fiable, no se atasca) */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-visible{animation:revealIn .9s var(--ease-out) forwards}
@keyframes revealIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal[data-delay="1"]{animation-delay:.08s}
.reveal[data-delay="2"]{animation-delay:.16s}
.reveal[data-delay="3"]{animation-delay:.24s}
.reveal[data-delay="4"]{animation-delay:.32s}
.reveal[data-delay="5"]{animation-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal.is-visible{animation:none}}

/* outline numbers */
.num-outline{font-family:var(--ff-display);font-weight:500;
  font-size:clamp(3rem,2rem + 5vw,5.5rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--gold);letter-spacing:.01em}
.stat-num{font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.6rem,1.8rem + 3vw,4rem);color:var(--navy);line-height:1}
.section--navy .stat-num{color:var(--gold-2)}

/* image treatment */
.media{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.media:hover img{transform:scale(1.05)}
.media--overlay::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,24,42,.05) 0%,rgba(8,24,42,.55) 100%);mix-blend-mode:multiply}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:2;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* meridian decorative layer */
.meridian-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* draw-on-scroll lines */
[data-draw] path{stroke-dasharray:1;stroke-dashoffset:1}
[data-draw].drawn path{animation:draw 2s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){[data-draw] path{stroke-dashoffset:0;animation:none}}

/* scroll progress + floating wa (B11) */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .1s linear}
.fab-wa{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:1100;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--gold-2);box-shadow:var(--sh-lg);
  transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.fab-wa:hover{transform:translateY(-3px) scale(1.05);background:var(--navy-deep)}

::selection{background:var(--gold);color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}