/* River MKT · sistema de movimiento "Cauce en movimiento" v1 (2026-10-24)
   Principio: todo avanza como los tres cauces del símbolo, en paralelo y hacia una dirección.
   - Duraciones: --m-1 160ms (respuesta), --m-2 320ms (estado), --m-3 640ms (entrada), --m-4 900ms (titular).
   - Curvas: --e-out para entrar y responder; --e-io para movimiento ambiental.
   - Los recorridos ligados al scroll usan animation-timeline (sin JavaScript ni trabajo fuera de pantalla).
     Sin soporte, o con "reducir movimiento", todo queda visible y quieto. */
:root{--m-1:160ms;--m-2:320ms;--m-3:640ms;--m-4:900ms;--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1)}

/* El sistema anterior de apariciones queda desactivado: el contenido siempre es visible en reposo */
.js [data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- Hero: composición con el símbolo ---------- */
.hero .hero-copy h1{grid-column:1/span 7;grid-row:2}
.hero .hero-copy .eyebrow{grid-column:1/span 7;grid-row:1}
.hero .hero-side{grid-column:1/span 6;grid-row:3;padding-bottom:0}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 .w{display:inline-block}
.mark3d{grid-column:8/-1;grid-row:1/span 3;align-self:center;justify-self:end;width:100%;max-width:540px;aspect-ratio:520/400;position:relative;perspective:1100px;perspective-origin:50% 40%;pointer-events:none}
.m3-float,.m3-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.m3-tilt{transform:rotateX(calc(16deg + var(--py,0) * -16deg)) rotateY(calc(-26deg + var(--px,0) * 24deg));will-change:transform}
.m3-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(calc(var(--z) * 1px))}
.m3-layer path{stroke-linecap:butt;stroke-linejoin:round}
.m3-shine{mix-blend-mode:screen}
.m3-glow{position:absolute;left:18%;top:22%;width:64%;height:56%;border-radius:50%;background:radial-gradient(closest-side,rgba(154,199,213,.55),rgba(154,199,213,0));filter:blur(24px);transform:translateZ(-90px)}
.m3-shadow{position:absolute;left:10%;right:6%;bottom:-4%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(14,52,70,.32),rgba(14,52,70,0));filter:blur(8px)}
@media (max-width:1099px){
  .hero .hero-copy h1,.hero .hero-copy .eyebrow,.hero .hero-side{grid-column:1/-1}
  .mark3d{grid-column:1/-1;grid-row:auto;justify-self:center;max-width:340px;margin-top:8px}
}
@media (max-width:599px){.mark3d{max-width:260px}}

/* ---------- Interacciones ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background-color var(--m-2) var(--e-out),color var(--m-2) var(--e-out),border-color var(--m-2) var(--e-out),transform var(--m-1) var(--e-out),box-shadow var(--m-2) var(--e-out)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-110%);transition:transform var(--m-4) var(--e-out)}
.btn:hover::after{transform:translateX(110%)}
.btn-primary:hover{box-shadow:0 10px 24px -12px rgba(14,52,70,.55)}
.btn:active{transform:scale(.97)}
.link-arrow svg{transition:transform var(--m-2) var(--e-out)}
.link-arrow:active svg{transform:translateX(7px)}
.lang,.menu-btn{transition:border-color var(--m-2) var(--e-out),background-color var(--m-2) var(--e-out),transform var(--m-1) var(--e-out)}
.lang:active,.menu-btn:active{transform:scale(.94)}
.ledger b{transition:transform var(--m-2) var(--e-out)}
.ledger li:hover b{transform:translateX(4px)}
.more li b{transition:color var(--m-2) var(--e-out)}
.more li:hover b{color:var(--petroleo)}
.pills span{transition:background-color var(--m-2) var(--e-out),border-color var(--m-2) var(--e-out),color var(--m-2) var(--e-out),transform var(--m-1) var(--e-out)}
.pills label:active span{transform:scale(.96)}
.field input,.field textarea{transition:border-color var(--m-2) var(--e-out),box-shadow var(--m-2) var(--e-out)}

/* Proyectos: profundidad y luz al pasar el cursor (solo con mouse; lo activa motion.js) */
[data-tilt]{transform-style:preserve-3d;transition:transform var(--m-3) var(--e-out)}
[data-tilt] .m-phone{transform:translateZ(0);transition:transform var(--m-3) var(--e-out)}
.can-tilt [data-tilt]{transform:perspective(1400px) rotateX(calc(var(--ty,0) * -5deg)) rotateY(calc(var(--tx,0) * 6deg))}
.can-tilt [data-tilt] .m-phone{transform:translateZ(60px)}
.can-tilt [data-tilt].tilting{transition-duration:180ms}
[data-tilt] .frame{position:relative}
[data-tilt] .frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--m-3) var(--e-out);background:radial-gradient(600px circle at calc((var(--tx,0) + .5) * 100%) calc((var(--ty,0) + .5) * 100%),rgba(255,255,255,.16),transparent 60%)}
[data-tilt].tilting .frame::after{opacity:1}

/* ---------- Movimiento (solo sin "reducir movimiento") ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Titular: las palabras llegan en secuencia al cargar */
  .hero h1 .w{animation:rm-word var(--m-4) var(--e-out) both;animation-delay:calc(var(--i) * 90ms + 60ms)}
  @keyframes rm-word{from{transform:translateY(.42em);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}}
  .hero .eyebrow{animation:rm-fade var(--m-3) var(--e-out) both}
  .hero .hero-side{animation:rm-rise var(--m-3) var(--e-out) both;animation-delay:380ms}
  @keyframes rm-fade{from{opacity:0}}
  @keyframes rm-rise{from{opacity:0;transform:translateY(18px)}}

  /* Símbolo: entra armándose capa por capa y luego respira lento */
  .m3-float{animation:rm-m3-in 1.4s var(--e-out) both,rm-m3-float 16s var(--e-io) 1.4s infinite alternate}
  .mark3d.is-off .m3-float{animation-play-state:paused}
  .m3-layer{animation:rm-m3-layer 1.2s var(--e-out) both;animation-delay:calc(200ms + (var(--z) + 40) * 9ms)}
  @keyframes rm-m3-in{from{opacity:0;transform:translateY(24px) rotateY(-24deg)}to{opacity:1;transform:none}}
  @keyframes rm-m3-float{0%{transform:translateY(-6px) rotateY(-5deg) rotateX(2deg)}100%{transform:translateY(8px) rotateY(7deg) rotateX(-3deg)}}
  @keyframes rm-m3-layer{from{transform:translateZ(0)}to{transform:translateZ(calc(var(--z) * 1px))}}

  @supports (animation-timeline: view()){
    /* Las capturas del inicio se enderezan al bajar */
    .stage{transform-origin:50% 100%;animation:rm-stage linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes rm-stage{from{transform:perspective(1600px) rotateX(14deg) scale(.95)}to{transform:none}}
    .stage .s-phone{animation:rm-par-ph linear both;animation-timeline:view();animation-range:cover}

    /* Encabezados de sección: suben al entrar */
    .sec-head > *{animation:rm-in linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
    .sec-head .lead{animation-range:entry 20% entry 90%}
    @keyframes rm-in{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

    /* Proyectos: la imagen se mueve más lento que la página y el celular más rápido */
    .case-media .frame img{scale:1.08;animation:rm-par-img linear both;animation-timeline:view();animation-range:cover}
    .case-media .m-phone{animation:rm-par-ph linear both;animation-timeline:view();animation-range:cover}
    @keyframes rm-par-img{from{translate:0 -3.5%}to{translate:0 3.5%}}
    @keyframes rm-par-ph{from{translate:0 56px}to{translate:0 -56px}}
    .case-top{animation:rm-in linear both;animation-timeline:view();animation-range:entry 10% entry 80%}

    /* Servicios: los tres cauces se dibujan y encienden cada frente */
    .flow .fl{stroke-dasharray:1;animation:rm-draw linear both;animation-timeline:view();animation-range:entry calc(30% + var(--d) * 8%) cover calc(48% + var(--d) * 6%)}
    .flow .fl-end{animation:rm-fade-in linear both;animation-timeline:view();animation-range:cover 40% cover 55%}
    @keyframes rm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    @keyframes rm-fade-in{from{opacity:0}to{opacity:1}}
    .group{position:relative;border-top-color:rgba(22,75,99,.14)!important}
    .group::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--petroleo);transform-origin:left;animation:rm-bar linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
    .group:nth-child(2)::before{opacity:.7;animation-range:entry 30% entry 90%}
    .group:nth-child(3)::before{opacity:.45;animation-range:entry 40% entry 100%}
    @keyframes rm-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .need li{animation:rm-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%}

    /* Enfoque: una línea recorre las etapas y marca cada una al llegar */
    .steps{position:relative;padding-left:48px;border-top-color:transparent}
    .steps::before,.steps::after{content:"";position:absolute;left:11px;top:40px;bottom:40px;width:2px;border-radius:2px;background:rgba(154,199,213,.22)}
    .steps::after{background:var(--bruma);transform-origin:top;animation:rm-rail linear both;animation-timeline:view();animation-range:entry 30% exit 40%}
    @keyframes rm-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .step{position:relative}
    .step::before{content:"";position:absolute;left:-43px;top:36px;width:14px;height:14px;border-radius:50%;background:var(--petroleo);box-shadow:0 0 0 2px var(--bruma);z-index:1;animation:rm-node linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
    @keyframes rm-node{from{background:var(--petroleo);transform:scale(.7)}to{background:var(--bruma);transform:scale(1)}}
    .step .step-n,.step dl > div{animation:rm-in linear both;animation-timeline:view();animation-range:entry 30% cover 35%}
    .step dl > div:nth-child(2){animation-range:entry 40% cover 40%}
    .step dl > div:nth-child(3){animation-range:entry 50% cover 45%}

    /* Contacto y equipo */
    .contact-copy > *,.team-copy > *{animation:rm-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .form{animation:rm-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (max-width:899px){
  @media (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){
    .steps{padding-left:36px}
    .steps::before,.steps::after{left:7px}
    .step::before{left:-35px;top:34px}
  }}
}
/* Versión estática cuidada (reducir movimiento): símbolo con su perspectiva fija, sin animaciones */
@media (prefers-reduced-motion:reduce){
  .m3-tilt{transform:rotateX(16deg) rotateY(-26deg)}
  .btn::after{display:none}
  [data-tilt],[data-tilt] .m-phone{transform:none!important;transition:none}
}