/*
padding-top...: Espacio de relleno superior
padding-right.: Espacio de relleno derecho
padding-bottom: Espacio de relleno inferior
padding-left..: Espacio de relleno izquierdo.
*/

h1 {
    padding:20px 0px 10px;
    color: blue;
    text-align: center;
}

H2,h3 {
    padding:40px 0px 10px;
    color: blue;
    text-align: center;
}

.botonera1 {
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px 10px;
}

.botonera2{
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.botonera3{
    padding-top: 10px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px; 10px;
}

.botonera1 button{
    padding: 10px;
}   

.botonera2 button{
    padding: 10px;
}   

.botonera3 button{
    padding: 10px;
}   

.btn{
  display: inline-block;
  text-align: center;
  padding: 12px 16px;
  background: #e2e2db;  /*  #ffffff;  */
  color: #1e293b;
  text-decoration: none;
  border: 1px solid #d6deeb;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: 0.2s;
}

.btn:hover{
  background: #2563eb;
  color: white;
  border-color: #2563eb;
  transform: translateY(-2px);  
}

.btn:active{
  transform: translateY(0);
}

.btn:focus-visible{
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}


 /*********************************/


@media (max-width: 900px){
  .botonera1{
    grid-template-columns: repeat(5, 1fr);
  }

  .botonera2{
    grid-template-columns: repeat(5, 1fr);
  }   

  .botonera3{
    grid-template-columns: repeat(5, 1fr);
  }     
}


@media (max-width: 500px){
  .botonera1{
    grid-template-columns: repeat(2, 1fr);
  }
    
  .botonera2{
    grid-template-columns: repeat(2, 1fr);
  }    
  .botonera3{
    grid-template-columns: repeat(2, 1fr);
  }    
    
}

@media (prefers-reduced-motion: reduce){
  .btn{
    transition: none;
  }
}