/* ========================================================================= DESKTOP OPTIMIZATION LAYER · ginderhernandez.com ------------------------------------------------------------------------- Mejoras SOLO para ESCRITORIO (≥761px). Capa aditiva: se suma al diseño actual sin reescribirlo. El móvil (@media max-width:760px) no se toca. Todo animado por frame usa solo transform/opacity (GPU-friendly). ========================================================================= */ @media (min-width: 761px) { /* ----------------------------------------------------------------------- 1) FOCO DE TECLADO VISIBLE (accesibilidad). Hoy casi no existe. Solo :focus-visible → invisible con ratón, visible al tabular. ----------------------------------------------------------------------- */ .nav a:focus-visible, .langbtn:focus-visible, .chip:focus-visible, .play:focus-visible, .link:focus-visible, .reel-thumb:focus-visible, #reelThumb:focus-visible, .card.vid:focus-visible, .modal-x:focus-visible, .vmodal-x:focus-visible, .cg-ba:focus-visible, .dt-fchip:focus-visible, .cta-float:focus-visible { outline: 2px solid #ff9b5e; outline-offset: 3px; border-radius: 12px; } .card.vid:focus-visible { outline-offset: 2px; } /* ----------------------------------------------------------------------- 3) Suavizar el TILT de las tarjetas de proceso/about (hoy el reset al salir el cursor es un salto seco: no tienen transición en transform). ----------------------------------------------------------------------- */ .act-card, .about-card { transition: transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); } /* ----------------------------------------------------------------------- 4) SHEEN MAGNÉTICO: el brillo especular de las tarjetas de trabajo sigue al cursor. desktop-enhance.js actualiza --mx/--my en cada tarjeta. ----------------------------------------------------------------------- */ .card.vid .sheen { background: radial-gradient( 55% 55% at var(--mx, 30%) var(--my, 18%), rgba(255, 200, 150, 0.28), transparent 60% ); opacity: 0; transition: opacity 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); } /* (el :hover del sheen vive en el bloque hover:hover del final) */ /* ----------------------------------------------------------------------- 5) META-OVERLAY al hover de tarjeta de trabajo: nombre + categoría se revelan con un scrim inferior. Convierte el momento de máximo hover en información de tu craft. (.dt-tag lo inyecta el JS). ----------------------------------------------------------------------- */ .card.vid::before { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(6, 6, 9, 0.82), transparent); opacity: 0; transition: opacity 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); z-index: 5; pointer-events: none; } .card.vid .vlabel { transition: opacity 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) !important; } /* Etiqueta de categoría (inyectada por JS) arriba a la izquierda */ .card.vid .dt-tag { position: absolute; top: 12px; left: 12px; z-index: 6; padding: 5px 11px; border-radius: 999px; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0a0c; background: rgba(246, 246, 248, 0.92); opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); pointer-events: none; } /* ----------------------------------------------------------------------- 6) FILTROS DE CATEGORÍA en escritorio (tipo app: Todos/Moda/…). La barra .dt-filters la construye desktop-enhance.js. ----------------------------------------------------------------------- */ .dt-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; } .dt-fchip { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.045); color: rgba(246, 246, 248, 0.8); font: 500 14px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.01em; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background 0.25s var(--ease, ease), color 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease), transform 0.18s var(--ease, ease); } .dt-fchip:active { transform: scale(0.96); } .dt-fchip.on { background: #f6f6f8; color: #0a0a0c; border-color: #f6f6f8; } /* Al filtrar: las tarjetas ocultas desaparecen con un fundido elegante */ #vgrid .card.dt-hide { display: none !important; } #vgrid .card { transition: transform 0.35s var(--ease, ease), opacity 0.35s var(--ease, ease); } /* ----------------------------------------------------------------------- 8) FEEDBACK de presión — todo lo pulsable debe "escuchar" al usuario. La base ya lo tiene en .play/.link/.chip; completamos los que faltan. ----------------------------------------------------------------------- */ /* [A3 · 19-jul-2026] `transform:scale()` BORRABA el posicionamiento del tema (`translateX(-50%) translateY(var(--ty))`, y en .at-top un `translateX(calc(50vw - 88px))`) → el CTA saltaba media pantalla en cada pulsación. `scale` es una propiedad independiente: se compone DESPUÉS del transform, así que da el mismo feedback sin tocar la posición. REGLA: nunca declarar `transform` en :active sobre elementos que el tema ya posiciona con transform. */ .cta-float:active { scale: 0.96; } .langbtn { transition: color 0.35s var(--ease, ease), background 0.35s var(--ease, ease), transform 0.18s cubic-bezier(0.23, 1, 0.32, 1); } .langbtn:active { transform: scale(0.94); transition-duration: 0.35s, 0.35s, 0.1s; } .nav a { transition: color 0.25s var(--ease, ease), background 0.25s var(--ease, ease), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); } .nav a:active { transform: scale(0.95); transition-duration: 0.25s, 0.25s, 0.1s; } .modal-x, .vmodal-x { transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease; } .modal-x:active, .vmodal-x:active { transform: scale(0.88); transition-duration: 0.1s, 0.2s; } /* ----------------------------------------------------------------------- 8b) Entrada en cascada de los chips de filtro (una vez, al montarse). Keyframes (no transition) para no retrasar el hover de los chips. ----------------------------------------------------------------------- */ .dt-filters .dt-fchip { animation: dtChipIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) backwards; } .dt-filters .dt-fchip:nth-child(2) { animation-delay: 0.04s; } .dt-filters .dt-fchip:nth-child(3) { animation-delay: 0.08s; } .dt-filters .dt-fchip:nth-child(4) { animation-delay: 0.12s; } .dt-filters .dt-fchip:nth-child(5) { animation-delay: 0.16s; } /* ----------------------------------------------------------------------- 10) Refuerzo de profundidad al hover de tarjeta de trabajo (sombra + leve elevación), coordinado con el sheen. Ya hay tilt 3D en JS. ----------------------------------------------------------------------- */ .card.vid { transition: transform 0.5s var(--spring, cubic-bezier(0.34, 1.45, 0.5, 1)), box-shadow 0.45s var(--ease, ease), border-color 0.3s var(--ease, ease); } } /* ========================================================================= HOVERS de la capa de escritorio — SOLO con cursor real. En tablets el tap dispara :hover falsos y los estados se quedan pegados; este gate los reserva para ratón/trackpad. ========================================================================= */ @media (min-width: 761px) and (hover: hover) and (pointer: fine) { .card.vid:hover .sheen { opacity: 1; } .card.vid:hover::before { opacity: 1; } .card.vid:hover .dt-tag { opacity: 1; transform: none; } .dt-fchip:hover { border-color: rgba(255, 255, 255, 0.34); color: #f6f6f8; } .card.vid:hover { box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.75); border-color: rgba(255, 255, 255, 0.28); } } /* ========================================================================= CAPA PREMIUM · referencias awwwards (espaciolanube · adcker · mason-wong · whoisjoa) ========================================================================= */ /* --- 1) CURSOR PUNTO (mason-wong): blanco + blend difference ------------ */ @media (min-width: 761px) and (hover: hover) and (pointer: fine) { html.gh-nocursor, html.gh-nocursor * { cursor: none !important; } .gh-dot { position: fixed; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; mix-blend-mode: difference; z-index: 130; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; will-change: transform; } .gh-dot.on { opacity: 1; } } /* [20-jul-2026] AQUÍ VIVÍAN LOS NUMERALES FANTASMA DEL PROCESO (01–04 en contorno fino detrás de cada tarjeta, .journey .act::before + nth-of-type). Eran de la época en que las tarjetas eran cristal TRANSPARENTE y el número se veía a través. Al darles cuerpo a las tarjetas (réplica skylrk) quedaron ocultos… casi: como la tarjeta entra con un fundido, el numeral asomaba unos milisegundos durante el scroll antes de que su tarjeta cubriera el hueco — Ginder cazó el «04» haciendo justo eso. ELIMINADOS los cuatro (los otros tres tenían el mismo fallo latente). Si algún día vuelven las tarjetas transparentes, recuperar este bloque del backup pre-bloqueE. */ /* [19-jul-2026] Aquí había un `@media (max-width:760px)` DENTRO de un fichero que ahora se enlaza con media="(min-width:761px)": no podía aplicarse nunca. Los numerales fantasma del proceso ya solo existen en escritorio. */ /* ========================================================================== #11 — ARCO DE VALOR (a) El comparador (money shot) más grande en escritorio (era 760px, el más pequeño del sitio pese a ser la prueba del color). En móvil se mantiene para no desbordar. (b) Banda-puente que DISUELVE el corte seco portafolio(papel cálido) → about(oscuro): el punto más duro de la página se vuelve una disolvencia. ========================================================================== */ @media (min-width: 761px) { .cg-stage { max-width: clamp(860px, 90vw, 1180px); } } /* [A1b · 19-jul-2026] EL PANEL DEL ABOUT NO SE LEÍA EN ESCRITORIO. Medido: cristal rgba(255,255,255,.06) —prácticamente transparente— con texto #cfcfd8 y cejilla #a6a6b0 encima del degradado naranja del atardecer. El párrafo entero era ilegible (en móvil no pasa: ahí el tema le da un cristal con cuerpo, #1c1c229e, y por eso solo se corrige ≥761px). Solución del proyecto: CUERPO en el cristal + `saturate` (patrón skylrk), NUNCA sombra en el texto. El tono es ahumado cálido, no negro: con saturate(1.5) el naranja de detrás sigue vibrando a través. Si se prefiere la variante luminosa (cristal blanco + texto tinta cálida, como las tarjetas del proceso), es cambiar estas dos declaraciones. */ @media (min-width: 761px) { .gh-photo-zone .about-card.glass { background: rgba(38, 28, 22, 0.40); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); border-color: rgba(255, 255, 255, 0.16); } .gh-photo-zone .about-card h2 { color: #fff6ea; } .gh-photo-zone .about-card p { color: #f2ead9; } .gh-photo-zone .about-card .eyebrow, .gh-photo-zone .about-card .gh-st-eyebrow { color: rgba(242, 234, 217, 0.72); } } @media (min-width: 761px) { .reel-thumb { width: .528em; height: .66em; } /* 4:5 exacto, cap-height */ } /* El tema hace .reel-thumb:hover{transform:translateY(-.09em) scale(1.06)}. En escritorio el