/* =========================================================
   Animaciones de entrada
   ========================================================= */

/* Estado estable: el contenido siempre permanece visible. */
.hero-copy {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Entrada inicial del mensaje principal del hero. */
@-webkit-keyframes entrada-hero {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 90px, 0);
    transform: translate3d(0, 90px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes entrada-hero {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 90px, 0);
    transform: translate3d(0, 90px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.hero-copy {
  -webkit-animation: entrada-hero 1.85s cubic-bezier(.16, 1, .3, 1) both;
  animation: entrada-hero 1.85s cubic-bezier(.16, 1, .3, 1) both;
}

/* Entrada del hero en teléfono. */
@-webkit-keyframes entrada-hero-movil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 140px, 0);
    transform: translate3d(0, 140px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes entrada-hero-movil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 140px, 0);
    transform: translate3d(0, 140px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width:767px) {
  .hero-copy {
    -webkit-animation-name: entrada-hero-movil;
    animation-name: entrada-hero-movil;
  }
}

/* Escena cinematográfica de experiencia para escritorio. */
@media (min-width:768px) and (min-height:620px){
  .approach.is-cinematic{height:440svh;padding:0;background:#030d1a;color:#fff}
  .is-cinematic .approach-stage{position:sticky;top:88px;height:calc(100svh - 88px);padding:32px 6%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
  .is-cinematic .eyebrow{margin-bottom:12px;color:#6ecfff}
  .is-cinematic .approach-content{display:block;position:relative;flex:1;min-height:0}
  .is-cinematic .approach-visual{position:static;height:100%}
  .is-cinematic .approach-visual h2{position:relative;z-index:2;max-width:950px;margin:10px 0 0;font-size:clamp(34px,4.7vw,72px);line-height:1.06;letter-spacing:-2.5px}
  .is-cinematic .infrastructure-art{position:absolute;inset:0 30% 0 -7%;max-width:none;height:auto;margin:0;overflow:visible;border-radius:0;background:radial-gradient(ellipse at 48% 62%,#0c385a 0%,#030d1a00 63%);perspective:1000px}
  .is-cinematic .infrastructure-art:before{inset:34% 0 0;opacity:.35;transform:perspective(400px) rotateX(55deg) scale(1.25);mask-image:radial-gradient(ellipse,#000,transparent 68%)}
  .is-cinematic .rack{display:block;top:40%;left:40%;width:clamp(125px,13vw,210px);height:clamp(200px,30vh,325px);padding:18px;border:1px solid #78bdde70;border-radius:12px;background:linear-gradient(115deg,#285271,#0d253c 40%,#061625);box-shadow:18px 28px 35px #0007;transform-origin:50% 60%}
  .is-cinematic .rack:after{position:absolute;top:12%;right:8px;bottom:12%;width:2px;background:#5dd6ff;box-shadow:0 0 12px #42cfff;content:''}
  .is-cinematic .rack i{height:18%;margin:5% 0;border-color:#7997ab55;background:linear-gradient(110deg,#27445b,#0c1e30)}
  .is-cinematic .rack i:before{top:45%}
  .is-cinematic .rack i:after{top:42%;width:50%}
  .is-cinematic .rack-back{z-index:1;opacity:.7}
  .is-cinematic .rack-front{z-index:3}
  .is-cinematic .rack-side{z-index:2}
  .is-cinematic .art-caption{bottom:6%;left:22%;font-size:9px;letter-spacing:2px}
  .is-cinematic .principles{position:absolute;top:42%;right:0;display:grid;width:36%}
  .is-cinematic .principles>div,.is-cinematic .principles>div:first-child{grid-area:1/1;display:block;min-height:0;padding:0;border:0}
  .is-cinematic .principles h3{margin-bottom:8px;color:#fff;font-size:clamp(30px,3.8vw,60px);letter-spacing:-1.5px}
  .is-cinematic .principles p{max-width:370px;color:#afc2d4;font-size:clamp(14px,1.4vw,19px);line-height:1.6}
}

/* Escena cinematográfica de experiencia para teléfono. */
@media (max-width:767px) and (min-height:560px){
  .approach.is-cinematic{height:360svh;padding:0;background:#030d1a;color:#fff}
  .is-cinematic .approach-stage{position:sticky;top:76px;height:calc(100svh - 76px);padding:28px 24px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
  .is-cinematic .eyebrow{margin-bottom:10px;color:#6ecfff}
  .is-cinematic .approach-content{display:block;position:relative;flex:1;min-height:0}
  .is-cinematic .approach-visual{position:static;height:100%}
  .is-cinematic .approach-visual h2{position:relative;z-index:2;margin:8px 0 0;font-size:clamp(31px,9.5vw,48px);line-height:1.08;letter-spacing:-1.8px}
  .is-cinematic .infrastructure-art{position:absolute;inset:26% 0 0;max-width:none;height:auto;margin:0;overflow:visible;border-radius:0;background:radial-gradient(ellipse at 50% 55%,#0c385a,#030d1a00 68%);perspective:700px}
  .is-cinematic .infrastructure-art:before{inset:28% 0 0;opacity:.35;transform:perspective(400px) rotateX(55deg) scale(1.35);mask-image:radial-gradient(ellipse,#000,transparent 68%)}
  .is-cinematic .rack{display:block;top:20%;left:38%;width:92px;height:185px;padding:10px;border-radius:9px;transform-origin:50% 60%}
  .is-cinematic .rack i{height:18%;margin:5% 0}
  .is-cinematic .rack-back{left:20%;z-index:1;opacity:.7}
  .is-cinematic .rack-front{left:40%;z-index:3}
  .is-cinematic .rack-side{left:58%;z-index:2}
  .is-cinematic .art-caption{bottom:8%;left:13%;font-size:7px;letter-spacing:1px}
  .is-cinematic .principles{position:absolute;top:52%;right:0;display:grid;width:55%}
  .is-cinematic .principles>div,.is-cinematic .principles>div:first-child{grid-area:1/1;display:block;min-height:0;padding:0;border:0}
  .is-cinematic .principles h3{margin-bottom:8px;color:#fff;font-size:36px;letter-spacing:-1px}
  .is-cinematic .principles p{max-width:190px;color:#afc2d4;font-size:13px;line-height:1.5}
}