:root{
--bg:#0f1115;
--text:#ffffff;
--soft:#cfd3dc;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

/* INTRO CINEMÁTICA */

#intro{
position:fixed;
inset:0;
background:#0f1115;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity 1.8s ease, visibility 1.8s ease;
}

#intro.hidden{
opacity:0;
visibility:hidden;
}

.intro-content{
text-align:center;
animation:introFade 3s ease forwards;
}

.intro-content img{
width:160px;
margin-bottom:2rem;
}

.intro-text{
letter-spacing:.4em;
font-size:.9rem;
color:var(--soft);
}

@keyframes introFade{
0%{opacity:0;transform:translateY(20px)}
100%{opacity:1;transform:none}
}

/* HERO VIDEO */

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

.hero-video{
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
transform:translate(-50%,-50%);
object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
padding:2rem;
animation:heroFade 2s ease 1.5s forwards;
opacity:0;
}

@keyframes heroFade{
to{opacity:1}
}

.hero h1{
font-size:clamp(2.5rem,5vw,4rem);
font-weight:700;
}

.hero p{
margin-top:1.5rem;
color:var(--soft);
}

.btn-primary{
display:inline-block;
margin-top:2rem;
padding:1rem 2.5rem;
border-radius:40px;
background:white;
color:black;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-primary:hover{
transform:translateY(-4px);
}

/* INTRO SECTION */

.intro-section{
padding:6rem 1.5rem;
max-width:900px;
margin:auto;
text-align:center;
}

.intro-section p{
margin-top:1.5rem;
color:var(--soft);
}

/* DIVISIONES - versión premium */

.divisiones{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:2rem;
padding:6rem 1.5rem;
background:#0f1115;
}

.division{
position:relative;
padding:4rem 2rem;
border-radius:24px;
overflow:hidden;
text-align:center;
background:linear-gradient(145deg,#1a1f2b,#12151c);
border:1px solid rgba(255,255,255,0.05);
transition:all .5s cubic-bezier(.2,.8,.2,1);
}

.division::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top left,rgba(255,255,255,.08),transparent 60%);
opacity:.5;
pointer-events:none;
}

.division img{
height:70px;
margin-bottom:1.5rem;
transition:.4s;
}

.division h3{
margin-bottom:1rem;
}

.division p{
color:#cfd3dc;
opacity:.8;
}

/* Hover elegante */

.division:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,.4);
background:linear-gradient(145deg,#202636,#141824);
}

.division:hover img{
transform:scale(1.08);
}

.fosca{
background:linear-gradient(145deg,#c97a1c,#7a4c12);
}

.nova{
background:linear-gradient(145deg,#50C2EB,#0099FF);
}

.kmara{
background:linear-gradient(145deg,#6D8541,#3f4e25);
}

.sky{
background:linear-gradient(145deg,#0060BF,#0001BF);
}

.reald{
background:linear-gradient(145deg,#3a2f6b,#221a44);
}

.cubo{
background:linear-gradient(145deg,#0D7811,#064b0a);
}

/* LOGOS DIVISIONES - efecto premium */

.division img{
height:70px;
margin-bottom:1.5rem;
transition:transform .4s cubic-bezier(.2,.8,.2,1),
           filter .4s cubic-bezier(.2,.8,.2,1),
           opacity .4s;
opacity:.75;
filter:grayscale(40%);
}

.division:hover img{
transform:translateY(-6px) scale(1.06);
filter:grayscale(0%);
opacity:1;
}

footer{
text-align:center;
padding:3rem 1rem;
color:var(--soft);
background:#0a0c10;
}