:root{--main:#ff4500;--accent:#ff8c00;--dark:#0f172a;--light:#f8fafc;--glow:0 0 20px rgba(255,69,0,.6);}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Rajdhani',sans-serif;background:var(--dark);color:var(--light);line-height:1.6;overflow-x:hidden;min-height:100vh;}
canvas{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;}
header{background:linear-gradient(135deg,var(--main),var(--accent));padding:3rem 1rem;text-align:center;clip-path:polygon(0 0,100% 0,100% 80%,0 100%);position:relative;}
.logo{width:100px;filter:drop-shadow(0 0 10px var(--main));animation:pulse 4s infinite;}
h1{font-family:'Orbitron',monospace;font-size:3.8rem;color:#fff;text-shadow:0 0 20px var(--accent);letter-spacing:6px;}
.tagline{font-size:1.4rem;opacity:.9;margin-top:.5rem;}
.skip-link{position:absolute;top:-40px;left:6px;background:#000;color:#fff;padding:10px 15px;z-index:1000;border-radius:4px;transition:top .3s;}
.skip-link:focus{top:6px;}
#themeToggle{position:fixed;top:20px;right:20px;background:rgba(255,255,255,.1);border:2px solid var(--accent);width:56px;height:56px;border-radius:50%;font-size:1.6rem;color:var(--accent);backdrop-filter:blur(10px);z-index:99;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.4s;}
#themeToggle:hover{background:var(--accent);color:#000;transform:rotate(360deg);}
.google-translate{position:fixed;top:20px;right:90px;z-index:98;}
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;padding:10rem 1rem 4rem;max-width:1400px;margin:auto;}
.card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,69,0,.2);border-radius:20px;overflow:hidden;box-shadow:var(--glow);transition:.5s;text-align:center;}
.card:hover{transform:translateY(-15px);box-shadow:0 0 50px rgba(255,69,0,.4);}
.card h2{font:700 2rem 'Orbitron';background:linear-gradient(135deg,var(--main),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:1.5rem 1rem .5rem;}
.card p{padding:0 1.5rem 1.5rem;opacity:.9;}
.btn{background:linear-gradient(135deg,var(--main),var(--accent));color:#fff;border:none;padding:1.1rem 2.5rem;font:700 1.2rem 'Rajdhani';border-radius:50px;cursor:pointer;box-shadow:var(--glow);position:relative;overflow:hidden;transition:.4s;letter-spacing:1px;text-transform:uppercase;margin:0 1.5rem 1.5rem;width:calc(100% - 3rem);}
.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);transition:.5s;transform:translate(-50%,-50%);}
.btn:hover::before{width:280px;height:280px;}
.btn:hover{transform:scale(1.05);box-shadow:0 0 35px var(--accent);}
.btn:active{animation:engine .6s;}
section{padding:4rem 1rem;text-align:center;max-width:1200px;margin:auto;}
h2{font:700 2.6rem 'Orbitron';margin-bottom:2rem;background:linear-gradient(135deg,var(--main),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;}
.item{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);padding:2rem;border-radius:16px;border-left:4px solid var(--accent);transition:.4s;}
.item:hover{transform:translateY(-8px);box-shadow:var(--glow);}
.item .icon{font-size:2.8rem;margin-bottom:1rem;display:block;background:linear-gradient(135deg,var(--main),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.contact form{max-width:600px;margin:auto;display:grid;gap:1.2rem;}
.contact input,.contact textarea{width:100%;padding:1rem;border-radius:10px;border:1px solid var(--accent);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;}
.contact input:focus,.contact textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(255,69,0,.3);}
footer{background:var(--dark);padding:3rem 1rem;text-align:center;}
.social a{color:var(--accent);font-size:2rem;margin:0 1rem;transition:.3s;}
.social a:hover{color:#fff;transform:translateY(-4px);}
.back-to-top{position:fixed;bottom:2rem;right:2rem;display:none;background:var(--accent);color:#000;width:50px;height:50px;border-radius:50%;font:700 1.4rem 'Rajdhani';box-shadow:var(--glow);z-index:98;align-items:center;justify-content:center;cursor:pointer;}
.back-to-top.visible{display:flex;}
.notification{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--accent);color:#000;padding:1rem 1.5rem;border-radius:12px;box-shadow:var(--glow);z-index:1000;max-width:340px;opacity:0;transform:translateY(20px);transition:.4s;font-weight:600;}
.notification.show{opacity:1;transform:translateY(0);}
.hidden{display:none;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes engine{0%{transform:scale(1)}20%{transform:scale(0.92)}40%{transform:scale(1.25) rotate(-4deg)}60%{transform:scale(1.08) rotate(4deg)}100%{transform:scale(1)}}
@media(max-width:768px){h1{font-size:2.8rem;}.heroes{padding-top:8rem;}.card h2{font-size:1.8rem;}}
.header-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;        /* o 'contain' según prefieras */
    object-position: center top;
}

/* Si usas <picture> con versión móvil, esto mejora aún más */
picture {
    display: block;
    width: 100%;
}