/* =====================================================
   INDEX.CSS — Estilos Exclusivos de la Landing Page
   Star Citizen España (SCESP)
   ===================================================== */

/* Layout específico de la landing page */
body.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.contenedor {
    padding: 20px;
    min-height: 260px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 6px;
    box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-out;
}

.contenedor:hover {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#logo {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    margin-top: -25%;
    transition: all .3s ease-out;
}

#titulo {
    color: var(--color-white);
    font-size: 32px;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.8);
    transition: all .3s ease-out;
}

#contador {
    font-size: 18px;
    margin-top: 10%;
    color: var(--color-white);
    text-align: center;
    transition: all .3s ease-out;
    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.8);
}

#mensaje {
    font-size: 18px;
    display: none;
    margin-top: 10%;
    color: #FF0000;
    text-align: center;
    transition: all .3s ease-out;
    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.8);
}

#social {
    margin-top: 10px;
    font-size: 16px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 1);
    text-align: center;
    color: var(--color-accent);
}

.transicionV {
    opacity: 1;
    height: auto;
    transition: opacity .5s ease, height .5s ease;
}

.transicionN {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Conjunto botones bajo la ventana del logo */
.botones {
    max-width: 320px;
    margin: auto;
}

.botones ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    text-align: center;
    flex-wrap: wrap;
}

.botones li {
    text-align: center;
    text-decoration: none;
    padding: 2.5px 5px 10px 5px;
    width: 46.3%;
}

li a {
    display: block;
    font-size: 14px;
    color: var(--color-white);
    cursor: pointer;
    padding: 10px;
    transition: all .3s ease-out;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

li a:hover {
    color: var(--color-white);
    text-shadow: 0px 3px 4px #000000;
    box-shadow: 0 4px 5px -4px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 14.5px;
}

/* Colores específicos de botones sociales */
.starcitizen { background: url(https://cdn.robertsspaceindustries.com/static/images/content-page/horizontal-lined-bg.png) repeat; border: 1px solid #1b4268; color: #0788b9; }
.discord { background: rgba(30, 32, 37, 0.6); border: 1px solid rgba(163, 163, 172, 0.8); color: rgb(163, 163, 172); }
.telegram { background: rgba(73, 149, 190, 0.4); border: 1px solid rgba(108, 193, 227, 0.8); color: rgb(230, 233, 239); }
.twitch { background: rgba(36, 39, 44, 0.6); border: 1px solid rgba(71, 79, 84, 0.8); color: rgb(145, 71, 254); }
.presentacion { background: rgba(67, 237, 248, 0.15); border: 1px solid rgba(67, 237, 248, 0.4); color: var(--color-accent); }
.global-ini { background: rgba(50, 50, 50, 0.6); border: 1px solid rgba(150, 150, 150, 0.5); color: #cccccc; }

/* Efectos Hover */
.starcitizen:hover { border: 1px solid var(--color-accent); color: var(--color-accent); text-shadow: 0 1px 2px var(--color-accent); }
.discord:hover { background: rgba(41, 43, 50, 0.6); border: 1px solid rgba(88, 101, 242, 0.8); color: rgb(255, 255, 255); text-shadow: 0 1px 2px rgba(88, 101, 242, 1); }
.telegram:hover { background: rgba(0, 136, 204, 0.6); border: 1px solid rgba(108, 193, 227, 0.8); color: rgb(230, 233, 239); text-shadow: 0 1px 2px rgba(255, 255, 255, 1); }
.twitch:hover { background: rgba(71, 79, 84, 0.4); border: 1px solid rgba(145, 71, 254, 0.8); color: rgb(255, 255, 255); text-shadow: 0 1px 2px rgba(0, 231, 1, 1); }
.presentacion:hover { background: rgba(67, 237, 248, 0.25); border: 1px solid rgba(67, 237, 248, 0.7); color: var(--color-white); text-shadow: 0 1px 2px rgba(67, 237, 248, 1); }

/* Estado del botón Global.ini */
.global-ini.activo { background: rgba(40, 167, 69, 0.25); border: 1px solid rgba(40, 167, 69, 0.6); color: var(--status-operational); }
.global-ini.activo:hover { background: rgba(40, 167, 69, 0.4); border: 1px solid rgba(40, 167, 69, 0.9); color: var(--color-white); text-shadow: 0 1px 2px rgba(40, 167, 69, 1); }
.global-ini.inactivo { background: rgba(220, 53, 69, 0.25); border: 1px solid rgba(220, 53, 69, 0.6); color: var(--status-major); }
.global-ini.inactivo:hover { background: rgba(220, 53, 69, 0.4); border: 1px solid rgba(220, 53, 69, 0.9); color: var(--color-white); text-shadow: 0 1px 2px rgba(220, 53, 69, 1); }

/* Responsividad específica para index */
@media (max-width: 480px) {
    #titulo { font-size: 24px; }
    .botones li { width: 100%; }
    .content-glass { margin: 10px; }
}