@font-face {
    font-family: '60s Scoreboard';
    src: url('/img/60s Scoreboard.woff') format('woff'); /* Ruta a tu archivo .woff */
    /* También puedes incluir otras fuentes aquí, como .woff2, para mayor compatibilidad */
}


*{
    box-sizing: border-box; /* cuando se le indica el tamaño de una caja nos estamos refiriendo a todo: contenido, padding y borde*/
    margin: 0;
	padding: 0;
}




html{
    background-color: rgb(30, 46, 46);/*para que si se mueve el body nos enteremos*/
}

body  {
    background: #eeeeea;
    /* font: '60s Scoreboard', sans-serif; */
    text-align: center;
    min-height: 100vh;
    position: relative; /* porque el footer lo hemos puesto 'absolute' y entonces tiene que ser referente al body que es relative*/
    padding-bottom: 4em; /* porque como el pie está fijado abajo del todo, no aparezca el texto del body detrás del pie que no se vería */
   }


  .cabecera0{
    margin:0px;
    height: 2em;
  }

/* INICIO DEL MARCADOR */

.cabecera1{
    /* margin:0px; */
    /* para que la cabecera quede un poco separada de arriba se hace con padding poque si lo hacemos con margin lo que ocurre es que el body baja y se despega del html... y después el footer aunque esté pegado abajo hay que verlo con scroll porque el body es el que se ha bajado por debajo del viewport. COn padding en cabecera no se baja el body y empieza justo desde arriba */
    /* padding: 1em; */
    /* // desde aqui */
    margin-top: 0px;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    /* width: 40%; */
    /* background-size: cover; */
    /* cursor: pointer; */
    overflow:hidden;
    /* border-radius: 1.6rem; */
    /* margin: 0 10px; */
    /* align-items: flex-end; */
    /* box-shadow: inset 2px 5px 5px 2px rgba(146, 146, 146, 0.8); */
    width: fit-content;
    min-width: 50%;
    background-color: black;
    padding-left: 3%;
    padding-right: 0%;
    display: grid;
    grid-template-columns: 9fr 1fr;
    /* grid-template-rows: repeat(2); Crea 3 filas de altura fija de 100px */
    gap: 10px 0px; /* Espacio entre las celdas */
    /* justify-content: flex-start; */
    /* flex-wrap: nowrap;     */
}



    .marcador{
        font-family: '60s Scoreboard', sans-serif;
        font-size: 1.5em;
        color: #eeeeea;
        /* justify-content: flex-start; */
        width: fit-content;
        padding: 10px;
    }
    
    
     .resultado1, .resultado2{
        flex-grow: 1fr;
        /* justify-content: center; */
        margin: auto;
    }

    .equipo1, .equipo2{
        margin-bottom: 5px;
    }
    


    @media only screen and (max-width: 600px) {
        .cabecera1 {
          width: 70%;
          gap: 5px 0px;
          }
        .marcador{
            font-size: 1em;
            padding: 5px;
        }
      }

      @media only screen and (max-width: 380px) {
        .cabecera1 {
          width: 70%;
          gap: 0px;
          }
        .marcador{
            font-size: 0.6em;
            padding: 2px;
        }
      }


    /* FIN  DEL MARCADOR */


    /* GALERIA */

 .grid-container{
    width: 90%;
    margin: 2em auto;
    margin-top: 0px;
    padding: 1em;
    display:grid;
    grid-template-columns: repeat(auto-fill , 200px);
    gap:15px;
    justify-content: center;
    }


.grid-item{
    width: 200px;
    height: 200px; 
    object-fit:scale-down;
    display:block;
    outline: 1px solid #444; 
    background-color: #cfcbcb;
    cursor: pointer;
    transition: all .5s ease;
    box-shadow:  7px 3px 5px 2px #474747;
    /* outline-offset: -2px; borde interior */
   }

.grid-item:hover{
    transform: scale(.95); /* al hacer hover se enconge al 93% */
}

.grid-item:active{
    transform: scale(1.2);/* al pinchar en ella se agranda un poco*/
}


 /* FIN GALERIA */


/*  PARTE DEL LIGHTBOX   PARTE DEL LIGHTBOX   PARTE DEL LIGHTBOX  */

.lightbox{
width: 100%;
height: 100%;
max-height: 100%;
background-color: rgb(2,2,2,.4);
backdrop-filter: blur(.6rem);

position: fixed;
top:20px;
left:5%;

/* alineamos los elementos del lightbox */
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: .4rem;

opacity: 0;/* para q por defecto no se vea*/
pointer-events: none; /* porque la etiqueta sigue existiendo auque no se vea, y con esto desactivamos cualquier evento de ratón sobre esa etiqueta*/

transition: all 2s ease;
}


.lightbox.isActive{
    opacity: 1; /* cuando se le añada esa clase por js aparecerá el lightbox*/
    pointer-events: auto;
    width: 93%;
    }



.lightbox .cabecera{
    display:flex;
    flex-direction: row;
    width:90%;
    padding-top: 10px;
    justify-content:space-between;
}


.lightbox .close {
    width: 3rem;
    background-color:transparent;
    color: #fff; /* color del boton */
    cursor: pointer;
    transition: all .5s ease;
}

.lightbox .close:hover{
    transform: scale(.95);
}

.lightbox .close:active{
    transform: scale(1.2);
}

 /* lo nuevo añadiendo cabeceras al .lightbox */


.orden{
    margin:auto; /* para que empuje a la izda y dcha el resto de iconos del menu*/
}


.lightbox .cabecera {
 
    color: #fff; /* color del boton */
    cursor: pointer;
    position: absolute;
    top:1%;
}


.lightbox .cabecera  .wasap:hover{
    transform: scale(.95);
}

.lightbox .cabecera  .wasap:active{
    transform: scale(1.2);
}

.lightbox .cabecera  .insta:hover{
    transform: scale(.95);
}

.lightbox .cabecera  .insta:active{
    transform: scale(1.2);
}



.lightbox .cabecera  .descargar:hover{
    transform: scale(.95);
}

.lightbox .cabecera  .descargar:active{
    transform: scale(1.2);
}


.lightbox .cont_inferior
{
    max-width:70%;
    display: flex;
    justify-content:center;
    background-color:transparent;
    gap:0;
}



.lightbox .grande{
    width:fit-content ;
    /* max-width: 80%;*/
    height:fit-content; 
    max-height: 70%; 
    object-fit:scale-down; 
    display:block;
    box-shadow: 0 0 4rem 0 rgba(0,0,0,.7);
    border-radius: 1.5%;
    position: absolute;
    /* top:10%;  al final el top lo calculo por javascript  */
}






.lightbox .cont_inferior .siguiente{
    color: #fff;
    /* background-color: transparent; */
    z-index: 2;
    position: absolute;
    right: 5%;
    top: 50%; /* Ajusta la distancia desde arriba*/
 }




.lightbox .cont_inferior .siguiente:hover{
    transform: scale(.95);
}

.lightbox .cont_inferior .siguiente:active{
    transform: scale(1.2);
}


.lightbox .cont_inferior .anterior{
    color: #fff;
    /* background-color: transparent; */
    z-index: 2;
    position: absolute;
    left: 5%;
    top: 50%;
}


.lightbox .cont_inferior .anterior:hover{
    transform: scale(.95);
}

.lightbox .cont_inferior .anterior:active{
    transform: scale(1.2);
}


.lightbox .pie_lightbox{
    display:contents;
    color: #fff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic; 
    font-weight: bold;
    font-size: 2rem;
}

/* PIE DE PÁGINA */

.footer{
    display: flex; /* para poder central verticalmente su contenido */
    position: absolute; /* para poder pegarlo abajo del todo junto con la sgute linea y junto con el posicionamiento relative que hay q poner en el body*/
    bottom: 0;
    width: 100%;
    height: 2em;
    background-color: rgb(19, 18, 18);
    align-items: center; /*centra verticalmente el contenido del footer */
    justify-content: center;/* centra horizontalmente el contenido del footer*/
    color: #f8f3f3;
    font-size: 1.3em;
/* desde aqui  para centrarlo cuando no ocupa el 100%*/
    width: 80%;
    left: 50%;
    transform: translate(-50%);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic; 
    font-weight: bold;
    font-size: 1.2rem;
}


/* MEDIA QUERIES */



@media (max-width: 400px) {
    .grid-container{
        grid-template-columns: repeat(auto-fill , 150px);
        gap: 15px;
        padding: 5px;
    }
.grid-item{
    width:  150px;
    height: 150px; 
}
}


/* ESTILOS PARA EL LIGHTBOX DE PHOTOSWIPE */

.pswp .pswp__ui .pswp__top-bar .pswp__counter {
    font-size: 25px;
}


.pswp__button--share:before {
    content: "↓"   ;
    font-family: Arial, sans-serif   ;
    font-size: 30px   ;
    font-weight: bold   ;
    background: none   ;
    color: white   ;
}

.pswp__bg {
    background: #f5f5f5  ; /* Gris claro */
    opacity: 1  ;
}


.pswp__button--share {
    background-image: none  !important ;
}



/* Añadir estos estilos para mejorar la visualización */
.pswp__img {
    object-fit: contain !important;
}

.pswp__zoom-wrap {
    text-align: center;
}

.pswp__container {
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}