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

body{
    font-family:'Cormorant Garamond', serif;
    background: radial-gradient(circle at center, #2a1a12 0%, #0c0604 80%);
    color:#e8d8b0;
    overflow-x:hidden;
}

/* TITULO */
.section{
    padding:100px 20px;
    text-align:center;
}

h1{
    font-family:'Cinzel', serif;
    font-size:56px;
    letter-spacing:4px;
    margin-bottom:10px;
}

.subtitle{
    font-family:'Cinzel', serif;
    letter-spacing:3px;
    margin-bottom:80px;
    font-size:18px;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:60px;
    max-width:1200px;
    margin:auto;
}

/* CARD */
.card{
    text-align:center;
    opacity:0;
    transform:translateY(50px);
    transition:0.8s ease;
}

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

/* CIRCULO DORADO */
.circle{
    width:140px;
    height:140px;
    margin:0 auto 25px auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    color:#f4c66b;
    border:2px solid #d4a84f;
    position:relative;
    box-shadow:0 0 25px rgba(244,198,107,0.4);
    transition:0.4s ease;
}

.circle::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    border:1px solid rgba(212,168,79,0.3);
    animation:rotate 12s linear infinite;
}

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

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

/* TITULO CARD */
.card h3{
    font-family:'Cinzel', serif;
    font-size:24px;
    margin-bottom:15px;
}

/* TEXTO */
.card p{
    font-size:18px;
    line-height:1.6;
    opacity:0.85;
}

/* PARTICULAS */
.particle{
    position:fixed;
    width:3px;
    height:3px;
    background:#f4c66b;
    border-radius:50%;
    opacity:0.5;
    animation:float 10s linear infinite;
    z-index:-1;
}

@keyframes float{
    from{
        transform:translateY(100vh);
        opacity:0;
    }
    30%{opacity:0.7;}
    to{
        transform:translateY(-10vh);
        opacity:0;
    }
}

/* FOOTER */
.footer{
    margin-top:120px;
    font-family:'Cinzel', serif;
    font-size:22px;
    letter-spacing:3px;
    opacity:0.8;
}

@media(max-width:768px){
    h1{font-size:36px;}
    .circle{width:110px;height:110px;font-size:30px;}
}