/* Tecnimetro · capa de animación v2 — movimiento sobrio, con dirección y ritmo */
:root{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-io:cubic-bezier(.77,0,.18,1)}
html{scroll-behavior:smooth}

/* Antes de arrancar, todo lo marcado espera oculto (evita parpadeos) */
[data-fx]{transition-delay:var(--fx-d,0s)!important}

/* Texto: sube, se enfoca */
.fx-t{opacity:0;transform:translate3d(0,44px,0);filter:blur(8px);transition:opacity 1.1s var(--fx-ease),transform 1.3s var(--fx-ease),filter 1.1s var(--fx-ease)}
.fx-ti{opacity:0;filter:blur(8px);transition:opacity 1.1s var(--fx-ease),filter 1.1s var(--fx-ease)}
.fx-t.fx-in,.fx-ti.fx-in{opacity:1;transform:none;filter:none}

/* Titulares: palabra a palabra desde una máscara */
.fx-h .fx-w{display:inline-block;vertical-align:top;clip-path:inset(-35% -8% -12% -8%);}
.fx-h .fx-wi{display:inline-block;transform:translate3d(0,120%,0) rotate(8deg);transform-origin:0 100%;opacity:0;
  transition:transform 1.35s var(--fx-ease),opacity .8s var(--fx-ease);transition-delay:calc(var(--fx-d,0s) + var(--w,0)*75ms)}
.fx-h.fx-in .fx-wi{transform:none;opacity:1}

/* Fotos: barrido diagonal a 30° (corte de la marca) + leve acercamiento */
.fx-img{clip-path:polygon(0 0,0 0,-35% 100%,-35% 100%);transform:scale(1.25);transition:clip-path 1.6s var(--fx-io),transform 2.4s var(--fx-ease)}
.fx-img.fx-in{clip-path:polygon(0 0,135% 0,100% 100%,-35% 100%);transform:none}

/* Máquinas recortadas */
.fx-cut{opacity:0;transform:translate3d(110px,0,0) rotate(-4deg) scale(.86);transition:opacity 1.1s var(--fx-ease),transform 1.6s var(--fx-ease)}
.fx-cutin{opacity:0;translate:140px 0;scale:.9;transition:opacity 1.2s var(--fx-ease),translate 1.8s var(--fx-ease),scale 1.8s var(--fx-ease)}
.fx-cut.fx-in,.fx-cutin.fx-in{opacity:1;transform:none;translate:0 0;scale:1}

/* Bloques (paneles, tarjetas, celdas) */
.fx-blk{opacity:0;transform:translate3d(0,70px,0) scale(.97);clip-path:inset(18% 0 0 0);transition:opacity 1.1s var(--fx-ease),transform 1.4s var(--fx-ease),clip-path 1.4s var(--fx-io)}
.fx-blk.fx-in{opacity:1;transform:none;clip-path:inset(-40px -40px -40px -40px)}

/* Logos de marcas: de gris a color */
.fx-logo{opacity:0;filter:grayscale(1) blur(2px);transform:perspective(600px) rotateX(75deg) translate3d(0,30px,0) scale(.8);transform-origin:50% 100%;transition:opacity .9s var(--fx-ease),filter 1.8s var(--fx-ease),transform 1.4s var(--fx-ease)}
.fx-logo.fx-in{opacity:1;filter:none;transform:none}

/* Isotipo de las etiquetas */
.fx-iso{opacity:0;transform:translate3d(-10px,0,0) rotate(-35deg) scale(.6);transition:opacity .7s var(--fx-ease),transform 1s var(--fx-ease)}
.fx-iso.fx-in{opacity:1;transform:none}

/* Encabezado */
.fx-topbar{animation:fx-drop .9s var(--fx-ease) both}
.fx-header{animation:fx-drop 1s var(--fx-ease) .08s both}
.fx-header nav a{animation:fx-navin .8s var(--fx-ease) both;animation-delay:calc(.25s + var(--n,0)*50ms)}
@keyframes fx-drop{from{transform:translate3d(0,-100%,0);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-navin{from{transform:translate3d(0,-10px,0);opacity:0}to{transform:none;opacity:1}}
.fx-nav{position:relative}
.fx-nav::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:linear-gradient(120deg,#FAAC20,#F26B1D);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--fx-ease)}
.fx-nav:hover::after{transform:scaleX(1);transform-origin:left}

/* Fondos con parallax */
.fx-plx{transform:translate3d(0,var(--plx,0px),0) scale(1.1);will-change:transform}

/* Botones: elevación y flecha que avanza */
.fx-btn{transition:transform .45s var(--fx-ease),box-shadow .45s var(--fx-ease),filter .45s}
.fx-btn:hover{transform:translate3d(0,-2px,0);filter:brightness(1.06)}
.fx-arrow{display:inline-block;transition:transform .45s var(--fx-ease)}
.fx-btn:hover .fx-arrow,a:hover>.fx-arrow{transform:translate3d(7px,0,0)}

/* Tarjetas de equipo */
.fx-card{transition:transform .6s var(--fx-ease),box-shadow .6s var(--fx-ease)}
.fx-card img{transition:transform 1s var(--fx-ease)}
.fx-card:hover{transform:translate3d(0,-6px,0);box-shadow:0 28px 50px -30px rgba(20,18,23,.5)}
.fx-card:hover img{transform:scale(1.05)}

/* Franjas de división en la portada: la máquina avanza al pasar el cursor */
a:hover>img[style*="drop-shadow"]{transform:translate3d(-10px,0,0) scale(1.03);transition:transform .9s var(--fx-ease)}
a>img[style*="drop-shadow"]{transition:transform .9s var(--fx-ease)}

/* Video */
.fx-video{transition:box-shadow .6s var(--fx-ease)}
.fx-video:hover{box-shadow:0 30px 60px -34px rgba(20,18,23,.6)}

/* Franja de colores del footer: deslizamiento lento */
.fx-bands>div{background-size:200% 100%!important;animation:fx-band 10s linear infinite}
@keyframes fx-band{to{background-position:-200% 0}}

/* Mapa animado */
.fx-map{display:block;width:100%;height:100%}
.fx-map .hx{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.2);animation:fx-hx .8s var(--fx-ease) forwards;animation-delay:var(--d)}
.fx-map.paused .hx,.fx-map.paused .ring,.fx-map.paused .pin,.fx-map.paused .beam{animation-play-state:paused}
@keyframes fx-hx{60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
.fx-map .tw{animation:fx-tw 3.6s ease-in-out infinite;animation-delay:var(--t)}
@keyframes fx-tw{0%,100%{fill-opacity:0}50%{fill-opacity:.55}}
.fx-map .ring{transform-box:fill-box;transform-origin:center;animation:fx-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.fx-map .ring2{animation-delay:.93s}.fx-map .ring3{animation-delay:1.86s}
@keyframes fx-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(5);opacity:0}}
.fx-map .scan{transform-box:view-box;transform-origin:var(--px) var(--py);animation:fx-scan 7s linear infinite;opacity:.55}
@keyframes fx-scan{to{transform:rotate(360deg)}}
.fx-map .pin{transform-box:fill-box;transform-origin:center;animation:fx-pin 1.4s var(--fx-ease) 1.1s both}
@keyframes fx-pin{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.fx-map .beam{stroke-dasharray:5 11;animation:fx-beam 1.6s linear infinite;opacity:.7}
@keyframes fx-beam{to{stroke-dashoffset:-32}}

/* Progreso de lectura */
#fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);z-index:9998;background:linear-gradient(90deg,#FAAC20,#F26B1D,#2FC3BC,#2FB8FF,#8CC63F,#FF6B5E);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  [data-fx],.fx-h .fx-wi{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .fx-topbar,.fx-header,.fx-header nav a,.fx-bands>div,.fx-map *{animation:none!important}
  .fx-plx{transform:none!important}
  .fx-map .hx{opacity:1;transform:none}
}

/* ---------- Interacción (fx_plus) ---------- */
/* Encabezado inteligente */
.fx-smart{position:sticky;top:0;z-index:60;transition:translate .55s var(--fx-ease),box-shadow .5s var(--fx-ease),background-color .5s}
.fx-smart.fx-scrolled{box-shadow:0 14px 40px -24px rgba(20,18,23,.45);background-color:rgba(255,255,255,.94)!important;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}


/* Tarjetas: foco de luz */
.fx-card{transform-style:preserve-3d;will-change:transform}
.fx-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(250,172,32,.16),transparent 45%)}
.fx-card:hover::after{opacity:1}

/* Héroe en planos */
section:first-of-type img[style*="position:absolute"],section:first-of-type video{transition:margin .9s var(--fx-ease)}

/* Cinta de marcas */
.fx-ribbon{position:relative;overflow:hidden;background:#141217;border-top:1px solid #2A272E;padding:30px 0}
.fx-rb-track{display:flex;align-items:center;gap:56px;width:max-content;will-change:transform}
.fx-rb-t{font-family:'Archivo',Arial,sans-serif;font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 800;text-transform:uppercase;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);white-space:nowrap;transition:color .4s,-webkit-text-stroke-color .4s}
.fx-rb-t:hover{color:#FAAC20;-webkit-text-stroke-color:#FAAC20}
.fx-rb-track i{display:block;width:34px;height:10px;background:linear-gradient(120deg,#FAAC20,#F26B1D);transform:skewX(-30deg)}

/* Wordmark del footer */
.fx-fmark{position:relative;margin-top:8px;line-height:.8;user-select:none}
.fx-fmark span{display:block;font-family:'Archivo',Arial,sans-serif;font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125,'wght' 800;font-size:150px;letter-spacing:-.01em;white-space:nowrap;text-align:center}
.fx-fm-o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14)}
.fx-fm-f{position:absolute;inset:0;background:linear-gradient(90deg,#FAAC20,#F26B1D 30%,#2FC3BC 50%,#2FB8FF 65%,#8CC63F 80%,#FF6B5E);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(0 100% 0 0)}

@media (prefers-reduced-motion:reduce){.fx-fm-f{clip-path:none}}

/* Vida continua: las máquinas respiran después de entrar */
.fx-cut.fx-in{animation:fx-breathe 6.5s ease-in-out 1.7s infinite}
.fx-cutin.fx-in{animation:fx-breathe2 7.5s ease-in-out 1.9s infinite}
@keyframes fx-breathe{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes fx-breathe2{0%,100%{transform:none}50%{transform:translate3d(0,-10px,0)}}
@media (prefers-reduced-motion:reduce){.fx-cut.fx-in,.fx-cutin.fx-in{animation:none}}

/* Cintas de dato */
.fx-tag{opacity:0;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transform:translate3d(60px,0,0);transition:clip-path 1.2s var(--fx-io),transform 1.3s var(--fx-ease),opacity .6s}
.fx-tag.fx-in{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}
@media (prefers-reduced-motion:reduce){.fx-tag{opacity:1!important;clip-path:none!important;transform:none!important}}

/* Táctil */
.fx-card:not(:hover)::after{opacity:0}
@media (hover:none){.fx-card::after{opacity:1}}
.fx-btn.fx-press{transform:translate3d(0,1px,0) scale(.97)!important;filter:brightness(1.08)}
.fx-btn.fx-press .fx-arrow,.fx-btn.fx-nudge .fx-arrow{transform:translate3d(8px,0,0)}
.fx-btn.fx-nudge .fx-arrow{animation:fx-nudge 1.4s var(--fx-ease)}
@keyframes fx-nudge{0%,100%{transform:none}40%{transform:translate3d(10px,0,0)}60%{transform:translate3d(4px,0,0)}}

/* Menú fijo · logo → avatar con aro de avance */
.fx-av-host{position:relative;display:inline-block;line-height:0}
.fx-av-host>img{transition:opacity .45s var(--fx-ease),transform .6s var(--fx-ease),filter .45s;transform-origin:50% 40%}
.fx-av{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;opacity:0;transform:scale(.45) rotate(-120deg);transition:opacity .4s var(--fx-ease),transform .8s var(--fx-ease)}
.fx-av svg{width:100%;height:100%;display:block;overflow:visible}
.fx-av-trk{fill:none;stroke:#E7E1D8;stroke-width:64}
.fx-av-arc{fill:none;stroke-width:64;transition:stroke-dashoffset .25s linear}
.fx-av-iso{transform-box:view-box;transform-origin:540px 540px;transform:scale(.6);opacity:0;transition:transform .7s var(--fx-ease) .12s,opacity .35s .12s}
.fx-scrolled .fx-av-host>img{opacity:0;transform:scale(.55) translateY(-8px);filter:blur(4px)}
.fx-scrolled .fx-av{opacity:1;transform:none}
.fx-scrolled .fx-av-iso{transform:scale(1);opacity:1}
.fx-scrolled .fx-av-host{pointer-events:auto}
#fx-progress{display:none!important}
@media (prefers-reduced-motion:reduce){.fx-av,.fx-av-host>img,.fx-av-iso,.fx-av-arc{transition:none!important}}