/* ========================================================================== METROL — Animaciones (respetan prefers-reduced-motion vía global.css) ========================================================================== */ /* El estado oculto-hasta-animar SOLO se aplica si components.js confirma que initScrollReveal() armó su IntersectionObserver con éxito y marca . Si JS falla (en cualquier punto: construcción del observer o registro de elementos con observe()) esa clase nunca se agrega o se retira de inmediato, y [data-reveal] permanece/vuelve a verse normal (ver components.js: initScrollReveal, recuperación). Un elemento que sigue fuera del viewport NO se considera un fallo y permanece oculto hasta animar hasta que entra en pantalla; no hay temporizador global que fuerce su revelado. Clase independiente de .title-lines-ready: un fallo en una animación nunca oculta los elementos de la otra. */ .reveal-ready [data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); } [data-reveal].in-view{ opacity:1; transform:none; } .reveal-ready [data-reveal="fade"]{ transform:none; } [data-reveal-delay="1"]{ transition-delay: 90ms; } [data-reveal-delay="2"]{ transition-delay: 180ms; } [data-reveal-delay="3"]{ transition-delay: 270ms; } [data-reveal-delay="4"]{ transition-delay: 360ms; } [data-reveal-delay="5"]{ transition-delay: 450ms; } /* Hero: líneas técnicas de fondo, dibujadas al cargar */ .hero-grid-lines{ position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(27,59,140,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(27,59,140,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%); } .hero-scale-marks{ position:absolute; left:6%; top:0; bottom:0; width:2px; pointer-events:none; background: repeating-linear-gradient(to bottom, rgba(27,59,140,.25) 0 2px, transparent 2px 26px); opacity:.5; } @keyframes draw-line{ from{ stroke-dashoffset: 400; } to{ stroke-dashoffset: 0; } } .tech-line{ stroke-dasharray: 400; animation: draw-line 1.8s ease forwards; } .scroll-indicator{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--color-muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; } .scroll-indicator .line{ width:1px; height:34px; background: var(--color-border); position:relative; overflow:hidden; } .scroll-indicator .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--color-accent); animation: scroll-move 1.8s ease-in-out infinite; } @keyframes scroll-move{ to{ top:100%; } } /* Contadores */ .stat-value{ font-family: var(--font-display); font-weight:700; font-size: clamp(2rem,4vw,3rem); color: var(--color-primary); } /* Timeline de proceso */ .process-track{ position:relative; } .process-track::before{ content:""; position:absolute; top:26px; left:0; right:0; height:2px; background: var(--color-border); } .process-track .process-fill{ position:absolute; top:26px; left:0; height:2px; background: var(--hero-accent); width:0%; transition: width 1400ms var(--ease-out-expo); } .process-track.in-view .process-fill{ width:100%; } .process-step{ position:relative; z-index:1; } .process-step .dot{ width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; color: var(--hero-accent); transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition); } .process-track.in-view .process-step .dot{ border-color: var(--hero-accent); background: var(--hero-accent); color: #fff; transform: scale(1.06); } /* Botón magnético sutil (solo desktop, vía JS opcional) */ @media (hover:hover){ .btn-primary, .btn-accent{ will-change: transform; } } /* Fase 7: ".value-card" quedó obsoleta — el hover con sombra/elevación era para el look de tarjeta que ".benefit-item" tenía antes del rediseño editorial (ahora es una franja con acento lateral, ver responsive.css). Se retira la regla en vez de dejarla compitiendo con el nuevo hover. */