.projects-main{background:#000;min-height:100vh;padding:60px 0;font-family:Arial,sans-serif}:root{--cards:4;--cardHeight:75vh;--cardTopPadding:1.5em;--cardMargin:4vw}.container-projects{width:80%;margin:40px auto}#cards-projects{grid-template-columns:1fr;grid-template-rows:repeat(var(--cards),var(--cardHeight));gap:var(--cardMargin);padding-left:0;padding-bottom:calc(var(--cards)*var(--cardTopPadding));margin-bottom:var(--cardMargin);list-style:none;display:grid}#cards-projects li:first-child{--index:1}#cards-projects li:nth-child(2){--index:2}#cards-projects li:nth-child(3){--index:3}#cards-projects li:nth-child(4){--index:4}#cards-projects li:nth-child(5){--index:5}#cards-projects li:nth-child(6){--index:6}#cards-projects li:nth-child(7){--index:7}#cards-projects li:nth-child(8){--index:8}#cards-projects li:nth-child(9){--index:9}#cards-projects li:nth-child(10){--index:10}.card-projects{padding-top:calc(var(--index)*var(--cardTopPadding));position:sticky;top:0}.card-body-projects{box-sizing:border-box;height:var(--cardHeight);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff0d 0%,#ffffff05 100%);border:1px solid #ffffff1a;border-radius:30px;transition:all .5s;display:flex;overflow:hidden;box-shadow:0 20px 60px #00000080,0 0 40px #ff01491a}.card-body-projects:hover{border-color:#ff01494d;transform:translateY(-5px);box-shadow:0 30px 80px #0009,0 0 60px #ff014933}.card-project-content{color:#fff;z-index:2;background:linear-gradient(135deg,#000c 0%,#0009 100%);flex-direction:column;justify-content:center;align-items:flex-start;width:50%;height:100%;padding:60px;display:flex;position:relative}.card-content-wrapper{flex-direction:column;gap:20px;width:100%;max-width:500px;display:flex}.card-category{text-transform:uppercase;letter-spacing:.1em;color:#ff0149;margin-bottom:10px;font-size:.875rem;font-weight:600}.card-title{background:linear-gradient(135deg,#fff 0%,#fffc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.5rem;font-weight:700;line-height:1.2}.card-description{color:#ffffffb3;margin:0;font-size:1.1rem;line-height:1.6}.card-tags{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.card-tag{color:#ffffffe6;background:#ff014926;border:1px solid #ff01494d;border-radius:20px;padding:6px 12px;font-size:.75rem;transition:all .3s}.card-tag:hover{background:#ff014940;border-color:#ff014980;transform:translateY(-2px)}.card-actions{gap:15px;margin-top:30px;display:flex}.tooltip:after{content:attr(data-title);color:#fff;white-space:nowrap;opacity:0;visibility:hidden;background:#111;border-radius:6px;padding:6px 10px;font-size:12px;transition:all .3s;position:absolute;bottom:130%;left:50%;transform:translate(-50%)}.tooltip:before{content:"";opacity:0;visibility:hidden;border:6px solid #0000;border-top-color:#111;transition:all .3s;position:absolute;bottom:120%;left:50%;transform:translate(-50%)}.tooltip:hover:after,.tooltip:hover:before{opacity:1;visibility:visible}.card-link{color:#fff;background:linear-gradient(135deg,#ff0149 0%,#ff2d67 100%);border-radius:25px;align-items:center;gap:8px;padding:12px 24px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #ff01494d}.card-link:hover{background:linear-gradient(135deg,#ff2d67 0%,#ff0149 100%);transform:translateY(-2px);box-shadow:0 6px 20px #ff014980}.card-link-secondary{box-shadow:none;background:#ffffff1a;border:1px solid #fff3}.card-link-secondary:hover{background:#fff3;border-color:#fff6;box-shadow:0 4px 15px #ffffff1a}.card-link-arrow{transition:transform .3s}.card-link:hover .card-link-arrow{transform:translate(5px)}.wrapper-image{background:linear-gradient(135deg,#ff01491a 0%,#0000004d 100%);width:50%;height:100%;position:relative;overflow:hidden}.card-image{transition:transform .5s}.projects-header{text-align:center;margin-bottom:40px;padding:60px 20px 40px}.projects-header-label{text-transform:uppercase;letter-spacing:.2em;color:#ff0149;margin-bottom:20px;font-size:.75rem;font-weight:600;display:block}.projects-header-title{background:linear-gradient(135deg,#fff 0%,#fffc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 30px;font-size:4rem;font-weight:700;line-height:1.1}.projects-header-description{color:#ffffffb3;max-width:800px;margin:0 auto;font-size:1.2rem;line-height:1.6}@media (max-width:1200px){.container-projects{width:85%}.card-project-content{padding:40px}.card-title{font-size:2rem}.projects-header-title{font-size:3.5rem}}@media (max-width:768px){.projects-main{padding:40px 0}.projects-header{margin-bottom:30px;padding:40px 20px 30px}.projects-header-title{margin-bottom:20px;font-size:2.5rem}.projects-header-description{padding:0 10px;font-size:1rem}.container-projects{width:90%;margin:20px auto}.card-body-projects{border-radius:20px;flex-direction:column-reverse}.card-project-content,.wrapper-image{width:100%}.card-project-content{height:50%;padding:30px 25px}.wrapper-image{height:50%}.card-title{font-size:1.75rem}.card-description{font-size:1rem}.card-actions{width:100%;margin-top:20px}.card-link{justify-content:center;width:100%}.card-content-wrapper{gap:15px}.card-tags{gap:8px}}@media (max-width:480px){.projects-main{padding:30px 0}.projects-header{margin-bottom:20px;padding:30px 15px 20px}.projects-header-label{margin-bottom:15px;font-size:.7rem}.projects-header-title{margin-bottom:15px;font-size:2rem}.projects-header-description{font-size:.9rem;line-height:1.5}.container-projects{width:95%;margin:15px auto}:root{--cardHeight:85vh;--cardMargin:3vw;--cardTopPadding:1em}.card-body-projects{border-radius:15px}.card-project-content{height:55%;padding:20px}.wrapper-image{height:45%}.card-title{font-size:1.5rem}.card-description{font-size:.9rem;line-height:1.5}.card-content-wrapper{gap:12px}.card-tags{gap:6px}.card-tag{padding:4px 10px;font-size:.7rem}.card-actions{gap:10px;margin-top:15px}.card-link{padding:10px 20px;font-size:.85rem}}@media (max-width:360px){.projects-header-title{font-size:1.75rem}.projects-header-description{font-size:.85rem}.card-title{font-size:1.3rem}.card-description{font-size:.85rem}.card-project-content{padding:15px}}
