:root {
  --animacion: #00ff00;
  --animacion-secundaria: #ffffff;
  --color-secundario: #ffec00;
  --color-fondo: #3c3c3b;
  --tipografia: "Roboto", sans-serif;
  /*    Titulo:ExtraBold 800 - Botones:Medium 500 - Parrafo:Light 300 - Footer:Thin 100    */
}



body {
  background-color: var(--color-fondo);
  font-family: var(--tipografia);
}

/* Base = celular */
.logo {
  max-width: 200px;
  margin: 20px auto 10px auto;
}

/* Tablet */
@media (min-width: 392px) {
  .logo {
    max-width: 300px;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .logo {
    max-width: 600px;
  }
}
/*Aqui termina la edicion para celulares LOGO*/


/*Aqui termina la edicion para celulares TITULO*/
@media (max-width: 391px) {
  h1 {
    font-size: 24px;
  }
}
/*Aqui empieza la edicion para celulares TITULO*/
h1 {
  text-align: center;
  font-family: var(--tipografia);
  font-weight: 800;
  color: var(--color-secundario);
}




.container p {
  font-family: var(--tipografia);
  font-weight: 300;
  color: var(--animacion-secundaria);
  font-size: 18px;
  max-width: 1043px;
  max-height: 270px;
  margin-left: 200px;
  margin-right: 200px;
}
/*Aqui Empieza la edicion para celulares textos o parrafos*/
@media (max-width: 391px) {
  .container p {
    margin-left: 0;
    margin-right: 0;
  }

  .container {
    width: 75%;
    margin: 0 auto;
  }
}
/*Aqui termina la edicion para celulares textos o parrafos*/

/* Estilos para la sección de contacto Ipad*/
@media (max-width: 768px) {
  .contact-info .visita {
    display:block;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}





/* Estilos para la sección de contacto PC */
.contact-info h3 {
  font-family: var(--tipografia);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-secundario);
  text-align: center;
}

.contact-info p {
  font-family: var(--tipografia);
  font-weight: 300;
  color: var(--animacion-secundaria);
  font-size: 18px;
  max-width: 1043px;
  max-height: 270px;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 20px;
  margin-bottom: 60px;
}

/*Aqui Empieza la edicion para celulares textos o parrafos*/
@media (max-width: 391px) {
  .contact-info p {
    margin-left: 0;
    margin-right: 0;
  }

  .contact-info {

    width: 75%;
    margin: 0 auto;
  }
}
/*Aqui termina la edicion para celulares textos o parrafos*/


.contact-info a {
  background-color: var(--color-secundario);
  max-width: 300px;
  padding: 12px;
  border-radius: 12px;
  margin: 50px;
  font-family: var(--tipografia);
  font-weight: 800;
  text-decoration: none;
  color: var(--color-fondo);
    border: 2px solid var(--animacion-secundaria);
}

.contact-info {
  text-align: center;
}

.contact-text {
text-align: left;
}

.contact-info a:hover {
  background-color: var(--animacion);
  color: var(--color-fondo);
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 2px solid var(--animacion);
}
  


footer {
  text-align: center;
  padding-top: 70px;
  padding-bottom: 20px;
  background-color: var(--color-fondo);
  color: var(--animacion-secundaria);
  font-family: var(--tipografia);
  font-weight: 100;
  
}

.color-2 {
  background-color: var(--color-secundario);
  width: 100%;
  height: 2px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.color-2::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 50%; /* ancho del degradado */
  height: 100%;
  background: linear-gradient(
    to left,
    #FF00FF,
    #00FF00
  );
  animation: mover 2s linear infinite;
}

@keyframes mover {
  from {
    right: -50%;
  }
  to {
    right: 100%;
  }
}