/* ============================================================
   LAYOUT · navbar · hero · mega-menu · footer · whatsapp
   ============================================================ */

/* ---------- NAVBAR ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease-soft), box-shadow .5s var(--ease-soft), backdrop-filter .5s;
  color:var(--paper);
}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.scrolled{
  background:rgba(250,247,242,.82);
  backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(35,22,12,.4);
  color:var(--ink);
}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand__mark{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(140deg,var(--naranja),var(--naranja-deep));
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), var(--sh-sm);
  transition:transform .6s var(--ease-spring);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__mark span{font-family:var(--font-display);color:var(--espresso);font-size:21px;line-height:1;transform:translateY(1px)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__txt b{font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.brand__txt small{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;opacity:.7;font-weight:600}

.nav__links{display:flex;align-items:center;gap:6px}
.nav__link{
  position:relative;font-size:14px;font-weight:500;padding:10px 15px;border-radius:100px;
  transition:background .3s, color .3s;display:inline-flex;align-items:center;gap:6px;
}
.nav__link:hover{background:rgba(141,124,102,.14)}
.nav.scrolled .nav__link:hover{background:rgba(55,37,20,.07)}
.nav__link svg{width:13px;height:13px;transition:transform .4s var(--ease-out);opacity:.8}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  transition:background .3s, transform .4s var(--ease-spring);
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:rgba(141,124,102,.16);transform:scale(1.06)}
.nav.scrolled .icon-btn:hover{background:rgba(55,37,20,.07)}
.nav__wa{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:100px;background:#25d366;color:#fff;
  transition:transform .5s var(--ease-spring), box-shadow .5s;
}
.nav__wa:hover{transform:translateY(-2px);background:#1ebe5d;box-shadow:0 6px 24px rgba(37,211,102,.35)}
.nav__wa svg{width:18px;height:18px}
.nav__burger{display:none}

/* ---------- MEGA MENU ---------- */
.mega{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:55;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(26px) saturate(1.2);
  border-top:1px solid var(--line);
  box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .45s var(--ease-out), transform .5s var(--ease-out), visibility .45s;
  color:var(--ink);
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__inner{max-width:var(--maxw);margin-inline:auto;padding:38px var(--pad) 44px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;align-content:start}
.mega__item{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px;border-radius:14px;transition:background .3s, transform .4s var(--ease-out);
}
.mega__item:hover{background:#fff;transform:translateX(4px);box-shadow:var(--sh-sm)}
.mega__item b{font-size:16px;font-weight:600}
.mega__item span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mega__item .arr{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);transition:background .3s,transform .4s var(--ease-spring)}
.mega__item:hover .arr{background:var(--naranja);transform:translate(3px,-3px)}
.mega__item .arr svg{width:12px;height:12px}
.mega__feat{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;box-shadow:var(--sh-md)}
.mega__feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.mega__feat:hover img{transform:scale(1.06)}
.mega__feat-tag{position:absolute;left:0;bottom:0;padding:24px;color:#fff;z-index:2}
.mega__feat-tag b{font-family:var(--font-display);font-weight:400;font-size:26px;text-transform:uppercase;line-height:1}
.mega__feat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(35,22,12,.7),transparent 55%)}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--espresso);color:var(--paper);
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transform:scale(1.12);
  transition:opacity 1.6s var(--ease-soft);
  will-change:opacity,transform;
}
.hero__slide.active{opacity:1;animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.hero__slide.active{animation:none;transform:scale(1.12)}}
.hero__scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(105deg,rgba(35,22,12,.82) 0%,rgba(35,22,12,.5) 38%,rgba(35,22,12,.12) 70%,transparent 100%),
    linear-gradient(to top,rgba(35,22,12,.85),transparent 50%);
}
.hero__glow{
  position:absolute;z-index:-1;width:60vmax;height:60vmax;border-radius:50%;pointer-events:none;
  left:var(--gx,30%);top:var(--gy,40%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,164,58,.22),rgba(255,164,58,.06) 40%,transparent 65%);
  transition:left .5s var(--ease-out),top .5s var(--ease-out);mix-blend-mode:screen;
}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(40px,7vh,76px);z-index:2}
.hero__copy{max-width:min(760px,64vw)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:26px}
.hero__eyebrow::before{content:"";width:42px;height:1.5px;background:var(--naranja)}
.hero__title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(52px,8.6vw,134px);line-height:.86;letter-spacing:-.012em;
}
.hero__title .ln{display:block;overflow:hidden;white-space:nowrap}
.hero__title .ln i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.2s var(--ease-out)}
.hero.lit .hero__title .ln:nth-child(1) i{transition-delay:.15s}
.hero.lit .hero__title .ln:nth-child(2) i{transition-delay:.28s}
.hero.lit .hero__title .ln i{transform:translateY(0)}
.hero__title em{font-style:normal;color:var(--naranja)}
.hero__sub{margin-top:26px;max-width:48ch;font-size:clamp(15px,1.5vw,18px);color:rgba(250,247,242,.78);line-height:1.65;
  opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-out) .6s,transform 1s var(--ease-out) .6s}
.hero.lit .hero__sub{opacity:1;transform:none}
.hero__cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;
  opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-out) .75s,transform 1s var(--ease-out) .75s}
.hero.lit .hero__cta{opacity:1;transform:none}

/* floating layered cards */
.hero__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__float{
  position:absolute;border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-lg);border:1px solid rgba(250,247,242,.16);
  transform:translate3d(calc(var(--mx,0)*var(--d,1)*-26px),calc(var(--my,0)*var(--d,1)*-22px),0);
  transition:transform .6s var(--ease-out);will-change:transform;
  opacity:0;animation:floatIn 1.3s var(--ease-out) forwards;
}
.hero__float img{width:100%;height:100%;object-fit:cover}
.hero__float .tag{position:absolute;left:12px;bottom:12px;right:12px;display:flex;justify-content:space-between;align-items:center;
  background:rgba(35,22,12,.55);backdrop-filter:blur(10px);border-radius:11px;padding:9px 13px;color:#fff;border:1px solid rgba(255,255,255,.14)}
.hero__float .tag b{font-size:12.5px;font-weight:600}
.hero__float .tag s{text-decoration:none;font-size:12px;color:var(--naranja);font-weight:600}
@keyframes floatIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1}}
.hero__float.f1{width:clamp(150px,17vw,230px);aspect-ratio:3/4;right:7%;bottom:30%;--d:1.4;animation-delay:.6s}
.hero__float.f2{width:clamp(120px,12vw,180px);aspect-ratio:1;right:24%;top:20%;--d:2.1;animation-delay:.85s}
.hero__float.f3{width:clamp(110px,11vw,160px);aspect-ratio:4/5;right:2%;top:16%;--d:.9;animation-delay:1.05s}

.hero__meta{position:absolute;left:var(--pad);top:calc(var(--nav-h) + 26px);display:flex;flex-direction:column;gap:5px;z-index:2;
  opacity:0;transition:opacity 1s var(--ease-out) .9s}
.hero.lit .hero__meta{opacity:1}
.hero__meta span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(250,247,242,.55);font-weight:600}

/* hero footer rail */
.hero__rail{display:flex;align-items:center;gap:22px;margin-top:clamp(34px,5vh,58px);
  border-top:1px solid rgba(250,247,242,.16);padding-top:22px;
  opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out) .9s,transform 1s var(--ease-out) .9s}
.hero.lit .hero__rail{opacity:1;transform:none}
.hero__stat{display:flex;flex-direction:column}
.hero__stat b{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1;color:var(--paper)}
.hero__stat span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.55);margin-top:6px;font-weight:600}
.hero__rail .sep{width:1px;height:38px;background:rgba(250,247,242,.18)}
.hero__dots{position:absolute;right:var(--pad);bottom:calc(clamp(46px,8vh,90px));display:flex;gap:9px;z-index:3}
.hero__dot{width:30px;height:3px;border-radius:3px;background:rgba(250,247,242,.28);transition:background .4s;cursor:pointer}
.hero__dot.on{background:var(--naranja)}
.scrollcue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(250,247,242,.6);font-weight:600}
.scrollcue i{width:1px;height:34px;background:linear-gradient(rgba(250,247,242,.6),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- FOOTER ---------- */
.footer{background:var(--espresso);color:var(--paper);padding-block:clamp(60px,8vw,100px) 40px;position:relative;overflow:hidden}
.footer__glow{position:absolute;top:-30%;right:-10%;width:50vmax;height:50vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,164,58,.10),transparent 60%);pointer-events:none}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;position:relative}
.footer__cta h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5vw,64px);line-height:.9;letter-spacing:-.01em}
.footer__cta h3 em{font-style:normal;color:var(--naranja)}
.footer__cta p{margin-top:18px;color:var(--on-dark-muted);max-width:40ch}
.footer__cta .btn{margin-top:26px}
.footer__cta .btn--accent,
.btn--wa-green{background:#25d366;color:#fff}
.footer__cta .btn--accent:hover,
.btn--wa-green:hover{background:#1ebe5d;box-shadow:0 6px 24px rgba(37,211,102,.35);transform:translateY(-3px)}
.footer__col h5{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--naranja);margin-bottom:18px;font-weight:600}
.footer__col a{display:block;padding:7px 0;color:rgba(250,247,242,.72);font-size:14.5px;transition:color .3s,transform .3s var(--ease-out)}
.footer__col a:hover{color:var(--paper);transform:translateX(4px)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid rgba(250,247,242,.14);
  font-size:13px;color:rgba(250,247,242,.5)}
.footer__bottom .socials{display:flex;gap:10px}
.footer__bottom .socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(250,247,242,.18);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s var(--ease-spring)}
.footer__bottom .socials a:hover{background:var(--naranja);border-color:var(--naranja);color:var(--espresso);transform:translateY(-3px)}
.footer__bottom .socials svg{width:17px;height:17px}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:0;
  background:#25d366;color:#fff;border-radius:100px;padding:0;height:58px;overflow:hidden;
  box-shadow:0 16px 34px -12px rgba(37,211,102,.6);transition:transform .5s var(--ease-spring),box-shadow .5s}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float i{width:58px;height:58px;display:grid;place-items:center;flex-shrink:0}
.wa-float i svg{width:28px;height:28px}
.wa-float b{font-size:14.5px;font-weight:600;max-width:0;opacity:0;white-space:nowrap;overflow:hidden;transition:max-width .5s var(--ease-out),opacity .4s,padding .5s}
.wa-float:hover b{max-width:200px;opacity:1;padding-right:22px}
.wa-float .pulse{position:absolute;inset:0;border-radius:100px;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:wapulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}

/* ---------- LOGOS ---------- */
.brand{height:var(--nav-h);gap:0}
.brand__logo{height:48px;width:auto;display:block;transition:opacity .4s var(--ease-soft)}
.brand__logo--dark{display:none}
.nav.scrolled .brand__logo--light{display:none}
.nav.scrolled .brand__logo--dark{display:block}
.drawer__head .brand{height:auto}
.drawer__head .brand__logo{height:30px}
.footer__logo{height:60px;width:auto;margin-bottom:28px}
.footer__horses{position:absolute;right:-1%;bottom:-8%;width:min(460px,40vw);opacity:.06;pointer-events:none;z-index:0;filter:saturate(0)}
.footer .wrap{position:relative;z-index:1}
@media (max-width:900px){
  .brand__logo{height:38px}
  .footer__logo{height:48px}
  .footer__horses{width:min(320px,60vw);opacity:.05}
}

