html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

/* =========================================================================
   1. DECLARACIÓN DE LA FUENTE LOCAL
   ========================================================================= */
@font-face {
    font-family: 'HelveticaRoundedLTStd-Bd';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-Bd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

@font-face {
    font-family: 'HelveticaRoundedLTStd-BdCn';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-BdCn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

@font-face {
    font-family: 'HelveticaRoundedLTStd-Black';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

html, body, input, select, textarea, button, .btn {
    font-family: 'HelveticaRoundedLTStd-BdCn', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footermk {
    font-family: 'HelveticaRoundedLTStd-Bd', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    font-size: 7px;
    color: #D8D5D8;
    text-align: justify;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    /*margin-bottom: 5px;*/
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the body covers the full screen height */

    padding: 0;
    box-sizing: border-box;
    /* Ruta relativa desde la carpeta css hacia la carpeta images */
    background-image: url('/images/background.jpg');
    /* Evita que la imagen se repita como mosaico */
    background-repeat: no-repeat;
    /* Centra la imagen vertical y horizontalmente */
    background-position: center center;
    /* Hace que la imagen se fije al fondo mientras el usuario hace scroll */
    background-attachment: fixed;
    /* Fuerza a la imagen a estirarse y cubrir el 100% de la pantalla sin deformarse */
    background-size: cover;
    /* Color de respaldo por si la imagen tarda en cargar o no se encuentra */
    background-color: #f8f9fa;
    color: black;
    justify-items: center;
    align-content: center;
}

@media (max-width: 768px) {
    body {
        background-image: url('/images/backgroundm.jpg');
    }
    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-height: 120px;
    }
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px; /* Optional: set a width to see it centered */
}
.slogan {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 350px; /* Optional: set a width to see it centered */
}

.logoColjuegos {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 50%; /* Optional: set a width to see it centered */
}

.backform {
    border-radius: 12px !important;
    background-origin: border-box;
    background-clip: content-box, border-box;
    /* Código RGBA: 255, 255, 255 es Blanco. 0.90 es el 90% de opacidad */
    background-color: rgba(250, 250, 250, 0.90) !important;
    -webkit-backdrop-filter: blur(8px);
    /* Optional Border to separate white box from gradient */
    border: 3px solid #D8D5D8;
    max-width:700px;
}


.rounded {
    justify-items:center;
    align-content:center;

}

.link {
    color: #484849;
    text-decoration: underline;
    cursor: pointer;
}

.link:hover {
    color: #0000FF;
}

footer {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

/* --- ESTILO GLOBAL PARA ABSOLUTAMENTE TODOS LOS BOTONES DEL SITIO --- */
.btn {
    /* text-transform: uppercase; */ /* Forzar texto en mayúsculas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    padding: 0.6rem 1.5rem; /* Hacerlos un poco más altos y cómodos */
}

.btn.btn-primary {
    background-color: #E11F1D; /* Tu color personalizado */
    border-color: #E74C4A;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px; /* Bordes más redondeados */
    transition: all 0.3s ease; /* Animación suave para efectos */
}

/* Efecto cuando el usuario pasa el mouse por encima (Hover) */
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #E74C4A;
    border-color: #E11F1D;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3); /* Sombra moderna */
}

.form-check-input:checked {
    background-color: #0000FF;
    border-color: #484849;
}

/* Aplica la nueva altura a todos los inputs y selectores del sitio */
.form-control,
.form-select,
.input-group-text {
    /* Método A: Usar un padding vertical más generoso (Mantiene la proporción nativa) */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 1rem !important; /* Ajusta el tamaño de la letra si es necesario */
}

/* Aplica el efecto a todos los inputs de texto y cajas de selección del sitio */
    .form-control:focus,
    .form-select:focus {
        /* 1. Cambia el color del borde (ejemplo: un tono morado/indigo) #3366FF */
        border-color: #3366FF !important;
        /* 4. Crea el resplandor difuminado alrededor del input (RGBA: 111, 66, 193 es el morado con 25% de opacidad) */
        box-shadow: 0 0 0 0.08rem rgba(51, 102, 255, 0.90) !important;
        /* Animación suave al entrar y salir del campo */
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

/* Cuando el input tiene focus, pinta el borde del icono del mismo color */
.input-group:focus-within .input-group-text {
    border-color: #3366FF !important;
    background-color: #f1f0f6 !important; /* Un tono muy suave del color */
    color: #3366FF !important; /* Pinta el icono del mismo color */
    transition: all 0.15s ease-in-out;
}