/* *****************************************************************
Theme Name: LinkReloaded    
Theme URI: https://linkreloaded.net/
Description: Theme para la web personal de César Soto (LinkReloaded), desarrollado en html/js/css.
Author: LinkReloaded
Author URI: https://www.linkreloaded.net
Version: 2026-07-02
****************************************************************** */

/* HEADER */
html, body { height: 100%; margin: 0; scroll-behavior: smooth; overflow: hidden; background-color: #0d0d0d; }
header { position: fixed; width: 100%; z-index: 9; height: 50px; }
header #logo { position: absolute; left: 0; top: 40px; opacity: 1; transform: translateX(0); transition: transform .5s ease, opacity .5s ease; }
body.home-section-01 header #logo { opacity: 0; transform: translateX(-160px); }
header #menu { position: absolute; right: 80px; top: -80px; transform: translateY(120px); transition: transform .5s ease; }
body.home-section-01 header #menu { transform: translateY(0); }
header #menu a { font-family: "Luna Obscura"; color: #fff; font-size: 40px; line-height: 40px; }

/*
@keyframes noise-anim {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}
#fnd_ruido { position: fixed; top: -50%; left: -50%; right: -50%; bottom: -50%; width: 200%; height: 200vh; background-image: url("data:image/svg+xml,%3Csvg viewBox=!string!xmlns=!string!%3E%3Cfilter id=!string!%3E%3CfeTurbulence type=!string!baseFrequency=!string!numOctaves=!string!stitchTiles=!string!/%3E%3C/filter%3E%3Crect width=!string!height=!string!filter=!string!/%3E%3C/svg%3E"); opacity: 0.1; background-size: 500px; z-index: 9999; pointer-events: none; animation: noise-anim .2s infinite steps(4); }
*/

/* HOME */
#home { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
#home .home-section { height: 100vh; min-height: 100vh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; }
#home .tarjeta { }

/* HOME > HERO */
#home #hero { }
#home #hero .tarjeta h1 { font-family: 'Luna Obscura'; color: #fff; font-size: 36px; line-height: 36px; margin-bottom: 15px; font-feature-settings: "ss01", "ss02"; }
#home #hero .tarjeta p { color: #fff; font-size: 16px; line-height: 18px; margin-bottom: 5px; font-family: 'Martian Mono'; text-transform: uppercase; }
#home #hero .tarjeta ul { display: flex; padding: 0; gap: 5px; }
#home #hero .tarjeta ul li { list-style-type: none; display: flex; font-size: 9px; line-height: 9px; }
#home #hero .tarjeta ul li a { padding: 5px; display: flex; align-items: center; justify-content: center; border: 1px solid #232323; color: #808080; font-family: 'Google Sans'; flex: 1; border-radius: 8px; }
#home #hero .tarjeta ul li a:hover { }

/* HOME > PRESENTACION */
#home #presentacion { background-color: #c3d8c5; }
#home #presentacion .tarjeta { }
#home #presentacion .tarjeta h2 { color: #292929; font-family: "Zalando Sans"; text-transform: uppercase; font-size: 36px; }
#home #presentacion .tarjeta h3 { font-family: "Zalando Sans"; font-size: 18px; text-transform: uppercase; color: #292929; }
#home #presentacion .tarjeta h4 { font-family: "Zalando Sans"; font-size: 18px; text-transform: uppercase; color: #292929; }
#home #presentacion .tarjeta p { font-family: 'Luna Obscura'; font-size: 18px; color: #292929; font-feature-settings: "ss01", "ss02"; }
#home #presentacion .tarjeta a { }
#home #presentacion .tarjeta a:hover { }

/* FICHA DE TRABAJO */
#trabajo { position: relative; width: 100%; height: 100vh; background-color: #eee; display: flex; justify-content: space-between; }
#trabajo #sidebar { flex: 1; background-color: #edd; }
#trabajo #main { width: 1000px; background-color: #e7e7e7; position: relative; display: flex; align-items: center; }

/* carrusel */
#trabajo #main .carrusel { position: relative; width: 100%; overflow: hidden; }
#trabajo #main .carrusel-track { display: flex; transition: transform .45s ease; will-change: transform; cursor: grab; touch-action: pan-y; }
#trabajo #main .carrusel-track.arrastrando { cursor: grabbing; transition: none; }
#trabajo #main .slide { flex: 0 0 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; user-select: none; padding: 0 100px; box-sizing: border-box; }
#trabajo #main .slide img { display: block; width: 100%; min-height: 320px; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#trabajo #main .carrusel-puntos { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 10px; }
#trabajo #main .carrusel-puntos .punto { width: 20px; height: 20px; padding: 0; border: none; cursor: pointer; transition: .25s; color: #858585; text-align: center; background: transparent; }
#trabajo #main .carrusel-puntos .punto:hover { background: #8d8d8d; }
#trabajo #main .carrusel-puntos .punto.activo { color: #0c0000; }
@media (max-width:1400px) {
    #trabajo #main .slide img { height: 68vh; }
}
@media (max-width:1200px) {
    #trabajo #main .slide { padding: 0 5%; }
    #trabajo #main .slide img { height: 62vh; }
}
@media (max-width:992px) {
    #trabajo #main .slide { padding: 0 6%; }
    #trabajo #main .slide img { height: 56vh; }
}
@media (max-width:768px) {
    #trabajo #main .slide { padding: 0 18px; }
    #trabajo #main .slide img { height: 46vh; min-height: 260px; }
    #trabajo #main .carrusel-puntos { margin-top: 20px; }
}
@media (max-width:480px) {
    #trabajo #main .slide { padding: 0 12px; }
    #trabajo #main .slide img { height: 38vh; min-height: 220px; }
    #trabajo #main .carrusel-puntos .punto { width: 9px; height: 9px; }
}