/* Reset y básicos */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Arial',sans-serif; }
body { background:#f0f2f5; color:#333; line-height:1.5; transition: background 0.3s, color 0.3s; }

/* Header */
header { background: linear-gradient(90deg,#111,#444); color:#fff; padding:2rem 0; text-align:center; position:relative; }
header h1 { font-size:2.5rem; margin-bottom:0.5rem; }
header p { font-size:1.2rem; opacity:0.9; }
header .logo { width:60px; border-radius:12px; margin-bottom:0.5rem; display:block; margin-left:auto; margin-right:auto; }

/* Botón modo oscuro */
.dark-btn {
    position:absolute;
    top:1rem;
    right:1rem;
    padding:0.5rem 1rem;
    border:none;
    border-radius:6px;
    cursor:pointer;
    background:#007bff; /* azul eléctrico */
    color:#fff;
    transition:background 0.3s;
}
.dark-btn:hover { background:#0056b3; }

/* Container */
.container { width:90%; max-width:1000px; margin:0 auto; }

/* App Card */
.app-section { display:flex; justify-content:center; margin:2rem 0; }
.app-card { background:#fff; border-radius:12px; box-shadow:0 12px 25px rgba(0,0,0,0.2); padding:2rem; text-align:center; width:100%; max-width:600px; transition: transform 0.3s; }
.app-card:hover { transform: translateY(-10px); }
.app-icon { width:120px; margin-bottom:1rem; border-radius:20px; }
.app-version { font-size:1rem; margin:0.5rem 0; color:#666; }

/* Botón de descarga */
.download-btn {
    display:inline-block;
    padding:1rem 2rem;
    background:#7f00ff; /* violeta eléctrico */
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
    transition: background 0.3s;
    margin:1rem 0;
}
.download-btn:hover { background:#5a00cc; cursor:pointer; }

/* Screenshots scroll horizontal */
.screenshots-wrapper { overflow-x:auto; margin:1rem 0; }
.screenshots { display:flex; gap:1rem; }
.screenshot { height:200px; border-radius:10px; transition: transform 0.3s; cursor:pointer; }
.screenshot:hover { transform: scale(1.05); }

/* Lightbox */
.lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; z-index:1000; }
.lightbox-img { max-width:90%; max-height:90%; border-radius:10px; }
.lightbox .close { position:absolute; top:2rem; right:2rem; color:#fff; font-size:2.5rem; cursor:pointer; }

/* Notas / README */
.notes { text-align:left; margin-top:1.5rem; padding-top:1rem; border-top:1px solid #ccc; }
.notes ul { margin-top:0.5rem; padding-left:1.2rem; }

/* Reviews Estéticas */
.reviews-section { width:100%; max-width:600px; margin:2rem auto; background:#fff; padding:1.5rem; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.15); text-align:center; }
.stars-wrapper { display:flex; justify-content:center; gap:10px; font-size:2rem; cursor:pointer; margin-top:1rem; }
.star { color:#ccc; transition: color 0.3s; }
.star:hover,
.star:hover ~ .star,
.star.selected { color: gold; }
.thank-you-message { margin-top:10px; font-weight:bold; font-size:1.2rem; color:#4caf50; }
.hidden { display:none; }

/* Footer */
footer { background:#111; color:#fff; text-align:center; padding:1rem; margin-top:2rem; font-size:0.9rem; }

/* Dark mode */
body.dark-mode { background:#121212; color:#e0e0e0; }
body.dark-mode .app-card, body.dark-mode .reviews-section { background:#1e1e1e; }
/* Botones en dark mode */
body.dark-mode .download-btn { background:#9b30ff; }
body.dark-mode .download-btn:hover { background:#7a00cc; }
body.dark-mode .dark-btn { background:#3399ff; }
body.dark-mode .dark-btn:hover { background:#1a73e8; }

/* Responsive */
@media(max-width:600px){
    .screenshots img { height:150px; }
    .stars-wrapper { font-size:1.5rem; gap:8px; }
}