/* Nuevo tipo de letra */
@font-face {
    font-family: 'SoccerLeague';
    src: url('Fonts/soccerleague1-webfont.woff') format('woff'); /*deja Fonts asi para que no se dañe */
}
/* Estilo general */
body {
font-family: 'SoccerLeague', sans-serif;
margin: 0;
padding: 0;
background-image: url('img/fondo.webp');
}

/* Ocultar en dispositivos predeterminados */
.mobile {
display: none;
}
.desktop {
display: none;
}
/* Mostrar solo en pantallas pequeñas (teléfonos) */
@media (max-width: 768px) {
.mobile {
display: block;
text-align: center;
}
}
/* Mostrar solo en pantallas grandes (computadoras) */
@media (min-width: 769px) {
.desktop {
display: block;
text-align: center;
}
}
/*encabzado*/
    #a {
    display: flex;
    flex-direction: row; /* Hace que los elementos sean horizontales */
    background-color: aqua;
    align-items: stretch; /* Asegura que los hijos se estiren verticalmente */
    width: 100%; /* Ocupa todo el ancho */
    height: 80px; /* Ocupa todo el alto de la pantalla */
    }
    #b1, #b2 {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    }
    #b1 {
    flex: 1; /* Ocupa más espacio que #b2 */
    background-color: rgb(40, 87, 164);
    background-image: url('img/logos.webp'); /* Ruta de la imagen */
    background-size: contain; /* Ajusta el tamaño de la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen dentro del elemento */
    width: 2000px; /* Define el ancho del elemento */
    height: 80px; /* Define la altura del elemento */
    }
    #b2 {
    flex: 1; /* Ocupa menos espacio que #b1 */
    background-color: rgb(0, 255, 13);
    flex-direction: column; /* Acomoda los elementos verticalmente */
    }
    #d1 {
    background-color: #2857A4;
    width: 100%; /* Mantiene el ancho completo */
    flex: 5283; /* Ocupa menos espacio verticalmente */
    }
    #d2 {
    background-color: #FFCC29;
    width: 100%; /* Mantiene el ancho completo */
    flex: 2717; /* Ocupa menos espacio verticalmente */
    flex-direction: row; /* Hace que los elementos sean horizontales */
    height: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    }
    #d3 {
    background-color: #2857A4;
    width: 100%; /* Mantiene el ancho completo */
    flex: 1000; /* Ocupa menos espacio verticalmente */
    }
    #d4 {
    background-color: rgb(255, 255, 255);
    width: 100%; /* Mantiene el ancho completo */
    flex: 1000; /* Ocupa menos espacio verticalmente */
    }
    @font-face {
        font-family: 'bgothl';
        src: url('Fonts/bgothl.woff') format('woff'); /*deja Fonts asi para que no se dañe */
    }
    #style3 {
        font-family: 'bgothl';
        font-size: 10px;
        color: #2850A0;
        padding-left: 10px;
    }
    nav {
    margin-left: auto;
    padding: 0;

    }
    .menu{
        margin: 0;
        padding-left: 0px;
        align-items:normal;
    }
        
    .menu > li {
        position: relative;
        list-style: none;
        display: inline;
    }

    .menu a {
        text-decoration: none;
        font-family: 'bgothl';
        color: white;
        display: inline-block;
        border-radius: 2px;
        transition: background-color 0.3s ease;
        margin-left: 0px;
        margin-right: 5px;
        
    }

    .menu a:hover {
        background-color: #e0a800; /* Tonalidad más oscura al pasar el cursor */
    }

    /* Estilo del submenú */
    .submenu ul {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffc107; /* Color amarillo del desplegable */
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
    }

    .submenu ul li {
        margin: 0;
    }

    .submenu ul a {
        display: block;
        padding: 5px;
        color: #0056a1; /* Texto azul */
    }

    .submenu ul a:hover {
        background-color: #e0a800;
    }

    /* Mostrar el submenú al pasar el ratón */
    .submenu:hover ul {
        display: block;
    }
/* imagenes */
    #dynamicImage {
        height: 280px; /* Altura fija */
        width: auto;   /* Ajusta el ancho proporcionalmente */
        object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
    }
    #dynamicImage1 {
        height: 600px; /* Altura fija */
        width: auto;   /* Ajusta el ancho proporcionalmente */
        
    }
    .contenedor {
        display: flex; /* Activa Flexbox */
        flex-direction: column; /* Organiza en columna */
        align-items: center; /* Opcional: centra los hijos horizontalmente */
    }
    .contenedor_doble {
        display: flex; /* Activa Flexbox */
        flex-direction:row; /* Organiza en columna */
        align-items: center; /* Opcional: centra los hijos horizontalmente */
    }
/* catalogo---------------------------------- */
    #lado{
        display: block;
    }
    #lado1{
        display: none;
    }
    #lado2{
        display: none;
    }
    #lado3{
        display: none;
    }
    #lado4{
        display: none;
    }
    #lado5{
        display: none;
    }
    #lado6{
        display: none;
    }
    #lado7{
        display: none;
    }
    .oculto{
        display: none;
    }
    .visible{
        display: block;
    }