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

body{
  background-color: rgb(255, 255, 255);
  min-height: 100vh;
  margin: 0 auto;
  font-family: Helvetica;
  display: grid;
  grid-template: 
    "header" 
    "hero" 500px
    "title"
    "secciones"
    "footer"  
  ;
}


  header{
    grid-area: header;
  }
  .hero{
    grid-area: hero;
    background-image: url('../images/hero_series.webp');
    background-size: cover;      /* Ajusta la imagen para cubrir todo el fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center;  
  }

  .title{
    grid-area: title;
    display: flex;
    border-radius: 25px;
    background-color: #0072CE;
    width: 180px;
    height: 60px;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    margin: 80px;
   font-weight: bold;
  }

  .secciones{
    grid-area: secciones;
    max-width: 1500px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-basis: 600px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
  }

  footer{
    grid-area: footer;
  }

  .seccion h1{
    margin-bottom: 1rem;
  }


 .seccion{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1rem;
  }

  .seccion img{
    width: 80%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 1rem;
  }

  .seccion a{
    text-decoration: none;
    border-radius: 15px;
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 2rem;
  }

  .sec1 a{
    background-color: #FED02F;
    color: #15264C;
  }
    .sec2 a{
    background-color: #15264C;
    color: #FED02F;
  }

  @media (max-width: 600px) {
    body{
      min-height: 100vh;
      display: grid;
      grid-template: 
        "header" 
        "hero" 120px
        "title"
        "secciones"
        "footer"  
    }

     header{
        grid-area: header;

      }

      .hero{
        grid-area: hero;

      }

      .title{
        grid-area: title;
        margin: 60px auto;
        font-size: 30px;
         width: 120px;
        height: 60px;

      }

      .secciones{
        grid-area: secciones;
        width: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: 1;
        margin: 0 auto;
        margin-bottom: 30px;
        gap: 50px;
      }

      footer{
        grid-area: footer;
      }
    .seccion a{
    font-size: 16px;
  }

  .seccion h1{
    font-size: 25px;
  }
  }