/* dinamismo.css — capa adicional: cargar DESPUÉS de estilo.css. No cambia colores, tipografías ni la estética. */

/* ---- Hero: texto a la izquierda; la zona derecha queda libre para los rostros del video ---- */
.hero{--hero-left:max(6.5vw,30px);--hero-size:clamp(2.6rem,5.4vw,5.6rem);--hero-w:min(56vw,880px); /* para afinar: posición, tamaño y ancho del texto */
  place-items:center start;text-align:left}
.hero-copy{max-width:var(--hero-w);padding:0 0 0 var(--hero-left);text-shadow:0 2px 28px rgba(5,9,13,.55)}
.hero h1{font-size:var(--hero-size);line-height:1.04}
.hero .cta{justify-content:flex-start}
.hero .cue{left:var(--hero-left);transform:none;margin-left:4px}
.hero video{inset:-4% 0 auto 0;height:108%;object-position:62% 50%;translate:0 calc(var(--hs,0) * 6%)}
.shade{background:linear-gradient(90deg,rgba(5,9,13,.72) 0,rgba(5,9,13,.38) 36%,rgba(5,9,13,0) 62%),linear-gradient(to bottom,transparent 72%,var(--bg))}
/* el resaltado azul acompaña cada línea y termina donde termina la palabra */
.hero h1 .mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em;background-position:0 50%;background-size:0 1.04em;animation:wipe-line .8s .9s ease-out forwards!important}
@keyframes wipe-line{to{background-size:100% 1.04em}}
@media(max-width:820px){
  .hero{--hero-left:5vw;--hero-size:clamp(2.2rem,10.4vw,3.6rem);place-items:end start}
  .hero-copy{max-width:100%;padding:0 5vw 15vh}
  .hero video{object-position:70% 25%}
  .shade{background:linear-gradient(to bottom,rgba(5,9,13,.15) 0,rgba(5,9,13,.05) 38%,rgba(5,9,13,.82) 78%,var(--bg))}
  .hero .cue{display:none}
}

/* ---- Dinamismo ---- */
.nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform-origin:left;transform:scaleX(var(--pp,0))}
/* títulos: las palabras suben desde una máscara, como el titular del hero; la línea azul se dibuja */
.js .sec-title.reveal,.js .about-text h2.reveal{opacity:1;transform:none;transition:none}
.js .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .wi{display:inline-block;translate:0 115%;transition:translate .95s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 70ms)}
.js .in .wi{translate:0 0}
.js .sec-title:after{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .55s}
.js .sec-title.in:after{transform:none}.js .trusted .sec-title:after{transform-origin:center}
/* trabajos: el punto de cada título aparece con un pequeño rebote y las miniaturas se asientan */
@keyframes dot{from{scale:0}60%{scale:1.5}to{scale:1}}
.js .group.in h3:before{animation:dot .6s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{from{scale:1.16}}
.js .group.in .yt img{animation:settle 1.3s cubic-bezier(.2,.8,.2,1) both}
/* contacto: la flecha acompaña al hover */
.mail:after{display:inline-block;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.mail:hover:after,.mail:focus-visible:after{translate:6px -6px}

/* ---- Con el azul nuevo (#034488) el texto de los botones va en blanco ---- */
.btn{color:#fff}.btn:hover{color:#05090d}
.ylink:hover{color:#fff}
.skip{color:#fff}