/* Enecuatro — capa de movimiento. No toca grilla, tipografía ni colores del manual. */
html { scroll-behavior: smooth; }
::selection { background: #FFFFFF; color: #323232; }

/* Nav: fija, se vuelve translúcida al scrollear */
nav { position: sticky; top: 0; z-index: 50; background: rgba(50,50,50,0); backdrop-filter: blur(0px); transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease; }
nav.is-scrolled { background: rgba(50,50,50,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
nav a { position: relative; transition: color .25s ease; }
nav a:not(:has(img))::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #FFFFFF; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.77,0,.18,1); }
nav a:not(:has(img)):hover::after { transform: scaleX(1); transform-origin: left; }

/* Hero: video con leve parallax + texto que entra en cascada */
.fx-hero video, .fx-hero > img { will-change: transform; transform: translateY(var(--py, 0px)) scale(1.06); }
.fx-hero h1 { overflow: hidden; }
.fx-hero h1 .fx-line { display: block; transform: translateY(110%); opacity: 0; animation: fx-rise 1.1s cubic-bezier(.19,1,.22,1) forwards; }
.fx-hero h1 .fx-line:nth-child(2) { animation-delay: .12s; }
.fx-hero h1 .fx-line:nth-child(3) { animation-delay: .24s; }
.fx-hero .fx-fade { opacity: 0; animation: fx-fade 1s ease .6s forwards; }
@keyframes fx-rise { to { transform: translateY(0); opacity: 1; } }
@keyframes fx-fade { to { opacity: 1; } }
/* indicador de scroll */
.fx-scrollcue { position: absolute; right: 56px; bottom: 36px; width: 1px; height: 56px; background: #4A4A4A; overflow: hidden; }
.fx-scrollcue::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #FFFFFF; animation: fx-cue 1.8s cubic-bezier(.77,0,.18,1) infinite; }
@keyframes fx-cue { 0% { top: -100%; } 50% { top: 0; } 100% { top: 100%; } }

/* Reveal al scrollear: todo lo marcado arranca abajo/transparente */
.fx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); transition-delay: var(--d, 0s); }
.fx-reveal.is-in { opacity: 1; transform: none; }
/* líneas horizontales que se dibujan */
.fx-rule { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.77,0,.18,1); }
.fx-rule.is-in { transform: scaleX(1); }

/* Fotos: zoom lento al hover, viñeta sutil; en portfolio, el "Ver obra" se desliza */
.fx-img { overflow: hidden; }
.fx-img img { transition: transform 1.2s cubic-bezier(.19,1,.22,1), filter .6s ease; }
.fx-img:hover img { transform: scale(1.04); }
#portfolio a { transition: transform .5s cubic-bezier(.19,1,.22,1); }
#portfolio a:hover img { transform: scale(1.04); }

/* Servicios: la fila se ilumina al hover y el número se desplaza */
#servicios .fx-row { transition: background .35s ease, padding-left .35s cubic-bezier(.19,1,.22,1); }
#servicios .fx-row:hover { background: rgba(255,255,255,.035); padding-left: 12px; }

/* Timeline: arrastrable, con barra de progreso */
#destacadas .fx-scroller { cursor: grab; scrollbar-width: none; }
#destacadas .fx-scroller::-webkit-scrollbar { display: none; }
#destacadas .fx-scroller.is-dragging { cursor: grabbing; user-select: none; }
#destacadas .fx-scroller img { transition: transform .6s cubic-bezier(.19,1,.22,1), box-shadow .6s ease; }
#destacadas .fx-scroller > div > div:hover img { transform: scale(1.08); box-shadow: 0 0 0 1px #FFFFFF; }
.fx-progress { margin: 8px 56px 0; height: 1px; background: #4A4A4A; position: relative; }
.fx-progress > i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #FFFFFF; transition: width .15s linear; }

/* Cifras: contador (el texto se reemplaza por JS, el layout no cambia) */
.fx-count { font-variant-numeric: tabular-nums; }

/* Botón de contacto: fondo que se llena desde la izquierda */
.fx-btn { position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease; }
.fx-btn::before { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform: translateX(-101%); transition: transform .45s cubic-bezier(.77,0,.18,1); z-index: -1; }
.fx-btn:hover { color: #323232 !important; }
.fx-btn:hover::before { transform: translateX(0); }

/* Footer: el logo grande entra desde abajo */
.fx-footer-logo { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.77,0,.18,1); }
.fx-footer-logo.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx-reveal, .fx-rule, .fx-hero h1 .fx-line, .fx-hero .fx-fade, .fx-footer-logo { opacity: 1; transform: none; clip-path: none; }
  .fx-scrollcue { display: none; }
}

/* 3D: fichas del portfolio se inclinan siguiendo el mouse; la imagen flota adelante del texto */
#portfolio { perspective: 1400px; }
#portfolio a.fx-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .18s ease-out; }
#portfolio a.fx-tilt.is-rest { transition: transform .9s cubic-bezier(.19,1,.22,1); }
#portfolio a.fx-tilt > img { transform: translateZ(28px); transition: transform 1.2s cubic-bezier(.19,1,.22,1), box-shadow .6s ease; }
#portfolio a.fx-tilt:hover > img { box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
#portfolio a.fx-tilt > div, #portfolio a.fx-tilt > span { transform: translateZ(10px); }
/* 3D: hitos del timeline giran un poco al hover */
#destacadas .fx-scroller > div > div { perspective: 600px; }
#destacadas .fx-scroller > div > div:hover img { transform: scale(1.08) rotateY(-14deg); }
/* 3D: cifras con profundidad al hover */
.fx-stat { transition: transform .6s cubic-bezier(.19,1,.22,1); transform-style: preserve-3d; }
.fx-stat:hover { transform: translateZ(0) translateY(-4px); }
/* Hero: capa de texto con parallax inverso al video (profundidad) */
.fx-hero .fx-depth { will-change: transform; transform: translateY(var(--ty, 0px)); }

/* Timeline 3D: cada hito se ubica en profundidad según su distancia al centro del carrusel */
#destacadas .fx-scroller { perspective: 1200px; perspective-origin: 50% 40%; padding-top: 12px; padding-bottom: 36px; }
#destacadas .fx-scroller > div > div { transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--s, 1)); opacity: var(--o, 1); transition: transform .12s linear, opacity .12s linear; will-change: transform; }
#destacadas .fx-scroller > div > div img { transform: translateZ(40px) translateX(var(--px, 0px)) scale(var(--is, 1)); box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); transition: transform .12s linear, box-shadow .4s ease; }
#destacadas .fx-scroller > div > div span:first-of-type { transform: translateZ(20px); display: inline-block; }
#destacadas .fx-scroller > div > div:hover img { box-shadow: 0 0 0 1px #FFFFFF, 0 30px 60px -28px rgba(0,0,0,.8); }
#destacadas .fx-scroller > div > div.is-center span:last-of-type { color: #FFFFFF; }
#destacadas .fx-scroller > div > div.is-center span:first-of-type { color: #FFFFFF; }
/* riel con punto que marca el hito central */
.fx-progress > b { position: absolute; top: -5px; left: 0; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #FFFFFF; transition: left .15s linear; }
.fx-progress > em { position: absolute; right: 0; top: 10px; font-style: normal; font-size: 11px; letter-spacing: .14em; color: #A6A6A6; font-family: inherit; }

/* ===== Portfolio con vida ===== */
/* las fotos descansan algo apagadas y toman color + nitidez al hover (coherente con la marca gris) */
#portfolio a.fx-tilt > img { filter: grayscale(.45) contrast(1.02); }
#portfolio a.fx-tilt:hover > img { filter: grayscale(0) contrast(1); }
/* entrada: la foto se descubre con un barrido de izquierda a derecha en vez de fundirse */
#portfolio img.fx-reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
#portfolio img.fx-reveal.is-in { clip-path: inset(0 0 0 0); }
/* ficha: el título se subraya y el "Ver obra →" aparece desde abajo */
#portfolio a.fx-tilt { position: relative; }
#portfolio a.fx-tilt .fx-title { position: relative; display: inline-block; }
#portfolio a.fx-tilt .fx-title::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.77,0,.18,1); }
#portfolio a.fx-tilt:hover .fx-title::after { transform: scaleX(1); }
#portfolio a.fx-tilt .fx-cta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.19,1,.22,1); }
#portfolio a.fx-tilt:hover .fx-cta { opacity: 1; transform: none; }
/* año gigante que emerge sobre la foto al hover (dato que ya está en la ficha) */
#portfolio a.fx-tilt .fx-year { position: absolute; left: 20px; top: calc(var(--imgh, 280px) - 108px); transform: translateZ(40px) translateY(16px); font-size: 96px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s ease, transform .6s cubic-bezier(.19,1,.22,1); z-index: 2; }
#portfolio a.fx-tilt:hover .fx-year { opacity: .92; transform: translateZ(40px); }
#portfolio a.fx-tilt.fx-big .fx-year { font-size: 160px; left: 32px; top: calc(var(--imgh, 520px) - 176px); }
/* pestañas de rama: funcionan y hacen crossfade del grid */
#portfolio .fx-tabs a { position: relative; transition: color .3s ease; }
#portfolio .fx-tabs a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: #FFFFFF; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.77,0,.18,1); }
#portfolio .fx-tabs a.is-active { color: #FFFFFF; border-bottom: none !important; }
#portfolio .fx-tabs a.is-active::after { transform: scaleX(1); }
#portfolio .fx-grid { transition: opacity .35s ease, transform .45s cubic-bezier(.19,1,.22,1); }
#portfolio .fx-grid.is-switching { opacity: 0; transform: translateY(12px); }
#portfolio .fx-grid[data-rama="civiles"] > a.fx-tilt { display: none; }
#portfolio .fx-grid[data-rama="corporativa"] > div.fx-civil { display: none; }
#portfolio .fx-grid[data-rama="civiles"] > div.fx-civil { grid-column: 1 / 13; border-top: none; margin-top: 0; padding-top: 0; }
/* las fichas chicas entran escalonadas, de a una */
#portfolio a.fx-tilt.fx-reveal { transition-delay: calc(var(--i, 0) * .09s); }

/* el hover global de enlaces (gris) no aplica a las fichas */
#portfolio a.fx-tilt:hover, #portfolio a.fx-tilt:hover span { color: #FFFFFF; }
#portfolio a.fx-tilt:hover span[style*='#A6A6A6'] { color: #A6A6A6; }