@import url("https://fonts.googleapis.com/css2?family=Alien+Block&family=Black+Ops+One&family=Orbitron:wght@400..900&family=Smooch+Sans:wght@100..900&family=VT323&display=swap");
/* ---------------------------------------- Reseteamos y limpiamos todos los margenes internos y externos ---------------------------------------- */

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ---------------------------------------- Dise���o para celulares ---------------------------------------- */

@media (max-width: 500px) {
  .contenedorPrincipal {
    position: absolute;
    width: 100%;
    height: 100%;

    /*background: linear-gradient(-45deg, #EBEBEB 0%, #EFEFEF 100% );*/
    
    background-image: url("../imagenes/Personas.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    


    overflow: hidden;

    z-index: 1;
  }

  .imagen {
    position: absolute;
    width: 340px;
    height: 340px;
    left: 50%;
    bottom: 400px;
    transform: translate(-50%) rotate(0deg);

    background-image: url("../imagenes/Jugador.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
  }

  .texto1 {
    position: absolute;
    width: 110px;
    left: 50%;
    top:10px;
    transform: translate(-50%) rotate(0deg);
    
    font-family: "Black Ops One", sans-serif;

    padding: 5px;

    color: white;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 4px;

    background-color: rgba(76, 149, 108, 1);
  }

  .texto2 {
    position: absolute;
    width: 230px;
    left: 50%;
    top: 50px;
    transform: translate(-50%) rotate(2deg);

    padding: 5px;

    color: black;
    font-size: 35px;
    text-align: center;
    letter-spacing: 6px;
    font-family: "Black Ops One", sans-serif;

    background-color: rgba(255, 255, 255, 1);
  }

  .texto3 {
    position: absolute;
    left: 50%;
    top: 90px;
    transform: translate(-50%) rotate(-2deg);

    padding-top: 15px;
    padding-bottom: 15px;
    padding-left:10px;
    padding-right:10px;

    color: white;
    font-size: 25px;
    text-align: center;
    letter-spacing: 20px;
    font-family: "Black Ops One", sans-serif;

    background-color: rgba(202, 23, 25, 1);
  }
  
  .formulario{
      position:absolute;
      width:80%;
      height:90dvh;
      background-color:red;
      bottom:50px;
      left:50%;
      transform: translate(-50%) rotate(0deg);
      
      background: rgba(255, 255, 255, 0.15); /* blanco transparente */
        backdrop-filter: blur(10px); /* desenfoque */
        -webkit-backdrop-filter: blur(10px); /* soporte Safari */
        
        border: 1px solid rgba(255, 255, 255, 0.3); /* borde suave */
        border-radius: 15px;
        
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* sombra ligera */
  }

  #buscador {
    position: absolute;
    width: 90%;
    height: 40px;
    left: 50%;
    top: 200px;
    
    transform: translate(-50%) rotate(0deg);

    border: none; /* quitar borde */
    outline: none;

    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* sombra suave */

    font-size: 14px;
    transition: all 0.25s ease;

    background-color: #fff;
    color:#3A3A3A;
    z-index:10;
  }

  #buscador:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }

  .entrar {
    position: absolute;
    width: 30%;
    right: 20px;
    bottom: 20px;

    padding: 8px 20px;
    border: none;
    border-radius: 14px;

    background-color: #ba181b;

    color: white;

    font-size: 14px;
    font-weight: 600;
    cursor: pointer;

    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.05);
    transition: all 0.25s ease;
  }

  .entrar:hover {
    background-color: #ef233c;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.2);
  }
  
  #sugerencias{
      position:absolute;
      position: absolute;
        width: 100%;
        left: calc(50%);
        top: 0px;
        transform: translate(calc(-50%), 0px) rotate(0deg);
        text-align:center;
        margin:5px;
  }
  
  .lista{
      position:absolute;
      width:90%;
      height:60%;
      left: 50%;
      top: 250px;
      transform: translate(-50%) rotate(0deg);
      overflow-x:hidden;
      overflow-y:auto;
      
      scrollbar-width: thin;
      scrollbar-color: gray transparent;
      
  }
  
  li{
      list-style: none;
      width:calc(100% - 7px);
      padding-top: 5px;
      padding-bottom: 5px;
      
      border-bottom: 1px solid rgba(58, 58, 58, .5);
      
      background-color: rgba(255, 255, 255, 0.2);
      
      color:rgba(255, 255, 255, 1);
        
      margin-bottom:3px;
      
  }
  
}

/* ---------------------------------------- Dise���o para PC ---------------------------------------- */

@media (min-width: 501px) {
}