/* === ESTILOS RESPONSIVE === */

/* Tablet: hasta 900px */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contenedor-principal {
    flex-direction: column;
  }

  .banner-horizontal {
    grid-column: span 1;
    /* ocupa las 3 columnas */
    margin: 5px 0;
    text-align: center;
  }

  /*.publicidad {
    /*order: -1;  opcional: hace que la publicidad aparezca arriba */


  .publicidad {
    display: none;
  }
}

/* Celular: hasta 600px */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  .layout {
    flex-direction: column;
  }

  main,
  .anuncios-laterales {
    width: 100%;
  }

  .anuncios-laterales {
    padding-left: 0;
    margin-top: 20px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .filtro {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }

  .logo img {
    max-width: 80px;
    height: auto;
    margin-bottom: 0.5px;
    padding: 1px;
  }

  .titulo {
    font-size: 4rem;
    padding: 1px;
  }

  .banner-columna img {
    height: auto;
    margin-bottom: 10px;
  }

  .card {
    padding: 20px;
    font-size: 0.95rem;
  }

  .banner-horizontal {
    grid-column: span 1;
    /* ocupa las 3 columnas */
    margin: 5px 0;
    text-align: center;
  }

  .banner-horizontal img {
    width: 100%;

  }

  .logo2 img {
    display: none;
  }

  .info-linea {
    height: 60px;
  }

  .publicidad {
    display: none;
  }
}