/* Capa de movimiento: mejora progresiva sobre executive.css. Sin JS todo el contenido se ve normal. */
body{overflow-x:clip}
.hero h1 em,.section h2 em{font-style:italic;color:var(--gold-dark)}
img{max-width:100%}

/* Barra de progreso */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

/* Header */
.header{transition:padding .35s ease,box-shadow .35s ease}
.header.scrolled{padding-top:11px;padding-bottom:11px;box-shadow:0 10px 30px rgba(24,45,50,.08)}
nav a.active{border-color:var(--gold-dark);color:var(--gold-dark)}

/* Hero: entrada escalonada */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wordUp{from{transform:translateY(112%)}to{transform:none}}
@keyframes portraitIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes portraitZoom{from{scale:1.25}to{scale:1.04}}
}

.hero{position:relative;overflow:clip}
.hero>*{position:relative;z-index:1}

.hero .eyebrow,.hero .hero-kicker,.hero .intro,.hero .actions,.hero .hero-meta-line{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation-delay:.05s}
.hero .intro{animation-delay:.75s}
.hero .actions{animation-delay:.95s}
.js:not(.ready) .hero h1{opacity:0}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .wi{display:inline-block;animation:wordUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*90ms + 150ms)}

.portrait{animation:portraitIn 1.2s cubic-bezier(.7,0,.2,1) .2s both}
.portrait img{scale:1.04;translate:calc(var(--mx,0)*12px) calc(var(--my,0)*8px);animation:portraitZoom 1.6s cubic-bezier(.2,.7,.2,1) .2s both;transition:translate .5s ease-out}

/* Revelado al hacer scroll */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* Títulos de sección por palabras */
.js h2.split.reveal{transform:none}
.js h2.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js h2.split .wi{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms + var(--d,0ms) + 100ms)}
.js h2.split.in .wi{transform:none}

/* Imágenes de proyecto: barrido al entrar */
.js .project-image{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--d,0ms) + .25s)}
.js .project-row.in .project-image{clip-path:inset(0)}

/* Líneas que se dibujan */
.draw{position:relative}
.draw::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold-dark);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--d,0ms) + .15s);pointer-events:none}
.draw.in::before{transform:scaleX(1)}
.project-row.draw::before{top:0}

/* Botones */
.button{min-height:46px;transition:background .25s,color .25s,transform .25s}
.button span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.button:hover span{transform:translate(4px,-4px)}
.button:active{transform:scale(.98)}

/* Proyectos */
.project-row{position:relative;transition:padding .35s ease,background .35s ease}
.project-copy{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.project-image{overflow:hidden}
.project-image img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.case-link{transition:border-color .25s,color .25s}
.case-link span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}

@media(hover:hover){
  .project-row:hover .project-copy{transform:translateX(10px)}
  .project-row:hover .project-image img{transform:scale(1.16)}
  .project-row:hover .case-link{border-color:var(--gold-dark);color:var(--gold-dark)}
  .project-row:hover .case-link span{transform:translate(4px,-4px)}
  .competency-list li{transition:padding .3s ease,color .3s ease}
  .competency-list li:hover{padding-left:12px;color:var(--gold-dark)}
  .platform-list li{transition:transform .25s ease}
  .platform-list li:hover{transform:translateY(-3px)}
  .case-card{transition:transform .35s ease,border-color .35s}
  .case-card:hover{transform:translateY(-5px);border-color:var(--accent)}
  .case-card:hover .case-media img{transform:scale(1.05)}
  .education article{transition:transform .35s ease}
  .education article:hover{transform:translateY(-5px)}
}

/* Contacto */
.contact{position:relative;overflow:hidden}
.contact>*{position:relative;z-index:1}
.contact-details>a{transition:color .25s,border-color .25s}
.contact-details>a:hover{color:var(--accent);border-color:var(--accent)}

/* Táctil y pantallas pequeñas */
@media(max-width:1050px){
  nav a{padding:11px 0}
    }
@media(max-width:700px){
      .ribbon-group span{font-size:18px;padding:15px 0}
  .ribbon-group i{padding:0 20px}
  .ribbon-track{animation-duration:30s}
  .button{width:100%;justify-content:space-between}
    .case-link{min-height:44px}
}
@media(max-width:380px){
  .hero h1{font-size:40px}
  .contact h2{font-size:36px}
}

/* Movimiento reducido: todo visible y quieto */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .js .project-image{clip-path:none}
  .draw::before{transform:scaleX(1)}
  .js:not(.ready) .hero h1{opacity:1}
  .ribbon{white-space:normal}
  .ribbon-track{display:flex;flex-wrap:wrap;justify-content:center}
  .ribbon-group+.ribbon-group{display:none}
  .progress{display:none}
}
@media print{.progress,.ribbon{display:none}}

.projects-note{margin:28px 0 0;font-size:13px}

.journey li{transition-delay:calc(var(--d,0ms) + .2s)}

/* Tarjetas del hero: entrada y flotación suave */
.hero .hero-kicker{animation-delay:.1s}.hero .hero-meta-line{animation-delay:1.1s}