/* FORJA mobile nav contrast hotfix v2.1.1 */
:root{--forja-cream:#f4ede4;--forja-gold:#c88b27;--forja-deep:#12100e;}
@media (max-width: 900px){
  .hamb{
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0 !important;
    border-radius: 999px;
    border: 1px solid rgba(244,237,228,.32) !important;
    background: rgba(244,237,228,.08) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .hamb span{
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 999px;
    background: var(--forja-cream) !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.02);
  }
  .hamb:hover, .hamb:focus-visible{
    border-color: rgba(200,139,39,.65) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 0 3px rgba(200,139,39,.16);
    outline: none;
  }
  .mobile-nav{
    background: rgba(18,16,14,.97) !important;
    border-top: 1px solid rgba(244,237,228,.08) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
  }
  .mobile-nav a{
    color: var(--forja-cream) !important;
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible,
  .mobile-nav a.active,
  .mobile-nav a[aria-current="page"]{
    color: var(--forja-gold) !important;
  }
}

/* =====================================================================
   FORJA PREMIUM 2026 — FINAL MOTION + MOBILE NAV SYSTEM v3.0
   ===================================================================== */
:root{
  --forja-cream:#f4ede4;
  --forja-gold:#d49a36;
  --forja-deep:#12100e;
  --forja-ease:cubic-bezier(.22,1,.36,1);
}

/* Mobile navigation: explicit geometry prevents the "single dark line" bug */
@media (max-width:900px){
  .nav{padding-inline:16px!important;gap:14px!important}
  .brand img{width:108px!important}
  .hamb{
    flex-direction:column!important;
    gap:4px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    margin-left:auto!important;
    border:1px solid rgba(244,237,228,.68)!important;
    background:rgba(244,237,228,.11)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04)!important;
    overflow:hidden!important;
  }
  .hamb span{
    position:relative!important;
    display:block!important;
    flex:0 0 2px!important;
    width:20px!important;
    height:2px!important;
    min-height:2px!important;
    margin:0!important;
    padding:0!important;
    background:var(--forja-cream)!important;
    border:0!important;
    opacity:1!important;
    transform-origin:center!important;
    transition:transform .34s var(--forja-ease),opacity .22s ease,background .25s ease!important;
  }
  .hamb.is-open{
    background:var(--forja-gold)!important;
    border-color:var(--forja-gold)!important;
  }
  .hamb.is-open span{background:#17120c!important}
  .hamb.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  .hamb.is-open span:nth-child(2){opacity:0!important;transform:scaleX(.25)!important}
  .hamb.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}
  .mobile-nav{
    top:70px!important;
    padding:10px 18px 22px!important;
    background:rgba(18,16,14,.985)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    border-top:1px solid rgba(244,237,228,.12)!important;
  }
  .mobile-nav.open{display:flex!important;animation:forjaMenuIn .38s var(--forja-ease) both}
  .mobile-nav a{
    padding:15px 4px!important;
    color:var(--forja-cream)!important;
    border-bottom:1px solid rgba(244,237,228,.1)!important;
  }
  .mobile-nav a[aria-current="page"],.mobile-nav a.active{color:var(--forja-gold)!important}
  body.menu-open{overflow:hidden}
}
@keyframes forjaMenuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* Hero / title motion */
.motion-capable .fx-title,
.motion-capable .fx-hero-item,
.motion-capable .fx-reveal{
  will-change:transform,opacity,filter;
}
.motion-ready .fx-title:not(.is-visible){opacity:0;transform:translateY(30px);filter:blur(8px)}
.motion-ready .fx-title.is-visible{
  opacity:1;transform:none;filter:none;
  transition:opacity .85s var(--forja-ease) var(--fx-delay,0ms),transform .95s var(--forja-ease) var(--fx-delay,0ms),filter .8s ease var(--fx-delay,0ms);
}
.motion-ready .fx-hero-item:not(.is-visible){opacity:0;transform:translateY(16px);filter:blur(5px)}
.motion-ready .fx-hero-item.is-visible{
  opacity:1;transform:none;filter:none;
  transition:opacity .75s var(--forja-ease) var(--hero-delay,0ms),transform .85s var(--forja-ease) var(--hero-delay,0ms),filter .7s ease var(--hero-delay,0ms);
}
.motion-ready .fx-reveal:not(.is-visible){opacity:0;transform:translateY(38px) scale(.992);filter:blur(7px)}
.motion-ready .fx-reveal.is-visible{
  opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--forja-ease) var(--fx-delay,0ms),transform 1s var(--forja-ease) var(--fx-delay,0ms),filter .75s ease var(--fx-delay,0ms);
}

/* Cinematic imagery */
.fx-cinematic-img{
  --parallax-y:0px;
  transform:translate3d(0,var(--parallax-y),0) scale(1.035);
  transition:transform 1.4s var(--forja-ease),filter 1s ease;
}
.motion-ready .hero .fx-cinematic-img{animation:forjaHeroImage 1.8s var(--forja-ease) both}
@keyframes forjaHeroImage{from{opacity:.55;filter:blur(6px);transform:scale(1.085)}to{opacity:1;filter:none;transform:translate3d(0,var(--parallax-y),0) scale(1.035)}}

/* ReactBits-inspired spotlight/depth — subtle, editorial, not SaaS */
.fx-spotlight{position:relative;isolation:isolate;overflow:hidden}
.fx-spotlight::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(212,154,54,.13),transparent 58%);
  transition:opacity .35s ease;
}
.fx-spotlight:hover::after{opacity:1}
.fx-depth{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .28s ease,box-shadow .4s ease}
.fx-depth:hover{box-shadow:0 22px 55px rgba(0,0,0,.17)}

/* Buttons feel alive without becoming flashy */
.btn,.pill,.concierge-trigger,.textlink,.arrow{transition:transform .28s var(--forja-ease),box-shadow .28s ease,background .28s ease,color .28s ease}
.btn:hover,.pill:hover,.concierge-trigger:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.demo-form .btn.is-success{background:#354f3e!important;color:#fff!important}

/* Text quality / wrapping baseline */
h1,h2,h3,.quote-section blockquote{
  hyphens:none!important;-webkit-hyphens:none!important;word-break:normal!important;overflow-wrap:normal!important;text-wrap:balance;
}

/* Mobile gets motion too: shorter distances, never hard-disabled */
@media(max-width:700px){
  .motion-ready .fx-title:not(.is-visible){transform:translateY(18px);filter:blur(5px)}
  .motion-ready .fx-reveal:not(.is-visible){transform:translateY(22px);filter:blur(4px)}
  .fx-cinematic-img{transform:scale(1.02)}
  .hero{min-height:calc(100svh - 0px)}
  .hero h1{font-size:clamp(58px,17vw,76px)!important;line-height:.88!important}
  .hero-copy{max-width:100%!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .fx-title,.fx-hero-item,.fx-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .fx-cinematic-img{transform:none!important}
}

/* Final typography + true staggered title words */
body{font-family:Manrope,Arial,sans-serif!important}
.fx-word{display:inline-block;overflow:visible;white-space:nowrap}
.fx-word-inner{display:inline-block;will-change:transform,opacity,filter}
.motion-ready .fx-title:not(.is-visible) .fx-word-inner{
  opacity:0;transform:translateY(.55em) rotate(1.2deg);filter:blur(6px)
}
.motion-ready .fx-title.is-visible .fx-word-inner{
  opacity:1;transform:none;filter:none;
  transition:opacity .72s var(--forja-ease) calc(var(--fx-delay,0ms) + var(--word-delay,0ms)),
             transform .92s var(--forja-ease) calc(var(--fx-delay,0ms) + var(--word-delay,0ms)),
             filter .62s ease calc(var(--fx-delay,0ms) + var(--word-delay,0ms));
}
/* Parent title stays spatially stable; words carry the visible stagger. */
.motion-ready .fx-title:not(.is-visible){opacity:1!important;transform:none!important;filter:none!important}
.motion-ready .fx-title.is-visible{opacity:1!important;transform:none!important;filter:none!important}

@media(max-width:700px){
  .motion-ready .fx-title:not(.is-visible) .fx-word-inner{transform:translateY(.38em);filter:blur(4px)}
}

/* V3.1 — Hero video integration */
.hero .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:#0b0908;
  pointer-events:none;
}
@media (max-width:850px){
  .hero .hero-video{object-position:center center;}
}
@media (prefers-reduced-motion:reduce){
  .hero .hero-video{display:none;}
  .hero{background:#0b0908 url('assets/hero.jpg') center/cover no-repeat;}
}

/* =====================================================================
   FORJA V3.2 — MOBILE CTA + iPad/Safari HERO VIDEO HOTFIX
   ===================================================================== */

/* Never expose Safari's native hero-video play overlay. If autoplay is
   unavailable, JS falls back to the clean hero poster instead. */
.hero .hero-video{
  -webkit-appearance:none;
  appearance:none;
}
.hero .hero-video::-webkit-media-controls,
.hero .hero-video::-webkit-media-controls-enclosure,
.hero .hero-video::-webkit-media-controls-panel,
.hero .hero-video::-webkit-media-controls-start-playback-button,
.hero .hero-video::-webkit-media-controls-overlay-play-button{
  display:none!important;
  -webkit-appearance:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
.hero.hero-video-fallback .hero-video{display:none!important}
.hero.hero-video-fallback{background:#0b0908 url('assets/hero.jpg') center/cover no-repeat!important}

@media(max-width:900px){
  /* Reserve enough room for the persistent mobile action dock, including
     the iOS/iPadOS home-indicator safe area. */
  body{
    padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
  }

  .sticky{
    position:fixed!important;
    z-index:90!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    min-height:70px!important;
    padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;
    background:rgba(18,16,14,.96)!important;
    border-top:1px solid rgba(244,237,228,.16)!important;
    box-shadow:0 -12px 32px rgba(0,0,0,.24)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
  }

  /* IMPORTANT: both anchors and buttons are CTA controls. The previous
     build styled only buttons, leaving RESERVAR as a purple underlined link. */
  .sticky > a,
  .sticky > button{
    -webkit-appearance:none!important;
    appearance:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 12px!important;
    border:1px solid rgba(244,237,228,.42)!important;
    border-radius:0!important;
    background:#171411!important;
    color:var(--forja-cream)!important;
    text-decoration:none!important;
    text-align:center!important;
    font:700 10px/1 Manrope,Arial,sans-serif!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .sticky > a:visited{color:var(--forja-cream)!important}
  .sticky > a:first-child,
  .sticky > button:first-child{
    background:var(--forja-gold)!important;
    border-color:var(--forja-gold)!important;
    color:#17130f!important;
  }
  .sticky > a:first-child:visited{color:#17130f!important}
  .sticky > a:focus-visible,
  .sticky > button:focus-visible{
    outline:2px solid #fff!important;
    outline-offset:2px!important;
  }
}

@media(max-width:700px){
  /* Keep the intended two-line home statement:
     "Hay una mesa" / "esperándote." */
  .page-home .hero h1{
    font-size:clamp(50px,13vw,62px)!important;
    line-height:.9!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    letter-spacing:-.02em;
  }
  .page-home .hero-copy{max-width:100%!important}
}

@media(max-width:380px){
  .page-home .hero h1{font-size:48px!important}
  .sticky{gap:6px!important;padding-inline:8px!important}
  .sticky > a,.sticky > button{font-size:9px!important;letter-spacing:.11em!important;padding-inline:8px!important}
}