/* Meta: no se coloca aquí, va en el HTML dentro de :
*/
/* Reset básico y tipografía */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
font-family: "Segoe UI", Arial, sans-serif;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
/* Fondo degradado suave para todas las resoluciones */
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}
/* Título principal */
h1 {
margin: 40px 0 20px;
font-size: 42px;
letter-spacing: 2px;
text-shadow: 3px 3px 10px rgba(0,0,0,0.6);
}
/* Contenedor de tarjetas (grid) */
.launcher {
margin-top: 40px;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
flex: 1;
}
/* Tarjetas */
.card {
width: 100%;
padding: 25px;
border-radius: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.card h2 { margin: 0 0 10px; }
.card h3, .card p {
margin: 0;
font-size: 14px;
opacity: 0.95;
}
/* Enlace principal dentro de cada tarjeta */
.main-link {
display: block;
color: inherit;
text-decoration: none;
}
/* Enlaces externos dentro de cada tarjeta */
.external-link {
display: block;
margin-top: 15px;
font-size: 14px;
color: #99cfff;
text-decoration: underline;
}
.external-link:hover { color: white; }
/* Estilos por juego (gradientes y colores) */
.cheeseria { background: linear-gradient(135deg, #ffb347, #ffcc33); color: #5a2d0c; }
.minecraft { background: linear-gradient(135deg, #3b6e2a, #1e3d16); }
.penguin { background: linear-gradient(135deg, #3b40d6, #0a99bd); }
.geomdash { background: linear-gradient(135deg, #8917c7, #4c06a0); }
.blockly { background: linear-gradient(135deg, #0f31ba, #04871f); }
.win7simu { background: linear-gradient(135deg, #0f31ba00, #aad1fb); }
.sandboxels { background: linear-gradient(135deg, #000000, #55ff00); }
.solitaire { background: linear-gradient(135deg, #5100ff, #0099ff); }
.stickman { background: linear-gradient(135deg, #0bcaff, #37b12e); }
.angrymexvtrump { background: linear-gradient(135deg, #3f0303, #169605); }
.googlesnake { background: linear-gradient(135deg, #0554e6, #00c010); }
.incredisprunki { background: linear-gradient(135deg, #ff4da6, #ffcc00);}
.erasebox { background: linear-gradient(135deg, #ff5722, #ff8a50);}
.paperio { background: linear-gradient(135deg, #006eff, #0484c0);}
.smwo { background: linear-gradient(135deg, #ff0000, #ff6347); color: #fff; }
.opencpi { background: linear-gradient(135deg, #00c3ff, #ffff1c); }
.win93 { background: linear-gradient(135deg, #ff00ff, #00ffff); }
/* Efectos hover en tarjetas */
.card:hover { transform: scale(1.04); }
.card.cheeseria:hover { box-shadow: 0 15px 35px rgba(255, 200, 0, 0.6); }
.card.minecraft:hover { box-shadow: 0 15px 35px rgba(85, 255, 85, 0.6); }
.card.penguin:hover { box-shadow: 0 15px 35px rgba(6, 61, 145, 0.6); }
.card.geomdash:hover { box-shadow: 0 15px 35px rgba(137, 23, 199, 0.6); }
.card.blockly:hover { box-shadow: 0 15px 35px rgba(33, 7, 147, 0.6); }
.card.win7simu:hover { box-shadow: 0 15px 35px rgba(7, 86, 147, 0.6); }
.card.sandboxels:hover { box-shadow: 0 15px 35px rgba(210, 255, 11, 0.6); }
.card.solitaire:hover { box-shadow: 0 15px 35px rgba(3, 255, 234, 0.6); }
.card.stickman:hover { box-shadow: 0 15px 35px rgba(11, 255, 202, 0.6); }
.card.angrymexvtrump:hover { box-shadow: 0 15px 35px rgba(255, 0, 13, 0.6); }
.card.googlesnake:hover { box-shadow: 0 15px 35px rgba(5, 84, 230, 0.6); }
.card.incredisprunki:hover { box-shadow: 0 15px 35px rgba(255, 77, 166, 0.6); }
.card.erasebox:hover { box-shadow: 0 15px 35px rgba(255, 87, 34, 0.6); }
.card.paperio:hover { box-shadow: 0 15px 35px rgba(0, 110, 255, 0.6); }
.card.smwo:hover { box-shadow: 0 15px 35px rgba(255, 0, 0, 0.6); }
.card.opencpi:hover { box-shadow: 0 15px 35px rgba(6, 143, 29, 0.6); }
.card.win93:hover { box-shadow: 0 15px 35px rgba(255, 0, 255, 0.6); }
/* footer social */
.social-footer {
/* ya no es fijo, se coloca al final del flujo */
position: static;
width: 100%;
background: #000;
display: flex;
justify-content: center;
gap: 30px;
padding: 12px 0;
box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
}
.social-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #fff;
font-weight: bold;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.social-btn img { width: 24px; height: 24px; }
.social-btn:hover { transform: scale(1.08); opacity: 0.9; }
/* Enlaces de texto si se muestran en móvil (opcional) */
.links { color: white; text-decoration: none; }
/* Secret link */
.secret-link {
position: fixed;
bottom: 15px;
right: 15px;
opacity: 0.6;
transition: 0.3s ease;
}
.secret-link img { width: 60px; }
.secret-link:hover { opacity: 1; transform: scale(1.1); }
/* Breakpoints para mejor control en móviles */
@media (max-width: 600px) {
h1 { font-size: 34px; margin-top: 30px; }
.launcher { gap: 20px; padding: 0 12px; }
.card { padding: 18px; }
}