*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:white;
overflow-x:hidden;
}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

/* MATRIX */

.matrix{
position:fixed;
inset:0;
z-index:-1;
background:
linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.95)),
repeating-linear-gradient(
90deg,
transparent 0 28px,
rgba(212,162,58,.08) 30px
),
repeating-linear-gradient(
180deg,
transparent 0 22px,
rgba(212,162,58,.12) 24px
);
overflow:hidden;
}

.matrix::before{
content:"0101 1010 0110 1001 0011 1100 0101 1010 0110 1001 0011 1100 0101 1010";
position:absolute;
top:-200px;
left:0;
width:100%;
height:200%;
color:rgba(212,162,58,.35);
font-size:20px;
letter-spacing:22px;
line-height:34px;
word-spacing:28px;
animation:fall 8s linear infinite;
}

@keyframes fall{
from{transform:translateY(-200px);}
to{transform:translateY(260px);}
}

/* HEADER */

header{
height:86px;
padding:0 4%;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
background:#050505;
position:sticky;
top:0;
z-index:1000;
border-bottom:1px solid rgba(255,255,255,.08);
}

.brand img{
width:165px;
}

nav{
display:flex;
gap:30px;
}

nav a{
font-weight:700;
font-size:15px;
}

nav a:hover{
color:#d4a23a;
}

.right{
display:flex;
align-items:center;
gap:14px;
}

.right button{
padding:9px 14px;
border:1px solid #555;
background:transparent;
color:white;
font-weight:bold;
border-radius:4px;
cursor:pointer;
}

.right button.active{
background:#d4a23a;
color:#111;
border-color:#d4a23a;
}

.right a{
font-size:22px;
}

.right a:hover{
color:#d4a23a;
}

/* HERO */

.hero{
min-height:650px;
padding:70px 5%;
display:grid;
grid-template-columns:1fr 1.1fr;
align-items:center;
gap:40px;
background:
linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.7),rgba(0,0,0,.35));
}

.hero h1{
font-size:clamp(42px,6vw,72px);
line-height:1.08;
font-weight:900;
margin-bottom:25px;
}

.hero span{
color:#d4a23a;
}

.hero p{
font-size:20px;
line-height:1.7;
color:#ddd;
max-width:620px;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
gap:22px;
flex-wrap:wrap;
margin-bottom:45px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
background:#d4a23a;
color:#111;
padding:16px 28px;
border-radius:6px;
font-weight:800;
border:1px solid #d4a23a;
}

.btn.outline{
background:transparent;
color:white;
}

.follow{
display:flex;
align-items:center;
gap:18px;
}

.follow a{
width:42px;
height:42px;
border:2px solid #d4a23a;
color:#d4a23a;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}

.hero-img img{
filter:drop-shadow(0 30px 40px rgba(0,0,0,.8));
}

/* SERVICES */

.services,
.projects{
padding:65px 4%;
text-align:center;
background:#050505;
}

.section-tag{
color:#d4a23a;
font-weight:800;
letter-spacing:2px;
font-size:14px;
margin-bottom:12px;
}

.services h2,
.projects h2{
font-size:clamp(30px,4vw,42px);
margin-bottom:40px;
}

.service-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}

.service-card{
background:linear-gradient(145deg,#111,#090909);
padding:35px 22px;
border-radius:14px;
border:1px solid rgba(212,162,58,.16);
box-shadow:0 12px 35px rgba(0,0,0,.3);
}

.service-card i{
color:#d4a23a;
font-size:45px;
margin-bottom:22px;
}

.service-card h3{
margin-bottom:14px;
}

.service-card p{
color:#c7c7c7;
line-height:1.6;
}

/* PROJECTS */

.project-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.project-card{
background:linear-gradient(145deg,#111,#070707);
border:1px solid rgba(212,162,58,.35);
border-radius:14px;
overflow:hidden;
text-align:left;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.project-card img{
height:230px;
object-fit:cover;
}

.project-card div{
padding:24px;
}

.project-card h3{
color:#d4a23a;
font-size:24px;
margin-bottom:10px;
}

.project-card p{
color:#ddd;
line-height:1.5;
margin-bottom:22px;
}

.project-card a{
border:1px solid #d4a23a;
padding:12px 18px;
border-radius:5px;
display:inline-flex;
font-weight:bold;
}

.project-card a:hover{
background:#d4a23a;
color:#111;
}

/* CTA */

.cta{
margin:20px 4%;
display:grid;
grid-template-columns:1fr 1.4fr;
align-items:center;
overflow:hidden;
border:1px solid rgba(212,162,58,.25);
border-radius:14px;
background:#0b0b0b;
}

.cta div{
padding:45px;
}

.cta h2{
font-size:clamp(34px,5vw,52px);
line-height:1.1;
margin-bottom:18px;
}

.cta h2 span{
color:#d4a23a;
}

.cta p{
color:#ddd;
line-height:1.6;
margin-bottom:26px;
}

.cta img{
height:360px;
object-fit:cover;
}

/* FOOTER */

footer{
padding:25px 5%;
display:flex;
align-items:center;
justify-content:space-between;
background:#030303;
border-top:1px solid rgba(255,255,255,.08);
color:#aaa;
}

footer img{
width:150px;
}

footer div{
display:flex;
gap:18px;
font-size:24px;
}

footer a:hover{
color:#d4a23a;
}

/* RESPONSIVE */

@media(max-width:1000px){
header{
height:auto;
padding:18px 5%;
flex-wrap:wrap;
justify-content:center;
}

.brand{
width:100%;
display:flex;
justify-content:flex-start;
}

nav{
width:100%;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.hero{
grid-template-columns:1fr;
text-align:center;
}

.hero p{
margin-left:auto;
margin-right:auto;
}

.hero-buttons,
.follow{
justify-content:center;
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.project-grid{
grid-template-columns:1fr;
}

.cta{
grid-template-columns:1fr;
text-align:center;
}
}

@media(max-width:600px){
.brand img{
width:120px;
}

nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
text-align:center;
}

.right{
width:100%;
justify-content:center;
}

.hero{
padding:55px 6%;
}

.hero h1{
font-size:42px;
}

.hero p{
font-size:17px;
}

.btn{
width:100%;
}

.follow{
flex-wrap:wrap;
}

.service-grid{
grid-template-columns:1fr;
}

.project-card img{
height:210px;
}

.cta{
margin:20px 4%;
}

.cta div{
padding:30px 22px;
}

footer{
flex-direction:column;
gap:18px;
text-align:center;
}
/* MATRIX SOLO EN HERO */
.matrix-side{
position:absolute;
top:0;
right:0;
width:45%;
height:100%;
overflow:hidden;
pointer-events:none;
opacity:.18;
z-index:0;
}

.matrix-side::before{
content:
"0101 1010 0011 1010 1100 1010 "
"0101 1101 0100 1011 0101 "
"1010 0101 1010 0011 1010 "
"1101 0010 0101 1110 1010";

position:absolute;
top:-100%;
right:0;

font-size:24px;
line-height:38px;
letter-spacing:6px;

color:#d4a63a;

writing-mode:vertical-rl;

animation:matrixfall 10s linear infinite;
}

@keyframes matrixfall{
0%{
transform:translateY(-100%);
}

100%{
transform:translateY(200%);
}
}

@media(max-width:700px){

.matrix-side{
width:35%;
right:0;
top:0;
opacity:.25;
}

.matrix-side::before{
font-size:18px;
line-height:26px;
}
/* MATRIX EN EL HEADER */

header{
position:sticky;
overflow:hidden;
}

.header-matrix{
position:absolute;
top:0;
right:0;
width:55%;
height:100%;
z-index:0;
pointer-events:none;
overflow:hidden;
opacity:.35;
}

.header-matrix::before{
content:
"0101 1010 1100 0110 1001 0101 1010 0011 "
"1101 0101 0010 1010 0110 1001 0101 "
"1010 0011 1100 0101 1010 0110 1001 ";

position:absolute;
top:-100%;
right:0;

width:100%;
height:250%;

color:#d4a23a;
font-size:20px;
line-height:32px;
letter-spacing:8px;
word-spacing:12px;

animation:headerMatrixFall 7s linear infinite;
}

@keyframes headerMatrixFall{
0%{
transform:translateY(-40%);
}
100%{
transform:translateY(40%);
}
}

header .brand,
header nav,
header .right{
position:relative;
z-index:2;
}

/* TELÉFONO */
@media(max-width:600px){

.header-matrix{
width:60%;
right:0;
opacity:.45;
}

.header-matrix::before{
font-size:18px;
line-height:28px;
letter-spacing:6px;
}
/* MATRIX HEADER MEJORADO */

.header-matrix{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
overflow:hidden;
opacity:.5;
}

.header-matrix::before{
content:
"0101 1010 1100 0110 1001 0101 1010 0011 1101 0101 0010 1010 0110 1001 "
"1010 0011 1100 0101 1010 0110 1001 0101 1010 1100 0110 1001 0101 1010 "
"0011 1101 0101 0010 1010 0110 1001 1010 0011 1100 0101 1010 0110 1001 ";

position:absolute;
top:-220%;
left:0;
width:100%;
height:400%;

color:#d4a23a;
font-size:22px;
line-height:30px;
letter-spacing:7px;
word-spacing:12px;

animation:headerMatrixFallFast 0.5s linear infinite;
}

@keyframes headerMatrixFallFast{
0%{
transform:translateY(-35%);
}
100%{
transform:translateY(75%);
}
}

header .brand,
header nav,
header .right{
position:relative;
z-index:2;
}

@media(max-width:600px){

.header-matrix{
opacity:.55;
}

.header-matrix::before{
font-size:20px;
line-height:27px;
letter-spacing:5px;
word-spacing:8px;
animation-duration:2.8s;
}

}