:root{--primary:#1a1a2e;--secondary:#0f3460;--accent:#e94560;--text:#2d3436;--bg:#f8f9fa;--white:#fff;--border:#e1e8ed;}
* {box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Open Sans',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;text-align:center;}
h1,h2,h3{font-family:'Montserrat',sans-serif;text-align:center;}
h1{font-size:2.8em;margin-bottom:1rem;}h2{font-size:2.2em;margin:3rem 0 2rem;}
.section-title{text-align:center;}

/* CONTAINER */
.container{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;}

/* HEADER */
header{background:var(--primary);color:var(--white);padding:1.5rem 0;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,0.1);}
.logo{display:block;margin:0 auto 1rem;}
.logo img{width:510px;height:90px;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.15);}
.nav-menu{display:flex;list-style:none;gap:3rem;justify-content:center;flex-wrap:wrap;margin:0 auto;}
.nav-menu a{color:var(--white);text-decoration:none;font-weight:500;transition:all 0.3s;padding:0.5rem 1rem;border-radius:6px;}
.nav-menu a:hover{color:var(--accent);background:rgba(255,255,255,0.1);}
.menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;}

/* HERO */
.hero{background:linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);color:#f0f4f8 !important;text-align:center;padding:140px 20px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="10" y="20" font-size="12" fill="rgba(233,69,96,0.1)">function</text></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="60" font-size="10" fill="rgba(233,69,96,0.08)">return</text></svg>');background-size:200px 100px,150px 80px;animation:codeFloat 25s linear infinite;pointer-events:none;}
@keyframes codeFloat{0%{transform:translateY(100vh) rotate(0deg);}100%{transform:translateY(-100vh) rotate(360deg);}}
.hero-content{max-width:800px;margin:0 auto;}
.hero h1{font-size:3.2em;color:#fff !important;letter-spacing:-0.5px;text-shadow:0 2px 10px rgba(0,0,0,0.8);margin-bottom:1rem;}
.hero p{font-family:'Montserrat',sans-serif;font-size:1.5em;color:#e8f0fe !important;margin-bottom:3rem;}
.btn{background:var(--accent);color:var(--white);padding:16px 40px;text-decoration:none;border-radius:50px;font-weight:600;display:inline-block;transition:all 0.3s;box-shadow:0 4px 15px rgba(233,69,96,0.3);margin-top:2rem;}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(233,69,96,0.4);}

/* SERVICIOS */
section{padding:80px 0;background:var(--bg);}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;justify-content:center;max-width:1400px;margin:0 auto;}
.feature-item{background:var(--white);padding:2rem;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:all 0.3s;position:relative;overflow:hidden;min-width:0;}
.feature-item::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent);opacity:0;transition:opacity 0.3s;}
.feature-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.12);}
.feature-item:hover::before{opacity:1;}
.feature-item i{font-size:3rem;color:var(--accent);margin-bottom:1rem;}
.feature-item h3{font-size:1.2em;margin-bottom:0.5rem;}

/* FORMULARIO */
#contacto .container {max-width:100%;padding:0 15px;}
.contact-form {
    max-width:900px !important;
    width:100% !important;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    padding:2rem;
    background:var(--white);
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border:1px solid var(--border);
}

.contact-form input,
.contact-form textarea {
    padding:15px;
    font-size:1em;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:inherit;
    width:100%;
    transition:all 0.3s;
    background:var(--white);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(233,69,96,0.1);
}

.contact-form textarea {
    grid-column:1 / -1;
    resize:vertical;
    min-height:120px;
}

.contact-form button {
    grid-column:1 / -1;
    padding:18px;
    font-size:1.1em;
    background:var(--accent);
    color:var(--white);
    border:none;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
}

.contact-form button:hover {
    background:#d6336c;
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(233,69,96,0.3);
}

/* FOOTER */
.footer{background:var(--primary);color:var(--white);text-align:center;padding:2.5rem 0;}

/* RESPONSIVE */
@media (max-width:1200px){
    .features-grid{grid-template-columns:repeat(2,1fr);gap:2rem;}
}

@media (max-width:768px){
    .container{padding:0 15px;}
    .nav-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:90%;background:var(--primary);flex-direction:column;padding:1rem;gap:0;border-radius:0 0 10px 10px;}
    .nav-menu.active{display:flex;}
    .menu-toggle{display:block;}
    .hero{padding:80px 15px;}
    .hero h1{font-size:2em;}
    .features-grid{grid-template-columns:1fr;gap:1.5rem;}
    .contact-form{grid-template-columns:1fr;gap:1rem;padding:1.5rem;}
}