/* ======================================
   responsive.css
   ATV In Progress
   ====================================== */

/* Pantallas grandes */
@media (max-width: 1400px){
  .hero-content,
  .cards,
  .container{
    width:min(94%,1200px);
  }
}

/* Tablets horizontales */
@media (max-width: 1024px){

  :root{
    --navbar-height:80px;
  }

  .navbar{
    padding:0 30px;
  }

  .navbar ul{
    gap:1rem;
  }

  .hero-content{
    grid-template-columns:1fr;
    text-align:center;
    padding-top:120px;
  }

  .hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
  }

  .hero-image{
    max-width:700px;
    margin:auto;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Tablets verticales */
@media (max-width: 768px){

  h1{
    font-size:2.7rem;
  }

  h2{
    font-size:2rem;
  }

  p{
    font-size:1rem;
  }

  .navbar{
    flex-wrap:wrap;
    height:auto;
    padding:15px 20px;
  }

  .navbar ul{
    width:100%;
    justify-content:center;
    margin-top:15px;
    flex-wrap:wrap;
  }

  .btn{
    padding:12px 24px;
    font-size:.95rem;
  }

  .hero{
    min-height:auto;
    padding-bottom:60px;
  }

  .hero-content{
    gap:40px;
  }

  .hero-text{
    order:2;
  }

  .hero-image{
    order:1;
  }

  .stats{
    gap:15px;
  }

  .stats div{
    padding:18px;
  }

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

  .card{
    padding:28px;
  }

  form{
    width:92%;
  }
}

/* Smartphones */
@media (max-width: 480px){

  :root{
    --navbar-height:70px;
  }

  body{
    font-size:15px;
  }

  section{
    padding:70px 0;
  }

  .logo{
    font-size:1.3rem;
    width:100%;
    text-align:center;
  }

  .navbar{
    justify-content:center;
  }

  .navbar .btn{
    display:none;
  }

  .hero-content{
    padding-top:110px;
  }

  .hero-text h1{
    font-size:2.2rem;
  }

  .hero-text p{
    font-size:1rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .hero-buttons .btn{
    width:100%;
    max-width:300px;
  }

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

  .stats strong{
    font-size:1.7rem;
  }

  input,
  textarea,
  select,
  button{
    font-size:16px;
  }

  footer{
    font-size:.9rem;
  }
}

/* Pantallas muy pequeñas */
@media (max-width:360px){

  h1{
    font-size:1.9rem;
  }

  h2{
    font-size:1.7rem;
  }

  .card{
    padding:22px;
  }

  .hero-buttons .btn{
    max-width:100%;
  }
}