body{
background:#0a0a0a;
color:white;
font-family:Georgia, serif;
text-align:center;
margin:0;
}

.contenedor{
margin-top:120px;
}

h1{
color:#d4af37;
font-size:40px;
}

/* BOTONES */

.botones a{
display:inline-block;
margin:10px;
padding:15px 25px;
background:#8b0000;
color:white;
text-decoration:none;
border-radius:5px;
font-size:18px;
}

.botones a:hover{
background:#d4af37;
color:black;
}

/* FORMULARIOS */

form{
width:90%;
max-width:500px;
margin:40px auto;
}

input, select, textarea{
display:block;
width:100%;
padding:16px;
margin:12px 0;
font-size:18px;
border-radius:8px;
border:none;
box-sizing:border-box;
}

textarea{
min-height:120px;
}

button{
width:100%;
padding:18px;
font-size:20px;
background:#8b0000;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

button:hover{
background:#d4af37;
color:black;
}

/* ALTAR */

.altar-container{
margin-top:50px;
position:relative;
display:inline-block;
}

.altar-img{
width:90%;
max-width:500px;
height:auto;
border-radius:10px;
box-shadow:0 0 40px rgba(255,215,0,0.6);
}

/* VELAS */

.velas{
display:flex;
justify-content:center;
gap:40px;
margin-top:25px;
margin-bottom:25px;
}.vela{
width:12px;
height:45px;
background:#ffd700;
border-radius:3px;
position:relative;
}

.vela::after{
content:'';
position:absolute;
top:-15px;
left:50%;
transform:translateX(-50%);
width:12px;
height:18px;
background:orange;
border-radius:50%;
animation:flama 1s infinite alternate;
box-shadow:0 0 15px orange;
}

@keyframes flama{
0%{transform:translateX(-50%) scale(1);opacity:0.9;}
100%{transform:translateX(-50%) scale(1.2);opacity:1;}
}

/* HUMO */

.humo{
position:absolute;
bottom:120px;
left:50%;
width:200px;
height:200px;
background:radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
filter:blur(20px);
animation:humo 6s infinite alternate;
}

@keyframes humo{
0%{transform:translateX(-50%) translateY(0);opacity:0.2;}
100%{transform:translateX(-50%) translateY(-40px);opacity:0.5;}
}

/* OFRENDAS */

.ofrendas{
margin-top:40px;
}

.ofrendas button{
margin:10px;
padding:12px 20px;
background:#8b0000;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
font-size:16px;
}

.ofrendas button:hover{
background:#d4af37;
color:black;
}

#ofrendas-altar{
margin-top:30px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
font-size:40px;
}

/* TARJETAS DE PETICIONES (ROJO) */

.vela-card{
width:92%;
max-width:600px;
margin:25px auto;
padding:25px;
background:#b30000;
border-radius:15px;
border:2px solid #ffd700;
box-shadow:0 0 15px rgba(255,215,0,0.6);
box-sizing:border-box;
}

.vela-icono{
font-size:40px;
margin-bottom:10px;
}

.vela-nombre{
font-size:22px;
font-weight:bold;
color:#ffd700;
margin-bottom:10px;
}

.vela-mensaje{
font-size:18px;
line-height:1.5;
color:white;
}

/* CELULAR */

@media (max-width:768px){

.botones a{
display:block;
width:90%;
margin:15px auto;
font-size:20px;
}

.ofrendas button{
display:block;
width:85%;
margin:15px auto;
font-size:20px;
}

.altar-img{
width:85%;
max-width:350px;
}

.vela-card{
width:94%;
padding:20px;
}

}
.vela-card{
background:#b30000 !important;
border:2px solid #ffd700 !important;
padding:25px !important;
margin:25px auto !important;
width:92% !important;
max-width:600px !important;
border-radius:15px !important;
box-shadow:0 0 15px rgba(255,215,0,0.6) !important;
}

.vela-nombre{
color:#ffd700 !important;
font-size:22px !important;
font-weight:bold !important;
}

.vela-mensaje{
color:white !important;
font-size:18px !important;
}
.volver{
margin:20px;
}

.volver a{
display:inline-block;
padding:12px 20px;
background:#8b0000;
color:white;
text-decoration:none;
border-radius:6px;
font-size:16px;
}

.volver a:hover{
background:#d4af37;
color:black;
}
.texto-altar{

width:90%;
max-width:800px;
margin:40px auto;

font-size:18px;
line-height:1.7;

text-align:center;

}

.texto-altar h2{
color:#ffd700;
margin-bottom:20px;
}

.texto-altar p{
margin-bottom:20px;
}

/* Ajuste para celular */

@media (max-width:768px){

.texto-altar{
font-size:17px;
width:92%;
}

}