:root {
    --primario: #E60E00;
    --primarioOscuro: #8C1500;
    --secundario: #FEC159;
    --blanco: #FFF;
    --negro: #000;

    --fuentePrincipal: 'Edu QLD Beginner', cursive;
    --fuenteSecundaria: 'Oswald', sans-serif;
    --fuenteTercera: Arial, sans-serif;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  /* Globales */
  body {
      background-image: url(../img/autos_coltro_prototipo_ecuador.jpg);
      width: 100%;
      height: 100vh;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: var(--blanco);
      font-size: 1.6rem;
      line-height: 1.5;
  }
  p {
      font-size: 1.8rem;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--blanco);
  }  
  a {
      text-decoration: none;
  }
  img {
      max-width: 100%;
  }
  .contenedor {
    max-width: 120rem;
    margin: 0 auto;
  }
  h1, h2, h3, h4 {
      text-align: center;
      color: var(--secundario);
      font-family: var(--fuentePrincipal);
  }
  h1 {
      font-size: 4rem;
  }
  h2 {
      font-size: 3.2rem;
  }
  h3 {
      font-size: 2.4rem;
  }
  h4{
      font-size: 1.8rem;
  }
  /* Header*/
  header {
      margin: 0 auto;
      background-color: rgba(0, 0, 0, .5);
      border-bottom: solid .2rem var(--claroYellow);
  }
  header, h1, h2{
      margin: 0;
      padding: 0;
  }
  .video{
      width: 65%;
      margin: 0 auto;
      text-align: center;
      padding-top: 8rem;
  }
  section{
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      position: absolute;
      bottom: 5rem;
      text-align: right;
      padding-right: 10rem;
  }
  .boton a{
      padding: 1rem 2rem;
      border-radius: 8px;
      background-color: var(--negro);
      color: var(--blanco);
      font-family: var(--fuenteSecundaria);
      border: 2px solid var(--negro);
  }

  .boton a:hover{
      background-color: var(--primario);
      border: 2px solid var(--primarioOscuro);
      transition: all 1s;
  }
  .contactos{
      color: var(--blanco);
      font-family: var(--fuenteSecundaria);
  }
  .contactos a{
      color: var(--blanco);
  }
  .contactos a:hover{
      color: var(--primario);
      transition: all 1s;
  }

  footer{
      width: 100%;
      background-color: var(--primarioOscuro);
      position: absolute;
      bottom: 0;
  }

  footer p{
      padding: 1rem 0;
      text-align: center;
      font-size: 1.4rem;
  }

  footer a{
      color: var(--blanco);
  }

  footer a:hover{
      color: var(--secundario);
      transition: 1s;
  }


  /* medias querty*/

  @media (max-width: 768px) {
    section{
        bottom: 5rem;
        padding: 0 3rem;
    }
    footer p{
        font-size: 1.2rem;
    }
    .boton a:hover{
        background-color: var(--secundario);
        color: var(--negro);
    }
    .contactos a:hover{
        color: var(--secundario);
    }
    .video iframe{
        margin: 0 auto;
        width: 100%;
    }
  }

  @media (max-width:480px) {
      header h1{
          font-size: 3rem;
      }
      .video{
          margin: 0 auto;
      }
      footer p{
        font-size: 1rem;
      }
  }

  @media (max-width: 375px) {
      footer p{
          font-size: .8rem;
      }
  }

  @media (max-width: 240px) {
    .video{
        padding-top: 0%;
    }
    section{
        bottom: 3rem;
        padding: 0 0.2rem;
        font-size: 1rem;
    }
    footer p{
          font-size: .5rem;
      }
  }