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

body{
    font-family:'Cormorant Garamond', serif;
    background:#0b0705;
    color:#e8d8b0;
    overflow-x:hidden;
}

/* BACKGROUND TECNICO */
body::before{
    content:"";
    position:fixed;
    width:200%;
    height:200%;
    background:
    radial-gradient(circle at center, rgba(212,168,79,0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(212,168,79,0.03) 0px, transparent 1px, transparent 40px);
    animation:rotateBg 60s linear infinite;
    z-index:-2;
}

@keyframes rotateBg{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* SECTION */
.section{
    padding:120px 20px;
    max-width:1200px;
    margin:auto;
    position:relative;
}

/* TITULOS */
h1{
    font-family:'Cinzel', serif;
    font-size:52px;
    margin-bottom:15px;
}

.subtitle{
    font-size:22px;
    margin-bottom:30px;
}

.tagline{
    margin:40px 0 80px;
    letter-spacing:3px;
    font-family:'Cinzel', serif;
    font-size:16px;
    opacity:0.8;
}

/* LINEA CENTRAL */
.vertical-line{
    position:absolute;
    top:300px;
    left:50%;
    width:3px;
    height:1000px;
    background:linear-gradient(to bottom, transparent, #d4a84f, transparent);
    transform:translateX(-50%);
    box-shadow:0 0 25px rgba(212,168,79,0.8);
}

/* GRID NIVELES */
.levels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.box{
    border:1px solid rgba(212,168,79,0.4);
    padding:30px;
    background:rgba(20,12,8,0.6);
    backdrop-filter:blur(4px);
    box-shadow:0 0 20px rgba(212,168,79,0.2);
    transition:0.6s ease;
    opacity:0;
    transform:translateY(40px);
}

.box.visible{
    opacity:1;
    transform:translateY(0);
}

.box:hover{
    box-shadow:0 0 40px rgba(244,198,107,0.8);
    border-color:#f4c66b;
}

.box h3{
    font-family:'Cinzel', serif;
    font-size:24px;
    margin-bottom:15px;
}

.box ul{
    padding-left:20px;
    line-height:1.7;
}

/* ENFOQUE SISTEMICO */
.system{
    margin-top:140px;
    text-align:center;
}

.system h2{
    font-family:'Cinzel', serif;
    font-size:36px;
    margin-bottom:20px;
}

.system-icons{
    margin-top:60px;
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.icon{
    width:120px;
    height:120px;
    border-radius:50%;
    border:2px solid #d4a84f;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    box-shadow:0 0 25px rgba(212,168,79,0.5);
    transition:0.4s;
}

.icon:hover{
    transform:scale(1.1);
    box-shadow:0 0 40px rgba(244,198,107,1);
}

/* RESPONSIVE */
@media(max-width:900px){
    .levels{
        grid-template-columns:1fr;
    }
    .vertical-line{
        display:none;
    }
}