@import url('/static/hero-story-1.css?v=hero-story-1');@import url('/static/hero-story-2.css?v=hero-story-1');@import url('/static/hero-story-3.css?v=hero-story-1');

/* GLOBAL POLISH GATE #0 — story markup is initial HTML and remains visible from first paint. */
.story-visual,.hero-transition.story-home,.story-founding{visibility:visible}

/* HOME REVIEW — owner-directed composition and motion. */
.story-home.hero-transition{
  position:relative!important;
  padding:0!important;
  min-height:clamp(590px,44vw,670px)!important;
  height:100%!important;
  overflow:hidden!important;
  background:#111!important;
  isolation:isolate;
  perspective:1200px;
}

/* Remove all legacy floating labels/decorations, including EN→ES. */
.story-home.hero-transition:before,
.story-home.hero-transition:after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* Full-frame photo with a deliberately zoomed-out source image.
   A soft full-bleed backdrop prevents empty side bands while the source itself stays readable. */
.story-home .transition-screen{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:auto!important;
  border:0!important;
  border-radius:0!important;
  background:#111!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
  overflow:hidden!important;
}
.story-home .transition-screen:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-3%!important;
  z-index:0!important;
  background:url('/assets/hero-transition-en.webp') center center/cover no-repeat!important;
  filter:blur(14px) saturate(.9) brightness(.86)!important;
  transform:scale(1.05)!important;
  opacity:.92!important;
  pointer-events:none!important;
}
.story-home .transition-screen:after{
  content:none!important;
  display:none!important;
}
.story-home .transition-base,
.story-home .transition-overlay,
.story-home .transition-overlay img{
  position:absolute!important;
  display:block!important;
  max-width:none!important;
}
.story-home .transition-base,
.story-home .transition-overlay img{
  left:0!important;
  top:-2%!important;
  width:100%!important;
  height:104%!important;
  min-height:104%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.story-home .transition-base{z-index:1}
.story-home .transition-overlay{
  inset:0!important;
  z-index:2;
  width:100%!important;
  height:100%!important;
  clip-path:inset(0 100% 0 0);
  animation:none!important;
  will-change:clip-path;
}
.story-home.is-es .transition-overlay{clip-path:inset(0 0 0 0)}
.story-home .transition-line{
  position:absolute!important;
  z-index:3!important;
  top:0!important;
  bottom:0!important;
  left:0;
  width:3px!important;
  height:auto!important;
  opacity:0;
  background:#FDC41F!important;
  box-shadow:0 0 18px rgba(253,196,31,.72)!important;
  animation:none!important;
  will-change:left,opacity;
}
.story-home.is-forward .transition-overlay{animation:home-reveal-forward 4.8s cubic-bezier(.65,0,.35,1) forwards!important}
.story-home.is-forward .transition-line{animation:home-line-forward 4.8s cubic-bezier(.65,0,.35,1) forwards!important}
.story-home.is-backward .transition-overlay{animation:home-reveal-backward 4.8s cubic-bezier(.65,0,.35,1) forwards!important}
.story-home.is-backward .transition-line{animation:home-line-backward 4.8s cubic-bezier(.65,0,.35,1) forwards!important}

@keyframes home-reveal-forward{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes home-line-forward{0%{left:0;opacity:0}4%{opacity:1}96%{opacity:1}100%{left:100%;opacity:0}}
@keyframes home-reveal-backward{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes home-line-backward{0%{left:100%;opacity:0}4%{opacity:1}96%{opacity:1}100%{left:0;opacity:0}}

/* Benefit card: slightly larger than Round 1, while remaining fully above the monitor. */
.story-home .home-benefit-card{
  position:absolute!important;
  z-index:8!important;
  left:clamp(28px,4.2vw,56px)!important;
  right:clamp(28px,4.2vw,56px)!important;
  top:clamp(24px,3vw,40px)!important;
  bottom:auto!important;
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
  min-height:116px;
  padding:22px 26px 25px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:19px!important;
  background:rgba(12,12,12,.89)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.38),0 0 40px rgba(253,196,31,.08)!important;
  backdrop-filter:blur(12px);
  transform-origin:center center;
  backface-visibility:hidden;
  overflow:hidden!important;
}
.story-home .home-benefit-icon{
  display:grid!important;
  place-items:center!important;
  width:68px!important;
  height:68px!important;
  border-radius:17px!important;
  background:#FDC41F!important;
  color:#111!important;
  font:800 31px/1 Inter,sans-serif!important;
  box-shadow:0 0 26px rgba(253,196,31,.28)!important;
  transform-origin:center;
}
.story-home .home-benefit-copy small{
  display:block!important;
  margin:0 0 7px!important;
  color:#d6d6d0!important;
  font:550 clamp(12px,.88vw,14px)/1.35 Inter,sans-serif!important;
  letter-spacing:.19em!important;
  text-transform:uppercase!important;
}
.story-home .home-benefit-copy strong{
  display:block!important;
  max-width:36ch;
  color:#fff!important;
  font:700 clamp(24px,1.78vw,31px)/1.16 Inter,sans-serif!important;
  letter-spacing:-.018em!important;
}
.story-home .home-benefit-progress{
  --home-progress:.2;
  position:absolute!important;
  left:26px!important;
  right:26px!important;
  bottom:9px!important;
  height:3px!important;
  width:auto!important;
  background:#FDC41F!important;
  transform:scaleX(var(--home-progress))!important;
  transform-origin:left center!important;
  transition:transform .35s ease!important;
}
.story-home .home-benefit-card.is-flip-out{animation:home-card-flip-out .18s ease-in forwards}
.story-home .home-benefit-card.is-flip-in{animation:home-card-flip-in .30s cubic-bezier(.2,.8,.2,1) both}
.story-home .home-benefit-card.is-flip-out .home-benefit-icon{transform:rotateY(80deg) scale(.92);transition:transform .18s ease-in}
.story-home .home-benefit-card.is-flip-in .home-benefit-icon{animation:home-icon-flip-in .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes home-card-flip-out{from{transform:rotateX(0);opacity:1}to{transform:rotateX(76deg);opacity:.42}}
@keyframes home-card-flip-in{from{transform:rotateX(-76deg);opacity:.42}to{transform:rotateX(0);opacity:1}}
@keyframes home-icon-flip-in{from{transform:rotateY(-100deg) scale(.9)}to{transform:rotateY(0) scale(1)}}

/* Deep-audit Hero reconciliation: scene changes must never cross-fade into an unreadable stacked frame. */
.audit-story .audit-story-scene{transition:transform .35s ease!important}

/* Mobile: true zoom-out. The source image is almost entirely visible, with air around monitor and card. */
@media(max-width:900px){
  .story-home.hero-transition{
    min-height:clamp(500px,125vw,650px)!important;
    height:clamp(500px,125vw,650px)!important;
  }
  .story-home .transition-base,
  .story-home .transition-overlay img{
    top:1%!important;
    height:98%!important;
    min-height:98%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  .story-home .transition-screen:before{
    inset:-4%!important;
    filter:blur(16px) saturate(.9) brightness(.82)!important;
  }
  .story-home .home-benefit-card{
    left:clamp(16px,4.5vw,22px)!important;
    right:clamp(16px,4.5vw,22px)!important;
    top:clamp(17px,4.5vw,24px)!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:15px!important;
    min-height:112px;
    padding:18px 19px 23px!important;
    border-radius:17px!important;
  }
  .story-home .home-benefit-icon{
    width:58px!important;
    height:58px!important;
    border-radius:15px!important;
    font-size:27px!important;
  }
  .story-home .home-benefit-copy small{
    margin-bottom:5px!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:.18em!important;
    font-weight:550!important;
  }
  .story-home .home-benefit-copy strong{
    max-width:none;
    font-size:clamp(20px,5.45vw,25px)!important;
    line-height:1.18!important;
  }
  .story-home .home-benefit-progress{
    left:19px!important;
    right:19px!important;
    bottom:8px!important;
  }
}

@media(max-width:420px){
  .story-home.hero-transition{min-height:500px!important;height:128vw!important;max-height:570px!important}
  .story-home .home-benefit-card{grid-template-columns:54px minmax(0,1fr)!important;padding:17px 17px 22px!important;gap:13px!important}
  .story-home .home-benefit-icon{width:54px!important;height:54px!important;font-size:25px!important}
  .story-home .home-benefit-copy small{font-size:10.5px!important;letter-spacing:.17em!important}
  .story-home .home-benefit-copy strong{font-size:clamp(19px,5.5vw,23px)!important}
  .story-home .home-benefit-progress{left:17px!important;right:17px!important}
}

@media(prefers-reduced-motion:reduce){
  .story-home .transition-overlay,
  .story-home .transition-line,
  .story-home .home-benefit-card,
  .story-home .home-benefit-icon{animation:none!important;transition:none!important}
  .story-home .transition-line{display:none!important}
}