.general {
  background-image: url(./img/fondo_tabla.jpg);
}

.tabla {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en ordenador */
    gap: 20px;
    padding: 20px 0px;
    max-width: 1400px;        /* ancho máximo */
    margin: 0 auto;           /* centra horizontalmente */
    width: 90%;               /* deja margen lateral adaptable */
    box-sizing: border-box;   /* evita que el padding rompa el ancho */
    
}

/* Create two equal columns that floats next to each other */
.column, .column2 {
    float: left;
    width: 100%;
    height: 200px;
    padding: 10px;
    margin: 5px;
    text-align:center;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
  }
  
  .column {
      background-color: #fcd65c;
      color: #6c2370;
  }
  
  .column2 {
      background-color: #f8e792;
      color: #6c2370;
  }

  .column h2,
.column2 h2 {
  font-size: 1rem;          /* antes era más grande */
  font-weight: 400;         /* texto normal */
  color: #6c2370;              /* color más suave */
  margin: 0; 
}

  .column p,
.column2 p {
  font-size: 1.4rem;        /* más grande, como título */
  font-weight: 1000;         /* más grueso */
  color: #6c2370;              /* color más fuerte */
}

/* 🟡 Tablet: 2 columnas */
@media (max-width: 1024px) {
    .tabla {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* 🔵 Móvil: 1 columna */
  @media (max-width: 600px) {
    .tabla {
      grid-template-columns: 1fr;
    }
}