:root{
    --bg:#000000;
    --card:#0b0e1a;
    --accent:#0044cc;
    --accent-light:#3366ff;
    --text:#ffffff;
    --text-light:#cccccc;
    --max-width:1100px; /* ancho de lectura óptimo */
}

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

/* Layout general: evitar centrado vertical absoluto en móvil (problemas con teclado) */
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start; /* antes: center, ahora start para mejor UX móvil */
    padding:2rem 1rem; /* reducido para escala más compacta */
    gap:2rem;
}

/* Contenedor con ancho máximo para controlar escala en pantallas grandes */
.container{
    width:100%;
    max-width:var(--max-width);
    margin-inline:auto;
    text-align:center;
    padding: 0 1rem;
}

/* Logo: escalado progresivo */
.logo{
    width:260px;
    max-width:60%;
    height:auto;
    margin: 0 auto 2rem;
    animation: float 8s ease-in-out infinite;
    display:block;
}

h1{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:3rem; /* reducido para no dominar la página */
    color: #fff;
    text-shadow: 0 0 18px rgba(51,102,255,0.35);
    margin-bottom:1rem;
    letter-spacing:6px;
    opacity:0.95;
}

h2{
    font-family:'Cinzel',serif;
    font-size:1.4rem;
    color:#fff;
    margin-bottom:1rem;
    font-weight:500;
    letter-spacing:1.6px;
}

/* Cards: no usar 100vw que rompe en dispositivos con barras; usar full-bleed visual manteniendo contenedor */
.card{
    width:100%;
    background:var(--card);
    padding:2rem;
    border-radius:14px;
    margin:0 auto;
    margin-bottom:1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    border:none;
    transition:all 0.35s ease;
    text-align:center;
}
.card:hover{
    box-shadow: 0 22px 40px rgba(51,102,255,0.12);
    transform: translateY(-4px);
}

.btn{
    text-decoration:none;
    background:transparent;
    color:#fff;
    border:2px solid var(--accent-light);
    padding:0.9rem 2rem;
    border-radius:999px;
    font-weight:600;
    font-size:1rem;
    font-family:'Inter',sans-serif;
    letter-spacing:1px;
    transition:all 0.3s ease;
    box-shadow:0 0 18px rgba(51,102,255,0.18);
    display:inline-block;
}
.btn:hover{
    background:rgba(51,102,255,0.12);
    border-color:var(--accent-light);
    box-shadow:0 0 26px rgba(51,102,255,0.36);
    transform:translateY(-3px);
}

.socials{
    display:flex;
    justify-content:center;
    gap:2.25rem; /* reducido */
    margin-top:1rem;
    flex-wrap:wrap;
}
.socials a{
    width:52px;
    height:52px;
    filter:brightness(0.8) contrast(1.2);
    opacity:0.9;
    transition:all 0.3s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.socials a:hover{
    filter:brightness(1.2) contrast(1.5);
    opacity:1;
    transform:translateY(-8px) scale(1.12);
}
.socials img{width:100%;height:100%;object-fit:contain;display:block;}

/* Espacios para anuncios: banners adaptativos, placeholders listos para scripts.
    Puedes reemplazar el <div class="ad-slot"> con el script de la red publicitaria. */
.ad-slot{
    width:100%;
    max-width:100%;
    min-height:60px; /* banner pequeño por defecto */
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    color:var(--text-light);
    border-radius:10px;
    margin: 1rem auto;
    font-size:0.95rem;
    border: 1px dashed rgba(255,255,255,0.04);
}

/* Ad variants */
.ad-slot--leaderboard{ min-height:90px; } /* desktop */
.ad-slot--medium{ min-height:250px; } /* cuadro para lateral si usas layout con columnas */

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); } /* mov más sutil para no distraer */
}

canvas{ opacity:0.22; pointer-events:none; }

/* Responsive: múltiples puntos */
@media (max-width: 960px){
    :root{ --max-width:820px; }
    .logo{ width:220px; max-width:55%; }
    h1{ font-size:2.4rem; }
    .card{ padding:1.6rem; border-radius:12px; }
    .btn{ padding:0.75rem 1.6rem; font-size:0.98rem; }
    .socials{ gap:1.6rem; }
    .socials a{ width:48px; height:48px; }
}

@media (max-width: 600px){
    :root{ --max-width:420px; }
    body{ padding:1.2rem 0.8rem; gap:1rem; }
    .logo{ width:180px; max-width:70%; margin-bottom:1.25rem; }
    h1{ font-size:1.9rem; letter-spacing:3px; }
    h2{ font-size:1.05rem; }
    .card{ padding:1.25rem; border-radius:10px; margin-bottom:0.9rem; }
    .btn{ padding:0.6rem 1.1rem; font-size:0.95rem; }
    .socials{ gap:1rem; }
    .socials a{ width:44px; height:44px; }
    .ad-slot{ min-height:50px; font-size:0.9rem; }
}

/* Mejor soporte para pantallas muy grandes */
@media (min-width: 1440px){
    :root{ --max-width:1300px; }
    .logo{ width:320px; }
    .card{ padding:3rem; }
    h1{ font-size:3.6rem; }
}
.socials a img {
    filter: brightness(0) invert(1); /* convierte cualquier color en blanco puro */
}