@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
:root {
--bg:#0A0A0F;
--bg-card:rgba(255,255,255,0.03);
--bg-card-h:rgba(123,110,246,0.07);
--accent:#7B6EF6;
--accent-lt:#9D93F8;
--accent-dim:rgba(123,110,246,0.15);
--accent-bdr:rgba(123,110,246,0.28);
--text:#F0EEF8;
--text-muted:rgba(240,238,248,0.45);
--text-faint:rgba(240,238,248,0.25);
--border:rgba(255,255,255,0.07);
--border-h:rgba(123,110,246,0.35);
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--nav-h:60px;
--font-main:'Space Grotesk',sans-serif;
--font-mono:'Space Mono',monospace;
}
*,*::before,*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
font-family:var(--font-main);
color:var(--text);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
@keyframes fadeUp{
from{opacity:0;
transform:translateY(24px);}to{opacity:1;
transform:translateY(0);
}}
.puff-in-center{
animation:fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both;}
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
height:var(--nav-h);
background:rgba(10,10,15,0.85);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
transition:background 0.3s ease;
}
.nav-container{
max-width:1100px;
margin:0 auto;
height:100%;
padding:0 28px;
display:flex;
align-items:center;
justify-content:space-between;
}
.nav-logo-link{
text-decoration:none;
display:flex;
align-items:center;
}
.logo-text{
font-family:var(--font-mono);
font-size:13px;
font-weight:700;
color:var(--accent);
letter-spacing:3px;
text-transform:uppercase;
}
.logo{
display:none;
}
.nav-menu{
list-style:none;
display:flex;
gap:4px;
}
.nav-menu a{
text-decoration:none;
color:var(--text-muted);
font-size:12px;
font-weight:500;
letter-spacing:1.5px;
text-transform:lowercase;
padding:6px 14px;
border-radius:100px;
transition:color 0.2s,background 0.2s;
}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{
color:var(--text);
background:rgba(255,255,255,0.06);
}
.nav-cta{
background:var(--accent)!important;
color:#fff!important;
padding:7px 18px!important;
border-radius:8px!important;
font-weight:600!important;
font-size:11px!important;
letter-spacing:1.5px!important;
text-transform:uppercase!important;
text-decoration:none;
transition:opacity 0.2s!important;
}
.nav-cta:hover{
opacity:0.85;
background:var(--accent)!important;
}
.hero-section{
min-height:100vh;
padding:calc(var(--nav-h) + 80px) 28px 80px;
display:flex;
flex-direction:column;
justify-content:center;
max-width:1100px;
margin:0 auto;
position:relative;
}
.hero-section::before{
content:'';
position:absolute;
top:50%;
right:-140px;
transform:translateY(-50%);
width:700px;
height:700px;
border-radius:50%;
background:radial-gradient(circle,rgba(123,110,246,0.35) 0%,rgba(123,110,246,0.18) 25%,rgba(123,110,246,0.08) 45%,rgba(123,110,246,0.03) 60%,transparent 75%);
filter:blur(50px);
pointer-events:none;
z-index:0;
}
.hero-logo{
position:absolute;
top:50%;
right:80px;
transform:translateY(-50%);
width:260px;
z-index:2;
filter:drop-shadow(0 0 60px rgba(123,110,246,0.45));
animation:floatLogo 6s ease-in-out infinite;}
@keyframes floatLogo{0%,100%{transform:translateY(-50%) translateY(0px);}50%{transform:translateY(-50%) translateY(-12px);}
}
.hero-tag{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--accent-dim);
border:1px solid var(--accent-bdr);
color:var(--accent-lt);
padding:7px 16px;
border-radius:100px;
font-size:11px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:32px;
width:fit-content;
animation:fadeUp 0.6s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-tag-dot{
width:7px;
height:7px;
background:var(--accent);
border-radius:50%;
animation:heartbeat 2.5s ease-in-out infinite;
}
@keyframes heartbeat{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.75);}}
.hero-title{
font-size:clamp(48px,8vw,88px);
font-weight:700;
line-height:1.0;
letter-spacing:-2.5px;
margin-bottom:24px;
animation:fadeUp 0.6s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-title .accent{
color:var(--accent);
}
.hero-subtitle,#botonLatido{
font-size:clamp(15px,2vw,17px);
color:var(--text-muted);
line-height:1.75;
max-width:480px;
margin:0 0 40px;
animation:fadeUp 0.6s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-btns{
display:flex;
gap:12px;
flex-wrap:wrap;
animation:fadeUp 0.6s 0.25s cubic-bezier(0.22,1,0.36,1) both;
}
.btn-primary{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--accent);
color:#fff;
padding:14px 28px;
border-radius:var(--radius-sm);
font-size:13px;
font-weight:600;
text-decoration:none;
letter-spacing:0.5px;
transition:opacity 0.2s,transform 0.15s;
}
.btn-primary:hover{
opacity:0.88;
transform:translateY(-1px);
}
.btn-secondary{
display:inline-flex;
align-items:center;
gap:8px;
background:transparent;
color:var(--text);
padding:14px 28px;
border-radius:var(--radius-sm);
font-size:13px;
font-weight:500;
text-decoration:none;
border:1px solid var(--border-h);
letter-spacing:0.5px;
transition:background 0.2s,transform 0.15s;
}
.btn-secondary:hover{
background:rgba(255,255,255,0.05);
transform:translateY(-1px);
}
.hero-stats{
display:flex;
margin-top:72px;
padding-top:40px;
border-top:1px solid var(--border);
animation:fadeUp 0.6s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.stat{
flex:1;
padding-right:32px;
}
.stat+.stat{
padding-left:32px;
padding-right:32px;
border-left:1px solid var(--border);
}
.stat-n{
font-family:var(--font-mono);
font-size:32px;
font-weight:700;
color:var(--accent);
line-height:1;
margin-bottom:6px;
}
.stat-l{
font-size:11px;
color:var(--text-faint);
text-transform:uppercase;
letter-spacing:2px;
}
.content-section{
background:var(--bg);
padding:80px 28px 0;
color:var(--text);
}
.content-wrapper{
max-width:1100px;
margin:0 auto;
}
.section-label{
font-size:10px;
letter-spacing:4px;
text-transform:uppercase;
color:var(--text-faint);
margin-bottom:28px;
display:flex;
align-items:center;
gap:12px;
}
.section-label::after{
content:'';
flex:1;
height:1px;
background:var(--border);
}
.content-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
max-width:1100px;
margin:0 auto;
align-items:start;
}
.left-content,.right-content{
width:100%;
}
.service-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:32px;
color:var(--text);
}
.gradient-text{
background:linear-gradient(135deg,var(--accent-lt),#C4B5FD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
font-weight:700;
font-size:1.5rem;
margin-bottom:16px;
display:block;
letter-spacing:-0.5px;
}
.service-card p{
color:var(--text-muted);
line-height:1.75;
font-size:14px;
margin:0 0 28px;
}
.features-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:8px;
}
.feature-item{
display:flex;
align-items:flex-start;
gap:10px;
background:rgba(123,110,246,0.06);
border:1px solid var(--accent-bdr);
border-radius:var(--radius-sm);
padding:12px 14px;
}
.feature-icon{
color:var(--accent);
font-size:15px;
flex-shrink:0;
margin-top:1px;
}
.feature-text{
font-size:12px;
color:var(--text-muted);
line-height:1.4;
font-weight:500;
}
.project-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:32px;
height:fit-content;
color:var(--text);
transition:border-color 0.2s;
}
.project-card:hover{
border-color:var(--border-h);
}
.project-title{
font-size:13px;
font-weight:600;
color:var(--text-faint);
text-transform:uppercase;
letter-spacing:2.5px;
margin-bottom:20px;
}
.project-name{
font-size:22px;
font-weight:700;
color:var(--text);
letter-spacing:-0.5px;
margin-bottom:10px;
}
.project-desc{
font-size:13px;
color:var(--text-muted);
line-height:1.65;
margin-bottom:16px;
}
.project-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:20px;
}
.tag{
display:inline-block;
font-size:10px;
font-weight:600;
background:var(--accent-dim);
color:var(--accent-lt);
padding:4px 10px;
border-radius:4px;
letter-spacing:1px;
text-transform:uppercase;
}
.project-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
color:var(--accent);
text-decoration:none;
font-weight:600;
letter-spacing:0.5px;
padding:8px 16px;
border:1px solid var(--accent-bdr);
border-radius:6px;
transition:background 0.2s;
margin-bottom:20px;
}
.project-link:hover{
background:var(--accent-dim);
}
.project-image-wrapper{
margin-top:4px;
}
.project-image{
width:100%;
height:auto;
max-height:220px;
object-fit:cover;
border-radius:var(--radius-sm);
display:block;
border:1px solid var(--border);
filter:brightness(0.9) saturate(0.85);
transition:filter 0.3s;
}
.project-image:hover{
filter:brightness(1) saturate(1);
}
.footer{
background:#060609;
border-top:1px solid var(--border);
padding:28px 0;
margin-top:80px;
width:100vw;
position:relative;
left:50%;
margin-left:-50vw;
color:var(--text);
}
.footer-content{
max-width:1100px;
margin:0 auto;
padding:0 28px;
display:flex;
align-items:center;
justify-content:space-between;
}
.footer p{
font-size:12px;
color:var(--text-faint);
font-family:var(--font-mono);
margin:0;
}
.footer-loc{
font-size:12px;
color:var(--text-faint);
font-family:var(--font-mono);
}
.notificacion{
position:fixed;
bottom:24px;
right:24px;
background:#1A1825;
border:1px solid var(--accent-bdr);
color:var(--text);
padding:14px 18px;
border-radius:var(--radius-md);
box-shadow:0 8px 32px rgba(0,0,0,0.5);
display:flex;
align-items:center;
gap:12px;
font-size:13px;
max-width:300px;
z-index:9999;
opacity:0;
transform:translateY(16px) scale(0.97);
pointer-events:none;
transition:opacity 0.35s ease,transform 0.35s cubic-bezier(0.22,1,0.36,1);}
.notificacion.mostrar{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.oculto{
opacity:0;
transform:translateY(16px) scale(0.97);
pointer-events:none;
}
.notificacion-logo{
width:36px;
height:36px;
object-fit:contain;
border-radius:6px;
flex-shrink:0;
background:var(--accent-dim);
padding:4px;
}
.notificacion p{
margin:0;
font-size:12px;
line-height:1.5;
color:var(--text-muted);
}
.notificacion p strong{
color:var(--text);
font-weight:600;
}
@media(max-width:768px){
.hero-section{
padding:calc(var(--nav-h) + 48px) 20px 60px;
overflow:hidden;}
.hero-section::before{
width:260px;
height:260px;
right:-60px;
top:29.5%;
transform:translateY(-50%);
opacity:0.65;}
.hero-logo{
width:110px;
right:8%;
top:29.5%;
transform:translateY(-50%);
opacity:1;
z-index:1;
}
.hero-title{
letter-spacing:-1.5px;
margin-bottom:18px;}
#botonLatido{
font-size:15px;
}
.hero-tag,.hero-title,.hero-subtitle,.hero-btns,.hero-stats{
position:relative;
z-index:5;
}
.hero-subtitle{
margin-bottom:20px;
}
.hero-stats{
margin-top:48px;
}
.stat-n{
font-size:24px;
}
.content-section{
padding:60px 20px 0;
}
.content-container{
grid-template-columns:1fr;
gap:16px;
}
.service-card,.project-card{
padding:24px;
}
.features-grid{
grid-template-columns:1fr;
}
.nav-cta{
display:none;
}
.footer-content{
flex-direction:column;
gap:8px;
text-align:center;
}
.footer-loc{
display:none;
}
.notificacion{
bottom:12px;
right:12px;
left:12px;
max-width:none;}
}
@media(max-width:480px){
.nav-menu a{
font-size:11px;
padding:6px 10px;
}
.hero-stats{
flex-direction:column;
gap:20px;
}
.stat+.stat{
border-left:none;
padding-left:0;
border-top:1px solid var(--border);
padding-top:20px;
}
.service-card,.project-card{
padding:20px;
}
.gradient-text{
font-size:1.3rem;
}
.project-name{
font-size:18px;}
}