body{
 margin:0;
 padding:0;
 font-family:"Segoe UI",sans-serif;
 background:#0b0b0c;
 color:#e8e8e8;
}

header{
 padding:40px 20px 20px;
 text-align:center;
 background:linear-gradient(135deg,#1a1a1d,#0b0b0c);
 border-bottom:1px solid rgba(255,255,255,0.08);
}

header img{
 width:120px;
 opacity:0.95;
 margin-bottom:10px;
}

h1{
 font-size:32px;
 margin:0;
 background:linear-gradient(90deg,#ffdf7f,#ff9cff,#7fd8ff);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 font-weight:700;
}

.container{
 max-width:900px;
 margin:0 auto;
 padding:20px;
 text-align:center;
}

button{
 margin-top:20px;
 padding:12px 22px;
 font-size:18px;
 border:none;
 border-radius:10px;
 cursor:pointer;
 background:linear-gradient(135deg,#ffd86b,#ff9cff,#7fd8ff);
 color:#000;
 font-weight:600;
}

.modal{
 position:fixed;
 top:0;left:0;
 width:100%;height:100%;
 background:rgba(0,0,0,0.6);
 display:none;
 justify-content:center;
 align-items:center;
}

.modal.open{
 display:flex;
}

.modal-content{
 background:#1a1a1d;
 padding:20px;
 border-radius:12px;
 width:90%;
 max-width:400px;
 border:1px solid rgba(255,255,255,0.15);
}

.modal-content h2{
 margin-top:0;
 color:#ffd86b;
}

.modal-content input,
.modal-content textarea{
 width:100%;
 padding:10px;
 margin-top:10px;
 border-radius:8px;
 border:1px solid rgba(255,255,255,0.15);
 background:#0f0f10;
 color:#fff;
}

.modal-content textarea{
 height:120px;
 resize:none;
}

.modal-content .cerrar{
 background:#444;
 color:#fff;
 margin-left:10px;
}