/* ========================================================================== Sierra Electromotor — Tokens de diseño + animaciones compartidas Fase 10 (arquitectura), Fase 18 (fix crítico sin-JS), Fase 19 (optimización) ========================================================================== */ :root{ --black:#0a0a0b; --anthracite:#17181b; --anthracite-line:#2a2d31; --white:#f4f4f2; --red:#ff5a55; --red-deep:#c81e2f; --gray-technical:#8a8f97; --font-display:'Oswald','Arial Narrow',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} } /* -------------------------------------------------------------------- FIX CRÍTICO (Fase 18, sección 1): sin JavaScript, TODO debe ser visible por defecto. La animación solo se activa si technical-reveal.js cargó y agregó la clase .js-ready a . Nunca invertir este orden. -------------------------------------------------------------------- */ .reveal{ opacity:1; transform:none; } html.js-ready .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; } html.js-ready .reveal.in{ opacity:1; transform:translateY(0); } html.js-ready .reveal.d1{ transition-delay:0.05s; } html.js-ready .reveal.d2{ transition-delay:0.15s; } html.js-ready .reveal.d3{ transition-delay:0.25s; } html.js-ready .reveal.d4{ transition-delay:0.35s; } /* ===== HEADER ===== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:22px 48px; background:linear-gradient(to bottom, rgba(10,10,11,0.85), transparent); } .site-header img{height:28px; width:auto; display:block;} .site-nav-list{display:flex; gap:36px; list-style:none; margin:0; padding:0;} .site-nav-list a{ color:var(--white); text-decoration:none; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; transition:opacity 0.2s; } .site-nav-list a:hover, .site-nav-list a:focus-visible{opacity:1;} .cta-mini{ border:1px solid var(--red); color:var(--white); background:transparent; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:9px 18px; text-decoration:none; transition:background 0.2s; } .cta-mini:hover{background:var(--red);} /* ===== BLUEPRINT / CIRCUITO / RUTA — el motor compartido ===== */ .technical-visual{ position:relative; aspect-ratio:4/3; border:1px solid var(--anthracite-line); background:#101113; } .technical-visual svg{width:100%; height:100%;} /* Estado por defecto: dibujado COMPLETO (sin JS, el usuario ve el SVG terminado, no vacío) */ .technical-path{ fill:none; stroke:var(--white); stroke-width:1.4; opacity:0.85; stroke-dasharray:2600; stroke-dashoffset:0; } html.js-ready .technical-path{ stroke-dashoffset:2600; /* solo se "esconde" para animar si JS confirmó que puede reanimar */ transition:stroke-dashoffset 2.2s cubic-bezier(.25,.7,.3,1); } html.js-ready .technical-visual.in .technical-path{ stroke-dashoffset:0; } .technical-detail{fill:var(--red); opacity:1;} html.js-ready .technical-detail{ opacity:0; transition:opacity 0.4s ease; transition-delay:1.6s; } html.js-ready .technical-visual.in .technical-detail{ opacity:1; } .technical-callout{ position:absolute; font-family:var(--font-mono); font-size:10px; color:var(--gray-technical); letter-spacing:0.06em; opacity:1; display:flex; align-items:center; gap:6px; } html.js-ready .technical-callout{ opacity:0; transition:opacity 0.5s ease; } html.js-ready .technical-visual.in .technical-callout{ opacity:1; } .technical-callout::before{content:''; width:14px; height:1px; background:var(--red);} /* Circuito — flujo animado, solo con JS activo (decorativo puro, no crítico si no corre) */ .circuit-trace-animate{ stroke:var(--red); stroke-dasharray:6 8; opacity:0.9; } html.js-ready .circuit-visual.in .circuit-trace-animate{ animation:dashFlow 1.6s linear infinite; } @keyframes dashFlow{to{stroke-dashoffset:-28;}} /* ===== FORMULARIOS (ver también forms.css para clases de Contact Form 7) ===== */ .btn-primary{ background:var(--red); color:var(--black); font-weight:600; font-family:var(--font-body); font-size:14px; padding:16px 30px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer; transition:background 0.2s, transform 0.2s; } .btn-primary:hover{background:#ff726d; transform:translateY(-1px);} .btn-primary:focus-visible{ outline:2px solid var(--white); outline-offset:3px; } /* ===== FOOTER ===== */ .site-footer{ background:var(--black); border-top:1px solid var(--anthracite-line); padding:64px 48px 32px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; } .footer-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); margin-bottom:18px; } .footer-col ul{ list-style:none; margin:0; padding:0; } .footer-col li{ margin-bottom:11px; } .footer-col a{ color:var(--gray-technical); text-decoration:none; font-size:13px; } .footer-col a:hover{ color:var(--white); } .footer-bottom{ border-top:1px solid var(--anthracite-line); padding-top:24px; font-family:var(--font-mono); font-size:11px; color:var(--gray-technical); } /* ===== BARRA INFERIOR — solo mobile (Fase 10, componente 16) ===== */ .m-bottom-bar{ display:none; /* oculto en desktop por defecto */ } @media (max-width:1100px){ .m-bottom-bar{ display:flex; position:sticky; bottom:0; left:0; right:0; z-index:60; gap:1px; background:var(--anthracite-line); border-top:1px solid var(--anthracite-line); } .m-bottom-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--black); color:var(--white); text-decoration:none; padding:11px 6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.03em; text-transform:uppercase; } .m-bottom-bar a.primary{ background:var(--red); color:var(--black); } .m-bottom-bar a svg{ width:18px; height:18px; } .site-header{ padding:16px 20px; } .footer-grid{ grid-template-columns:1fr 1fr; } }