/* Impulso360 — static rebuild of reference/jaguarete3.jpg
   One-viewport layout. All sizes relative (vw / vh / % / cqw). No animations. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%}
body{
  background:#000612;
  color:#fff;
  font-family:"Poppins","Segoe UI",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
html{overflow-x:clip}
/* scroll track: the stage stays pinned while the film is scrubbed */
.track{position:relative;height:300vh}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:6.7vh 93.3vh;
}
/* sections released after the film */
.after{display:grid;grid-template-rows:26.7vh 7.8vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- NAV ---------- */
.nav{
  position:relative;z-index:5;
  display:flex;align-items:center;
  padding:0 4.8vw 0 4.3vw;
  background:#000612;
  border-bottom:1px solid #0d1a30;
}
.nav__logo{height:5.4vh;width:auto}
.nav__menu{display:flex;align-items:center;gap:3.6vw;margin-left:auto;margin-right:2.8vw}
.nav__link{position:relative;font-size:1.55vh;font-weight:400;color:#fff;line-height:1}
.nav__link--active{color:#00ffff}
.nav__link--active::after{content:"";position:absolute;left:0;right:0;bottom:-1.9vh;height:2px;background:#00ffff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:3.7vh;padding:0 1.6vw;border-radius:.6vh;
  font-size:1.55vh;font-weight:500;line-height:1;white-space:nowrap;
}
.btn--primary{background:#0b5ffe;color:#fff}
.btn--outline{background:transparent;color:#19e3d0;border:1.5px solid #19d9c0}
.nav .btn--primary{background:#085efd}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  background:#000614;
  perspective:140vw;
}
/* 16:9 frame that covers the viewport (centred on the viewport, hero starts 6.7vh below the top).
   The static scene and the scroll film share this exact box, so the crossfade never jumps. */
.frame{
  position:absolute;left:50%;top:43.3vh;
  width:max(100vw,177.78vh);height:max(56.25vw,100vh);
  transform:translate(calc(-50% + var(--frame-shift,0vw)),-50%) scale(var(--frame-scale,1));
  pointer-events:none;
}
:root{--frame-shift:12vw;--frame-scale:1.1}
@media (max-width:1500px) and (min-width:1101px){:root{--frame-shift:16vw}}
.frame--bg{z-index:0}
body.film-live .frame--bg{opacity:0!important}  /* sin transición: si no, se cruzan dos yaguaretés */
/* left scrim: near-black blue, strong at the left edge, dissolving into the jungle (no rectangle) */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,4,16,.94) 0%,rgba(0,4,16,.82) 22%,rgba(0,4,16,.5) 40%,rgba(0,4,16,.12) 56%,rgba(0,4,16,0) 68%)}
.film{z-index:1;object-fit:cover;background:transparent;pointer-events:none;opacity:0}
body.film-ready .film{opacity:1}
body.film-failed .film{display:none}
.scene__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* capture-only state used to grab the film's start frame: hides every HTML/UI element, keeps the scene */
body.capture .nav>*,body.capture .hero__copy,body.capture .services>*,body.capture .footer>*{visibility:hidden}
body.capture .film{display:none}
body.capture .hero,body.capture .stage{overflow:visible}
body.capture .nav,body.capture .services,body.capture .footer{background:transparent;border-color:transparent}
.hero__copy{position:absolute;inset:0;z-index:4;pointer-events:none}
.chapter{
  display:flex;flex-direction:column;
  position:absolute;top:50%;transform:translateY(calc(-50% + var(--drift,0vh)));
  width:min(42vw,46rem);pointer-events:auto;
  will-change:opacity,filter;
}
.side--left{left:4.3vw;text-align:left;align-items:flex-start}
.chapter .eyebrow{font-size:clamp(.72rem,.9vw,.95rem);color:#dfe6f3;letter-spacing:.42em;margin-bottom:1.2rem}
.side--right{right:4.3vw;text-align:right;align-items:flex-end}
.chapter--next{opacity:0;pointer-events:none}
.h1--chapter{font-size:clamp(2.2rem,3.4vw,3.8rem)}
.eyebrow{
  font-size:1.1vh;font-weight:400;letter-spacing:.42em;color:#c9cfe0;text-transform:uppercase;
  margin-bottom:.7vh;
}
.h1{
  font-size:clamp(2.4rem,3.15vw,4rem);font-weight:800;line-height:1.08;text-wrap:balance;letter-spacing:-.015em;color:#fff;
  text-shadow:0 .15rem 1.4rem rgba(0,4,16,.7);
}
.h1 .grad{color:#2ad9f6;background:none;-webkit-text-fill-color:#2ad9f6}  /* luminous cyan, no dark blue on the dark plate */
.sub{font-size:clamp(1.05rem,1.25vw,1.5rem);font-weight:400;color:#e6ebf5;line-height:1.5;margin-top:1.4rem;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero__note{margin-top:1.1rem;font-size:.95rem;color:#b9bfd3}
.hero__actions .btn{height:3.5rem;padding:0 2.2rem;font-size:1.125rem;border-radius:.55rem;width:auto}
.hero__actions .btn--primary{background:#0b5ffe;color:#fff}
.hero__actions .btn--outline{background:rgba(0,6,18,.62);border:1.5px solid #22d3ee;color:#fff}


/* ---------- SERVICES ---------- */
.services{
  background:#00071b;
  display:grid;
  grid-template-rows:7.8vh 1fr;
  padding:0 16.3vw 0 15.9vw;
}
.services__head{text-align:center;padding-top:1.7vh}
.services__title{font-size:2.8vh;font-weight:600;line-height:1.1}
.services__sub{font-size:1.3vh;color:#b9bfd3;margin-top:.7vh}
.cards{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:8.2vh 8.2vh;column-gap:1.1vw;row-gap:1.4vh;align-content:start}
.card{
  display:flex;align-items:center;gap:1.4vw;
  background:#00091f;border:1px solid #14264a;border-radius:.8vh;
  padding:0 1.2vw;
}
.card__icon{flex:0 0 auto;width:4.3vh;height:4.3vh;color:#22c8e6}
.card__icon svg{width:100%;height:100%;display:block}
.card__title{font-size:1.8vh;font-weight:500;line-height:1.2;color:#fff}
.card__link{display:block;margin-top:.55vh;font-size:1.3vh;color:#22c8e6;font-weight:400}

/* ---------- FOOTER ---------- */
.footer{
  display:flex;align-items:center;
  padding:0 14.5vw 0 4.3vw;
  background:#00081f;border-top:1px solid #0d1a30;
}
.footer__tag{font-size:1.1vh;letter-spacing:.45em;color:#9aa3bd;text-transform:uppercase}
.footer .btn--outline{margin-left:auto;height:4vh;gap:.6vw;border-radius:.8vh;padding:0 1.3vw}
.footer .btn--outline svg{width:1.9vh;height:1.9vh}

/* ---------- chapters as plain sections (reduced motion / no script) ---------- */
.chapters-static{display:none;padding:6vh 4.3vw;background:#000612;border-top:1px solid #0d1a30}
.chapters-static article{max-width:60rem;margin:0 auto 4vh}
.chapters-static h2{font-size:2.6vh;font-weight:600;color:#22c8e6;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.6vh}
.chapters-static p{font-size:2.4vh;color:#fff}
body.reduced .track{height:auto}
body.reduced .stage{position:static}
body.reduced .film{display:none}
body.reduced .chapters-static{display:block}
body.reduced .chapter--next{display:none}
@media (prefers-reduced-motion: reduce){
  .track{height:auto}.stage{position:static}.film{display:none}.chapters-static{display:block}.chapter--next{display:none}
}

/* ---------- tablet: text on top, scene below (the jaguar must not interfere with reading) ---------- */
@media (min-width: 900px) and (max-width: 1100px){
  :root{--frame-shift:0vw;--frame-scale:1}
  .frame{left:50%;top:78%;width:150vw;height:84.375vw;transform:translate(-50%,-50%)}
  .hero::before{background:linear-gradient(180deg,rgba(0,4,16,.92) 0%,rgba(0,4,16,.65) 40%,rgba(0,4,16,0) 56%)}
  .chapter{top:5%;left:6vw;right:6vw;width:auto;transform:translateY(var(--drift,0vh));text-align:center;align-items:center}
  .h1{font-size:clamp(2rem,4.4vw,2.8rem)}.h1--chapter{font-size:clamp(1.8rem,4vw,2.5rem)}
  .sub{font-size:1.15rem;margin-top:.9rem;max-width:none}
  .hero__actions{margin-top:1.4rem;justify-content:center}
}

/* ---------- narrow viewports: no pinning, texts on top, film letterboxed below ---------- */
@media (max-width: 899px){
  .track{height:260vh}
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:8vh 1fr}
  .after{grid-template-rows:auto auto}
  .nav{padding:0 4vw;min-width:0}
  .nav__menu{display:none}
  .nav__logo{height:4.6vh;max-width:55vw;object-fit:contain}
  .hero{height:auto;min-height:100svh}
  /* wider-than-viewport 16:9 frame: crops the jungle sides, keeps the centred jaguar large */
  :root{--frame-shift:0vw;--frame-scale:1}
  .frame{left:50%;top:72%;width:150vw;height:84.375vw;transform:translate(-50%,-50%)}
  .hero::before{background:linear-gradient(180deg,rgba(0,4,16,.9) 0%,rgba(0,4,16,.6) 30%,rgba(0,4,16,0) 48%)}
  .chapter{top:3%;left:5vw;right:5vw;width:auto;transform:translateY(var(--drift,0vh));text-align:center;align-items:center}
  .h1{font-size:clamp(1.7rem,6.6vw,2.2rem)}.h1--chapter{font-size:clamp(1.5rem,6vw,2rem)}.sub{font-size:.92rem;line-height:1.45;margin-top:.7rem;max-width:none}.chapter .eyebrow{font-size:.62rem;letter-spacing:.2em;margin-bottom:.6rem}
  .hero__actions{gap:2vw;justify-content:center}
  .hero__actions{margin-top:1rem;gap:.55rem}
  .hero__note{font-size:.78rem;margin-top:.55rem}
  .hero__actions .btn{height:2.75rem;padding:0 1.3rem;font-size:.95rem}
  /* En celular el encabezado muestra solo el antetítulo y el título: el párrafo, el texto
     de apoyo y los dos botones quedaban encima del yaguareté. Se ocultan con display:none
     para que tampoco reserven altura. En computadora siguen visibles y sin cambios. */
  .hero .chapter--inicio .sub,
  .hero .chapter--inicio .hero__actions,
  .hero .chapter--inicio .hero__note{display:none}
  .services{padding:3vh 4vw;grid-template-rows:auto auto;min-width:0}
  .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;row-gap:1.2vh;column-gap:2vw}
  .card{padding:1.6vh 3vw;min-height:9vh;min-width:0;gap:3vw}
  .card__title{font-size:3.4vw}.card__link{font-size:2.8vw}.card__icon{width:7vw;height:7vw}
  .footer{padding:2vh 4vw;height:auto;flex-wrap:wrap;gap:1.5vh;min-width:0}
  .footer .btn--outline{margin-left:0}
}