:root{
 --bg-color:#fffffa;
 --fn-color:#181d27;
 --accent:#c5a880;
 --drk-bg-color:#353535;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    background:var(--bg-color);
    color:var(--fn-color);
    font-family:'Montserrat', sans-serif;
    display:flex; flex-direction:column; min-height:100vh;
}
html, body{
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
h1,h2,h3{font-family:'Cormorant Garamond', serif; font-weight:400}

.header{
    position:sticky; top:0; width:100%; padding:1rem 5%;
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(255,255,250,0.95); backdrop-filter:blur(10px);
    z-index:10; border-bottom:1px solid #eee;
}
.header-logo-a{text-decoration:none; color:var(--fn-color); display:flex; align-items:baseline; gap:6px}
.header-logo-l{font-size:1.6rem; letter-spacing:4px; font-weight:500}
.header-logo-a span{font-family:'Cormorant Garamond'; font-style:italic; font-size:1.2rem; color:var(--accent)}
.nav-ul{display:flex; list-style:none; gap:1.5rem; font-size:0.9rem}
.nav-li-a{text-decoration:none; color:var(--fn-color); text-transform:uppercase; letter-spacing:1.5px; transition:0.3s}
.nav-li-a:hover{color:var(--accent)}
.nav-cta{background:var(--fn-color); color:white!important; padding:8px 20px}
.menu-toggle{display:none; background:none; border:none; font-size:1.8rem}

.banner{position:relative; width:100%; height:85vh; overflow:hidden}
.banner-img{width:100%; height:100%; object-fit:cover; filter:brightness(0.7)}
.banner-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center; color:white; padding:20px;
}
.banner-overlay h2{font-size:3.5rem; line-height:1.1; margin-bottom:15px}
.banner-overlay p{font-weight:300; letter-spacing:2px; margin-bottom:30px}
.btn-primary{border:1px solid white; color:white; padding:14px 40px; text-decoration:none; text-transform:uppercase; letter-spacing:2px; font-size:0.85rem; transition:0.3s}
.btn-primary:hover{background:white; color:var(--fn-color)}

.service, .portafolio, .about, .formulario{width:100%; padding:5rem 8%; text-align:center}
.section-title{font-size:2.8rem; margin-bottom:10px}
.section-sub{font-weight:300; color:#888; margin-bottom:50px; letter-spacing:1px}

.service-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; text-align:left; margin-top:40px}
.service-card{background:#f7f5; padding:35px; border:1px solid #eee; transition:0.3s}
.service-card:hover{transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.05)}
.service-card img{width:32px; margin-bottom:20px; opacity:0.7}
.service-card h3{font-size:1.3rem; margin-bottom:12px}
.service-card p{font-size:0.9rem; line-height:1.7; color:#555; font-weight:300}

.portafolio{background:#fcfcf9; padding:5rem 0 5rem 8%}
.gallery-div{display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding:20px 0; scrollbar-width:none}
.gallery-div::-webkit-scrollbar{display:none}
.galery-img{flex:0 0 380px; height:520px; object-fit:cover; border-radius:4px; transition:0.4s; cursor:pointer}
.galery-img:hover{transform:scale(1.02)}

.about-wrapper{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; margin-top:60px}
.about-img{width:44px; margin-bottom:15px; opacity:0.8}
.about-art h2{font-size:1rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px}
.about-art h4{font-weight:300; line-height:1.6; color:#555; font-size:0.9rem}

.formulario{max-width:800px; margin:0 auto}
.formulario-h1{font-size:2.5rem}
.formulario-sub{font-weight:300; margin-bottom:50px; color:#888}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:30px}
.campo{position:relative; margin-bottom:30px; text-align:left}
.formulario-input{width:100%; padding:10px 0; border:none; border-bottom:1px solid #ccc; background:transparent; outline:none; font-size:1rem}
.formulario-input:focus{border-bottom-color:var(--fn-color)}
.formulario-label{position:absolute; left:0; top:10px; color:#999; pointer-events:none; transition:0.3s; text-transform:uppercase; font-size:0.75rem; letter-spacing:1px}
.formulario-input:focus + .formulario-label, .formulario-input:not(:placeholder-shown) + .formulario-label{top:-15px; font-size:0.65rem; color:var(--fn-color)}
.formulario-submit{margin-top:30px; padding:16px 50px; background:var(--fn-color); color:white; border:none; text-transform:uppercase; letter-spacing:2px; cursor:pointer; transition:0.3s; width:100%}
.formulario-submit:hover{background:#000}

.footer{background:var(--fn-color); color:#ccc; padding:4rem 8%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px}
.footer-img-logo{width:70px; height:70px; border-radius:50%; object-fit:cover}
.footer-menu{list-style:none; display:flex; gap:20px}
.footer-menu a{color:#aaa; text-decoration:none; text-transform:uppercase; font-size:0.8rem; letter-spacing:1px}
.footer-derechos{font-size:0.8rem; font-weight:300}

@media(max-width:768px){
 .nav{
    position:fixed; 
    top:72px; 
    right:0;
    width:70%; 
    height:calc(100vh - 72px); 
    background:var(--bg-color); 
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding:40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
 }
 .nav.active{
    transform: translateX(0);
    right:0;
 }
 .nav-ul{flex-direction:column; font-size:1.2rem; gap:2rem;}
 .menu-toggle{display:block; z-index:20;}
 .form-grid{grid-template-columns:1fr}
 .banner-overlay h2{font-size:2.2rem}
 .galery-img{flex:0 0 280px; height:380px}
 .portafolio{padding:5rem 0 5rem 5%}
 .digital-grid{ grid-template-columns:1fr }
 .digital-mockup img{ height:400px }
}