/*
Theme Name: Grupo Forja Élite - Personalizable
Author: Tu Nombre
Version: 1.0
Description: Tema personalizado editable via WordPress Customizer
*/

body{
 margin:0;
 font-family:'Poppins', sans-serif;
 background:#0f172a;
 color:white;
 scroll-behavior:smooth;
}

/* INTRO */
#intro{
 position:fixed;
 width:100%;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index:9999;
 animation: fadeOut 2s ease forwards;
 animation-delay:2.5s;
}

.intro-logo{
 width:200px;
 animation: zoomLogo 2s ease;
}

@keyframes zoomLogo{
 0%{transform:scale(0.5);opacity:0;}
 100%{transform:scale(1);opacity:1;}
}

@keyframes fadeOut{
 to{opacity:0;visibility:hidden;}
}

/* HEADER */
.header{
 position:fixed;
 width:100%;
 top:0;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:20px 60px;
 backdrop-filter:blur(10px);
 background:rgba(15,23,42,0.5);
 z-index:1000;
 transition:0.3s;
}

.header.scrolled{
 background:#020617;
}

.logo{
 display:flex;
 align-items:center;
 gap:10px;
}

.logo img{
 height:45px;
}

.logo h2{
 margin:0;
 font-size:18px;
}

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

.nav a{
 color:white;
 text-decoration:none;
 font-weight:500;
 position:relative;
}

.nav a::after{
 content:"";
 position:absolute;
 width:0;
 height:2px;
 bottom:-5px;
 left:0;
 background:#A78BFA;
 transition:0.3s;
}

.nav a:hover::after{
 width:100%;
}

.nav .cta{
 background:#7C3AED;
 padding:8px 18px;
 border-radius:20px;
}

/* HERO */
.hero{
 position:relative;
 height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
 overflow:hidden;
}

.video-bg{
 position:absolute;
 width:100%;
 height:100%;
 object-fit:cover;
}

.hero::after{
 content:"";
 position:absolute;
 width:100%;
 height:100%;
 background:rgba(2,6,23,0.6);
}

.hero-content{
 position:relative;
 z-index:2;
}

.hero h1{
 font-size:55px;
 margin:0;
}

.btn{
 background:linear-gradient(135deg,#7C3AED,#A78BFA);
 padding:14px 30px;
 border:none;
 border-radius:8px;
 color:white;
 margin-top:20px;
 cursor:pointer;
}

/* SECCIONES */
.section{
 padding:100px 20px;
 text-align:center;
 background:#f8fafc;
 color:#111827;
}

.about{
 max-width:900px;
 margin:auto;
 line-height:1.7;
}

.about p{
 margin-top:15px;
}

/* SERVICIOS */
.cards{
 display:flex;
 justify-content:center;
 gap:25px;
 flex-wrap:wrap;
 margin-top:30px;
}

.card{
 background:white;
 padding:25px;
 border-radius:14px;
 width:280px;
 box-shadow:0 10px 30px rgba(0,0,0,0.08);
 text-align:left;
}

/* FORM */
.form{
 background:#111827;
 color:white;
 padding:80px 20px;
 text-align:center;
}

input{
 padding:12px;
 margin:10px;
 border-radius:6px;
 border:none;
}

footer{
 text-align:center;
 padding:20px;
 background:#020617;
}