/* ═══════════════════════════════════════════════════════════════════════════ EFECTOS — el acabado premium · 2026-09-28 ═══════════════════════════════════════════════════════════════════════════ POR QUÉ EXISTE ESTE ARCHIVO Fos: «los efectos, mejorarlos; por ejemplo tenemos efectos muy buenos en la página de FYF Factory, algo de esos efectos, estúdialo y lo implementamos». QUÉ SE TRAJO DE FYF, Y QUÉ NO De FYF se toma el COMPORTAMIENTO, no su piel. Aquella página es oscura con dorado encendido; esta es clara y clínica, para médicos. Copiar sus brillos naranjas acá quedaría barato. Se traen tres cosas concretas: 1. La curva. FYF usa cubic-bezier(0.22, 0.61, 0.36, 1) en todo: arranca rápido y frena suave. Es lo que hace que se sienta «fluido» y no mecánico. Acá se estrena esa misma curva; las variables viejas usaban `ease` pelado. 2. El levantar. Botones que suben 2px y tarjetas que suben 4px al pasar el cursor, con la sombra creciendo debajo. FYF sube 2 y 5. 3. El revelado en cascada al bajar. Los bloques aparecen con un desfase pequeño entre ellos, no todos de golpe. ⛔ LA RED DE SEGURIDAD, QUE ES LO MÁS IMPORTANTE Todo lo que se OCULTA para después revelarse vive detrás de `html.fx`, una clase que pone el JavaScript. Si el JS no carga, falla o el navegador es viejo, esa clase nunca aparece y **la página se ve completa**. Nunca puede quedar una sección en blanco esperando una animación que no va a llegar. Es exactamente como lo resolvió FYF, y es la diferencia entre un efecto y una página rota. Y con `prefers-reduced-motion` (gente que marea con el movimiento, o que lo apagó a propósito) queda todo quieto y visible. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* La curva de FYF. Todo lo de este archivo la usa. */ --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1); /* Sombras de realce: el color de marca, no negro genérico. */ --realce-navy: 0 12px 30px rgba(27, 58, 107, 0.22); --realce-oro: 0 12px 30px rgba(184, 154, 62, 0.28); --realce-card: 0 14px 34px rgba(15, 30, 53, 0.14); } /* ─────────────────────────────────────────────────────────────────────────── 1 · BOTONES Antes subían 1px y nada más. Ahora suben 2 y la sombra crece debajo, que es lo que da la sensación de que el botón se despega del papel. Al hacer clic vuelve a bajar: sin ese detalle el botón se siente muerto. ─────────────────────────────────────────────────────────────────────────── */ .btn, .btn-search, .btn-menu { transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), background-color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium); will-change: transform; } .btn:hover, .btn-search:hover, .btn-menu:hover { transform: translateY(-2px); } .btn-primary:hover, .btn-menu:hover { box-shadow: var(--realce-navy); } .btn-download:hover, .btn-search:hover { box-shadow: var(--realce-oro); } .btn-secondary:hover, .btn-outline:hover { box-shadow: var(--realce-navy); } /* El clic tiene que sentirse. */ .btn:active, .btn-search:active, .btn-menu:active { transform: translateY(0); box-shadow: var(--shadow-xs); transition-duration: 0.08s; } /* ─────────────────────────────────────────────────────────────────────────── 2 · TARJETAS Suben 4px y el borde se tiñe del dorado técnico de la marca. El dorado se usa acá, en el borde, y no como relleno: es un acento, no un protagonista. ─────────────────────────────────────────────────────────────────────────── */ .card, .chapter-card, .product-card, .line-card { transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium); } .card:hover, .chapter-card:hover, .product-card:hover, .line-card:hover { transform: translateY(-4px); box-shadow: var(--realce-card); border-color: rgba(184, 154, 62, 0.45); } /* ─────────────────────────────────────────────────────────────────────────── 3 · ENLACES DEL MENÚ Un subrayado que crece desde el centro. Cuesta nada y se nota. ─────────────────────────────────────────────────────────────────────────── */ .site-nav-link { position: relative; transition: color 0.2s var(--ease-premium); } .site-nav-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; background: var(--color-accent, #B89A3E); border-radius: 2px; transition: left 0.25s var(--ease-premium), right 0.25s var(--ease-premium); } .site-nav-link:hover::after, .site-nav-link[aria-current="page"]::after { left: 0.625rem; right: 0.625rem; } /* ─────────────────────────────────────────────────────────────────────────── 4 · EL REVELADO AL BAJAR Detrás de html.fx: sin JS, nada de esto se aplica y la página se ve entera. ─────────────────────────────────────────────────────────────────────────── */ html.fx .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-premium), transform 0.65s var(--ease-premium); } html.fx .reveal.visible { opacity: 1; transform: translateY(0); } /* ─────────────────────────────────────────────────────────────────────────── 5 · EL FOCO DEL TECLADO Quien navega con Tab tiene que ver dónde está. Aro dorado, no el azul del navegador, y solo con teclado (`:focus-visible`), no al hacer clic. ─────────────────────────────────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent, #B89A3E); outline-offset: 3px; border-radius: var(--radius-sm, 4px); } /* ─────────────────────────────────────────────────────────────────────────── 6 · MOVIMIENTO REDUCIDO — todo quieto, todo visible ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.fx .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .btn:hover, .btn-search:hover, .btn-menu:hover, .card:hover, .chapter-card:hover, .product-card:hover, .line-card:hover { transform: none !important; } .site-nav-link::after { transition: none !important; } }